@charset "UTF-8";

/**************************************************/
/* 制作費用 */
/**************************************************/

/* 冒頭テキスト */
#pricePage .centerText {
	text-align: center;
}
#pricePage .centerText span {
	display: inline-block;
	line-height: 1.4;
}

#pricePage .designTitle ,
#pricePage .graphicTitle {
	text-align: center;
	color: #aaa;
	font-size: 4rem;
	margin-top: 1em !important;
}

/* idにリンクで飛んでくるので
マージンじゃなくpaddingに */
#pricePage .priceSection {
	margin: 0;
	padding: 2rem 0;
}

/* ブロックスペース */
#pricePage h2 ,
#pricePage .centerText ,
#pricePage #priceMenu nav ,
#pricePage #priceMenu p ,
#pricePage .priceSection ul ,
#pricePage .priceSection table {
	margin: 2rem 0;
}

/* メニュー */
#pricePage #priceMenu {
	text-align: center ;
}
#pricePage #priceMenu h2 ,
#pricePage #priceMenu p {
	display: inline-block ;
}
#pricePage #priceMenu h2 {
	margin: 0;
	font-size: 1.4rem;
}
#pricePage #priceMenu nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 2rem;
	text-align: left ;
}
#pricePage #priceMenu p {
	padding: 0.5rem 2rem;
	background: #eee;
}

/* 各料金説明 */
#pricePage .priceSection h3 {
	text-align: center ;
}
#pricePage .priceSection h4 {
	margin: 1rem 0;
	font-size: 1.1rem;
	text-align: center ;
}
#pricePage .priceSection .photo {
	line-height: 1;
}
#pricePage .priceSection th ,
#pricePage .priceSection td {
	width: 50%;
	text-align: center;
}

/* 制作実績サムネイル */
#pricePage .priceSection .screenshot {
	display: none;	
}

/* ボタンリスト */
#pricePage .works ul {
	margin: 2rem 0 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}
#pricePage .works li {
	margin: 0;
	list-style: none;
	text-align: center;
	line-height: 1;
}
#pricePage .works .btn a {
	padding-left: 1rem;
	padding-right: 1rem;
	width: 18rem;
}

/* ロゴの写真 */
#pricePage #logoPrice .photo img {
	border: 1px solid #eee;
}

/**************************************************/
/* タブレットの時 */
/**************************************************/
@media only screen and (min-width: 768px) {
	/* idにリンクで飛んでくるので
	マージンじゃなくpaddingに */
	#pricePage .priceSection {
		padding: 4rem 0;
	}
	#pricePage #priceMenu nav {
		margin: 4rem 0 2rem;
		gap: 0 4rem;
	}
	#pricePage #priceMenu p {
		padding: 0.5rem 4rem;
	}
	#pricePage #priceMenu ,
	#pricePage .centerText  {
		margin: 8rem 0;
	}
	#pricePage .designTitle ,
	#pricePage .graphicTitle {
		font-size: 6rem;
		margin-top: 14rem !important;
		margin-bottom: 2rem;
	}
	#pricePage .priceSection h3 {
		margin-top: 2rem;
		text-align: left;
		font-size: 2.2rem;
	}
	#pricePage .priceSection h4 {
		text-align: left ;
	}
	#pricePage .priceSection .flex {
		margin: 2rem 0 0;
	}
	#pricePage .priceSection .photo {
		width: 35%;
	}
	#pricePage .priceSection .text {
		width: 55%;
	}
	#pricePage .priceSection .price ,
	#pricePage .priceSection .works {
		width: 47.5%;
	}
	#pricePage .priceSection table {
		margin-top: 0;
	}
	#pricePage .priceSection ul {
		margin-bottom: 0;
	}	
	/* 実績画像・ボタン */
	#pricePage .priceSection .works {
		background: #eee;
		border: 1px solid #ddd;
		border-radius: 4px;
		overflow: hidden;
		position: relative;
		text-align: center;
	}
	#pricePage .priceSection .screenshot ,
	#pricePage .priceSection .btn {
		width: 90%;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
	}
	/* 制作実績サムネイル */
	#pricePage .priceSection .screenshot {
		margin: 3rem 5%;
		display: block;	
	}
	#pricePage .priceSection .screenshot img {
		border-radius: 0;
	}
	/* ボタン */
	#pricePage .priceSection .works ul {
		top: auto;
		bottom: 0;
		margin: 0 5%;
		padding: 3rem 0;
		background: #eee;
	}
	/* バナー・ロゴ・名刺 */
	#pricePage #banaPrice .btn ,
	#pricePage #logoPrice .btn ,
	#pricePage #cardPrice .btn {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

/**************************************************/
/* パソコンの時 */
/**************************************************/
@media only screen and (min-width: 1200px) {
}