@charset "utf-8";

#design .PC {
	background: url("../images/Design_top.png") no-repeat center;
	height: 398px;
}
#design .smartphone {
	background: url("../images/Design_top (smartphone).png") no-repeat center;
	height: 398px;
}

/* ---------- ネット折込用のデザインは４プラン ---------- */
#design_plan,
#banner_sakusei {
	max-width: 1024px;
	margin: auto;
}
#design_plan .title_img {
	background: url("../images/Design_plan_title.png") no-repeat center;
	height: 85px;
	margin: 3% auto 1% auto;
}
.number {
	align-items: flex-end;
}
.number span {
	color: #0075ff;
	font-weight: bold;
	font-size: 11.5rem;
	margin: 0 10px -80px 30px;
	font-family: Acumin Variable Concept;
}
.number h4 {
	font-size: 2.3rem;
	text-align: left;
	line-height: 2.3ex;
	margin: 0 0 10px 10px;
}
fieldset {
	border: #0075ff 5px solid;
	border-radius: 20px;
	position: relative;
	padding-bottom: 30px;
	margin-bottom: 50px;
}
#design_plan .photo {
	position: absolute;
	top: 35px;
	left: 0;
	z-index: -1;
}
#design_plan .illust {
	position: absolute;
	top: 300px;
	left: 20px;
	z-index: -1;
}
legend {
	background: #0075ff;
	color: #FFF;
	font-size: 2.2rem;
	font-weight: bold;
	letter-spacing: 3px;
	border-radius: 40px;
	padding: 0.3% 10%;
}
legend span {
	color: #ffff00;
	font-size: 3rem;
}
#design_plan .align {
	width: 100%;
	max-width: 570px;
	min-height: 550px;
	margin: 30px 0 20px auto;
}
#design_plan .info {
	background: #9dd9ff;
	color: #0075ff;
	font-size: 1.875rem;
	padding: 10px 30px;
	margin: 10px 0 20px 0;
}
#design_plan .info p {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	background: #FFF;
	color: #000;
	font-weight: bold;
	font-size: 1rem;
	width: 160px;
	padding: 5px 0;
	border-radius: 10px;
	margin: 5px 0 5px 0;
}
#design_plan .chuuiten {
	border-top: #a8a8a8 3px solid;
	border-bottom: #a8a8a8 3px solid;
	padding: 20px;
	margin: 40px 0;
}
#design_plan .chuuiten h4 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 125px;
	height: 125px;
	padding-top: 10px;
	border-radius: 50%;
	background: #9dd9ff;
	font-size: 1.1rem;
	text-align: center;
}
#design_plan .chuuiten ul {
	width: 100%;
	max-width: 740px;
	font-size: 1rem;
	line-height: 3.3ex;
}
#design_plan .chuuiten li {
	list-style: none;
	text-indent: -1.45em;
}
#design_plan .chuuiten li:before {
	content: "●";
	color: #9dd9ff;
	margin-right: 5px;
}
#design_plan .sample .bar h5 {
	background: #ff6877;
	color: #FFF;
	text-align: center;
	font-size: 2.125rem;
	padding: 15px 0;
}
#design_plan .sample .bar .triangle {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 40px solid #ff6877;
	border-bottom: 0;
	margin: auto;
}
#design_plan .sample .flex .img {
	margin: 10px 20px;
}
#design_plan .sample h6 {
	color: #ff6877;
	font-size: 2rem;
	width: 95%;
	margin: 20px auto 0 auto;
}
#design_plan #chirashi_plus .info h4 {
	font-size: 1.7rem;
}
#design_plan #hp .info {
	width: 135px;
	height: 135px;
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
#design_plan #hp .info h4 {
	font-size: 1.4rem;
	width: 135px;
}
@media (max-width: 1150px) {
	#design_plan .photo {
		top: -30px;
		width: 60%;
	}
	#design_plan .illust {
		top: 50px;
		left: auto;
		right: 30px;
	}
	#design_plan .align {
		max-width: 700px;
		min-height: 450px;
		margin: 360px auto 20px auto;
	}
	#design_plan .info {
		font-size: 2.2rem;
		padding: 10px 35px;
		margin: 10px 0 20px 0;
	}
	#design_plan .chuuiten {
		flex-direction: column;
		max-width: 700px;
		margin: 40px auto;
	}
	#design_plan .chuuiten h4 {
		width: 170px;
		height: 170px;
		font-size: 1.563rem;
	}
	#design_plan .chuuiten ul {
		margin: 20px 0 0 10px;
		font-size: 1.1rem;
	}
	#design_plan .chuuiten li {
		text-indent: -0.9em;
	}
	#design_plan .sample {
		max-width: 700px;
		margin: auto;
	}
	#design_plan .sample .bar h5 {
		font-size: 1.7rem;
	}
	#design_plan .sample .flex-wrap {
		flex-wrap: wrap;
	}
	#design_plan .sample .flex .img {
		margin: 10px 25px;
	}
	#design_plan .sample h6 {
		width: 90%;
	}
	#design_plan #chirashi_plus .info h4 {
		font-size: 2rem;
	}
	#design_plan .info p {
		font-size: 1.2rem;
		width: 190px;
	}
	#design_plan #hp .info {
		width: 160px;
		height: 160px;
	}
	#design_plan #hp .info h4 {
		font-size: 1.6rem;
	}
	#design_plan #hp .sample .flex .img {
		margin: 10px auto;
		width: 90%;
	}
}

/* ---------- バナー作成料金 ---------- */
.blue {
	background: #88ceff;
	padding: 100px 0 50px 0;
}
#banner_sakusei fieldset {
	border-color: #000c85;
	background: #FFF;
}
#banner_sakusei legend {
	background: #000c85;
}
#banner_sakusei fieldset h4 {
	text-align: left;
	margin: 20px 0;
}
#banner_sakusei fieldset .wrap {
	width: 92%;
}
#banner_sakusei .package {
	margin-bottom: 3%;
}
#banner_sakusei .package h2 {
	color: #0075ff;
	font-size: 3.625rem;
	letter-spacing: -5px;
}
#banner_sakusei .package .flex-between {
	align-items: center;
}
#banner_sakusei .package .price {
	margin-top: -20px;
}
#banner_sakusei .package .price .circle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ff1d25;
	color: #FFF;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	font-size: 1.5rem;
	font-weight: bold;
}
#banner_sakusei .package .price h3 {
	font-family: Acumin Variable Concept;
	font-size: 6.5rem;
	color: #ff1d25;
	line-height: 2ex;
	padding-top: 20px;
}
#banner_sakusei .package .price .tax {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #ff1d25;
	font-weight: bold;
	font-size: 2.75rem;
	line-height: 1.5ex;
}
#banner_sakusei .package .price .tax span {
	color: #000;
	font-size: 1rem;
}
#banner_sakusei .package p {
	font-size: 1rem;
}
@media (max-width: 1150px) {
	#banner_sakusei fieldset .width {
		max-width: 650px;
	}
	#banner_sakusei .package h2 {
		font-size: 3rem;
	}
	#banner_sakusei .package .flex-between {
		flex-direction: column;
		align-items: flex-start;
	}
	#banner_sakusei .package .price .circle {
		width: 90px;
		height: 90px;
		font-size: 2rem;
	}
	#banner_sakusei .package .price h3 {
		font-size: 8.5rem;
		padding: 20px 0 0 10px;
	}
	#banner_sakusei .package .price .tax {
		font-size: 3.5rem;
	}
	#banner_sakusei .package .price .tax span {
		font-size: 1.2rem;
	}
	#banner_sakusei .package p {
		font-size: 1.3rem;
	}
}