@charset "utf-8";
/* CSS Document */

/* ---------- ネット折込プラン ---------- */
#plan .white {
	background: #FFF;
	max-width: 1140px;
	padding: 40px 0;
	border-radius: 40px;
}

/* ---------- 内容幅 ---------- */
#plan .osusume,
#plan .gyoushu,
#plan .service,
#plan .option {
	max-width: 900px;
}

/* ---------- 背景色 ---------- */
#plan #otameshi {
	background: #0075ff;
	padding-top: 100px;
}
#plan #local {
	background: #5c6fff;
}
#plan #major {
	background: #000c93;
	padding-bottom: 100px;
}

/* ---------- オススメのプランです！ ---------- */
#plan .headline {
	background: #0079ff;
	color: #FFF;
}
#plan .headline h2 {
	font-size: clamp(1.5rem, 0.859rem + 1.37vw, 2.5rem);
}
#plan .headline span {
	color: #ffff00;
}
#plan #local .headline {
	background: #0f00cb;
}
#plan #major .headline {
	background: #000c93;
}

/* ---------- プランの画像 ---------- */
#plan .BG {
	position: relative;
}
#plan .BG .img {
	position: absolute;
	top: 0;
	z-index: 0;
}
#plan .BG .align {
	width: 75%;
	margin: 0 0 0 auto;
	position: relative;
	z-index: 1;
	padding-top: 5%;
}

/* ---------- ネット折込プラン ---------- */
#plan .BG h2 {
	line-height: 2ex;
	letter-spacing: -5px;
	font-size: clamp(5.5rem, 4.218rem + 2.74vw, 7.5rem);
	text-shadow: #FFF 0 0 20px;
}
#plan .BG h2 span {
	color: #0079ff;
	font-size: clamp(4.688rem, 4.167rem + 1.11vw, 5.5rem);
}
#plan #local .BG h2 span {
	color: #0f00cb;
}
#plan #major .BG h2 span {
	color: #000c93;
}

/* ---------- 広告費20%＋運用費 ---------- */
#plan .BG h3 {
	margin: 4% 0 2% 0;
}
#plan .BG h3 mark {
	background: #0079ff;
	color: #FFF;
	padding: 5px 20px;
	font-size: clamp(2.188rem, 1.667rem + 1.11vw, 3rem);
}
#plan #local .BG h3 mark {
	background: #0f00cb;
}
#plan #major .BG h3 mark {
	background: #000c93;
}
#plan #local .BG .price .circle,
#plan #major .BG .price .circle {
	width: 150px;
	height: 150px;
}
#plan #local .BG .price .number,
#plan #major .BG .price .number {
	font-size: clamp(12rem, 10.077rem + 4.1vw, 15rem);
}
@media screen and (max-width: 1150px){
	#plan #local .BG .price .circle,
	#plan #major .BG .price .circle {
		width: 130px;
		height: 130px;
	}
	#plan .BG .img {
		width: 80%;
	}
}
#plan .arrow {
	width: 130px;
	margin: auto;
}

/* ---------- プラン料金 ---------- */
#plan .price {
	margin-top: -50px;
}
#plan .price .circle {
	background: red;
	width: 115px;
	height: 115px;
	border-radius: 50%;
	color: #FFF;
}
#plan .price .number {
	font-size: clamp(7rem, 3.474rem + 7.52vw, 12.5rem);
	font-family: Acumin Variable Concept;
	letter-spacing: -5px;
	margin-top: 20px;
}
#plan .price .tax {
	font-size: clamp(3.75rem, 2.949rem + 1.71vw, 5rem);
	line-height: 1.5ex;
	margin-bottom: 20px;
}
#plan .price .tax span {
	color: #000;
	font-size: clamp(1.25rem, 0.929rem + 0.68vw, 1.75rem);
}
#plan .BG h5 {
	font-size: clamp(1.125rem, 0.965rem + 0.34vw, 1.375rem);
	width: 85%;
	margin: -20px auto 0 auto;
}
#plan #local .BG h5,
#plan #major .BG h5 {
	margin-top: -40px;
}

/* ----- お客様に用意してもらうもの ----- */
#plan .youi {
	margin: 6% 0 4% 0;
}
#plan .youi h3 {
	font-size: 2.5rem;
}
#plan #local .youi h3 {
	color: #5c6fff;
}
#plan #major .youi h3 {
	color: #000c93;
}
#plan .youi .flex {
	flex-wrap: wrap;
	width: 1000px;
	margin: auto;
}
#plan .youi .flex h4 {
	background: #3fa0ff;
	color: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 210px;
	height: 210px;
	font-size: 1.25rem;
	margin: 5px 10px;
}
#plan #local .youi .flex h4 {
	background: #5c6fff;
}
#plan #major .youi .flex h4 {
	background: #000c93;
}

/* ----- こんな方におすすめ！ ----- */
#plan .osusume h3 {
	font-size: clamp(3.125rem, 1.843rem + 2.74vw, 5.125rem);
}
#plan #local .osusume h3,
#plan #major .osusume h3 {
	font-size: clamp(2.8rem, 2.159rem + 1.37vw, 3.8rem);
	letter-spacing: -2px;
}
#plan .osusume .list {
	font-weight: bold;
	font-size: clamp(1.626rem, 1.258rem + 0.78vw, 2.2rem);
	margin: 30px 0 80px 0;
}
#plan .osusume img {
	margin-right: 5px;
}
#plan .osusume p {
	display: flex;
	align-items: center;
	margin: 15px 0 0 0;
}

/* ----- おすすめの業種 ----- */
#plan .gyoushu h5 {
	font-size: clamp(2rem, 1.744rem + 0.55vw, 2.4rem);
	color: #0079ff;
	text-align: center;
	margin: 20px 0 0 0;
	line-height: 2.3ex;
}
#plan .gyoushu h5 span {
	color: #ff6104;
}
#plan .gyoushu img {
	width: 200px;
	border-radius: 20px;
	border: #3f8bd7 4px solid;
	margin-top: 20px;
}
#plan .gyoushu .img p {
	text-align: center;
	font-weight: bold;
	font-size: 2rem;
}
#plan .gyoushu .note {
	background: rgba(63,160,255,0.3);
	border-radius: 10px;
	font-size: clamp(1.375rem, 1.135rem + 0.51vw, 1.75rem);
	padding: 20px 30px;
	margin: 20px auto;
}
#plan .gyoushu .note b {
	color: #0075ff;
}

/* ----- サービス内容 ----- */
#plan .service .flex {
	flex-wrap: wrap;
}
#plan .service .circle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #ffff00;
	color: #3fa0ff;
	text-align: center;
	font-weight: bold;
	font-size: 4.8rem;
	width: 270px;
	height: 270px;
	border-radius: 50%;
	line-height: 2.2ex;
	margin: 10px;
}
#plan #local .service .circle {
	color: #5c6fff;
	font-size: 4rem;
	width: 200px;
	height: 200px;
	line-height: 2ex;
}
#plan #major .service .circle {
	color: #000c93;
	font-size: 4rem;
	width: 200px;
	height: 200px;
	line-height: 2ex;
}
#plan .service .circle span {
	font-size: 3.4rem;
	letter-spacing: -3px;
}
#plan #local .service .circle span,
#plan #major .service .circle span {
	font-size: 2.35rem;
}
#plan .service h6 {
	font-size: clamp(1.375rem, 0.894rem + 1.03vw, 2.125rem);
	width: 95%;
	margin: 3% auto 2% auto;
}
#plan .service .note {
	font-size: 1.125rem;
	font-weight: bold;
	max-width: 950px;
	width: 95%;
	margin: auto;
	line-height: 3.5ex;
	display: flex;
}
#plan .service .note span {
	margin-right: 5px;
}

/* ----- オプション ----- */
#plan .option .box {
	background: linear-gradient(140deg, rgba(0,117,255,1) 30%, rgba(63,160,255,1) 30%);
	width: 430px;
	height: 340px;
	border-radius: 20px;
	padding: 20px;
	margin-top: 20px;
}
#plan #local .option .box {
	background: linear-gradient(140deg, rgba(15,0,203,1) 30%, rgba(92,111,255,1) 30%);
}
#plan #major .option .box {
	background: linear-gradient(140deg, rgba(15,0,203,1) 30%, rgba(92,111,255,1) 30%);
}
#plan .option .box h3 {
	color: #FFF;
	text-align: center;
	font-size: 3rem;
	line-height: 2.3ex;
	padding: 0 0 25px 0;
}
#plan .option .box .price {
	color: #ffff00;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}
#plan .option .box .price .circle {
	background: #ffff00;
	color: #000;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
}
#plan .option .box .price .number {
	font-size: 6rem;
}
#plan .option .box .price .tax {
	font-size: 2.5rem;
	text-align: center;
}
#plan .option .box .price .tax span {
	color: #000;
	font-size: 1rem;
}
#plan .option .box p {
	margin-top: -10px;
	font-size: 1.02rem;
	font-weight: bold;
}

/* ----- について ----- */
#plan .option .about h3 {
	font-size: clamp(2.375rem, 1.974rem + 0.85vw, 3rem);
	border-left: #000 10px solid;
	padding-left: 3%;
	line-height: 2ex;
	margin: 10% 0 3% 0;
}
#plan .option .about h6 {
	font-size: clamp(1.375rem, 0.894rem + 1.03vw, 2.125rem);
}
#plan .option .about h6 span {
	font-size: 1rem;
}
#plan .option .about img {
	margin: 20px 0;
}
@media screen and (max-width: 1150px){
	#plan .BG .align {
		width: 90%;
		margin: 0 auto;
	}
	#plan .BG h5 {
		width: 90%;
	}
	#plan .youi .flex {
		width: 600px;
	}
	#plan .gyoushu .flex {
		width: 60%;
		min-width: 510px;
		flex-wrap: wrap;
		margin: auto;
	}
	#plan .gyoushu img {
		width: 236px;
	}
	#plan .service .flex {
		flex-wrap: wrap;
	}
	#plan .service .circle {
		font-size: 4rem;
		width: 200px;
		height: 200px;
		line-height: 2ex;
	}
	#plan .service .circle span {
		font-size: 2.35rem;
	}
	#plan .option .flex {
		flex-direction: column;
		width: 550px;
		margin: auto;
	}
	#plan .option .box {
		width: 550px;
		height: 400px;
	}
	#plan .option .box h3 {
		font-size: 3.5rem;
		line-height: 2.2ex;
	}
	#plan .option .box .price .circle {
		width: 70px;
		height: 70px;
		font-size: 1.8rem;
	}
	#plan .option .box .price .number {
		font-size: 7.5rem;
	}
	#plan .option .box .price .tax {
		font-size: 3rem;
	}
	#plan .option .box .price .tax span {
		font-size: 1.2rem;
	}
	#plan .option .box p {
		margin-top: -20px;
		font-size: 1.25rem;
	}
}