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

/* ---------- 初回お試し ---------- */
.shokai{
	padding: 50px 0;
	background-image: url("../images/Shokai_BG.png");
	background-repeat: no-repeat;
	background-position: top center;
}
.shokai .wrap {
	max-width: 860px;
}
.shokai h4 {
	text-align: left;
	margin-bottom: 10px;
}
.shokai h2 {
	font-size: 2.3rem;
}
.shokai h2 mark {
	font-size: 3rem;
	background: #0075ff;
	color: #FFF;
	padding: 0 3px;
}
.shokai h2 mark:first-child {
	background: #ff9400;
}
.shokai h3 {
	font-size: 7rem;
	color: #ed1d25;
	letter-spacing: -5px;
}
.shokai .note {
	text-align: right;
	font-size: 13px;
	padding: 0 80px 10px 0;
}
.shokai h5 {
	font-size: clamp(1.375rem, 0.894rem + 1.03vw, 2.125rem);
	text-align: center;
	margin-top: 2%;
}
.shokai .flex-center img {
	box-shadow: #999 5px 5px 5px;
	margin: 20px 10px;
	width: 335px;
}
.shokai .OR {
	width: 45px;
	height: 45px;
	margin: -25px -20px;
}
.shokai .OR span {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0075ff;
	color: #ffff00;
	font-weight: bold;
	font-size: 20px;
	box-shadow: rgba(0,12,146,0.8) 3px 3px 5px;
	
	position: relative;
	z-index: 1;
}
.taiou {
	text-align: center;
	width: 95%;
	max-width: 1060px;
	margin: 1% auto;
}
.taiou h6 {
	color: #0075ff;
	background: #ffff00;
	font-size: 1.85rem;
	padding: 5px 0;
}
.taiou p {
	font-size: 1.3rem;
	margin: 10px 0;
}
@media screen and (max-width: 1150px){
	.shokai{
		background-image: url("../images/Shokai_BG (smartphone).png");
	}
	.shokai .wrap {
		max-width: 600px;
	}
	.shokai h2 {
		font-size: 1.4rem;
	}
	.shokai h2 mark {
		font-size: 2rem;
	}
	.shokai h3 {
		font-size: 5rem;
	}
	.shokai .flex-center {
		flex-direction: column;
	}
	.shokai .flex-center img {
		width: 550px;
	}
	.taiou p {
		font-size: 1.1rem;
	}
}


/* ----- ネット折込用のデザインは４プラン ----- */
.design_plan {
	background: #0f00ca;
	padding: 50px 0;
}
.design_plan .wrap {
	background: #FFF;
	border-radius: 20px;
	padding: 20px 0;
}
.design_plan .title_img {
	background: url("../images/Design_plan_title.png") no-repeat center;
	height: 85px;
	margin-bottom: 1%;
}
.design_plan .flex-between {
	max-width: 1060px;
	width: 90%;
}
.design_plan .align {
	width: 220px;
	margin-bottom: 3%;
}
.design_plan a {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ff6877;
	color: #FFF;
	font-weight: bold;
	font-size: 1.5rem;
	padding: 5px 0;
	margin: 3% 0;
}
.design_plan a:hover {
	background: #ff9100;
}
@media screen and (max-width: 1150px){
	.design_plan .flex-between {
		flex-wrap: wrap;
		max-width: 750px;
	}
	.design_plan .align {
		width: 300px;
		margin-bottom: 7%;
	}
	.design_plan a {
		font-size: 1.75rem;
	}
}


/* ---------- スマホとPCで最強の集客へ！ ---------- */
.catchcopy h2 {
	font-size: clamp(2.813rem, 1.812rem + 2.14vw, 4.375rem);
}
.catchcopy h2 mark {
	background: #0075ff;
	color: #FFF;
	height: 5%;
}
.catchcopy h2 mark:first-child {
	background: #ff9400;
	line-height: 2.3ex;
}
.catchcopy h2 b {
	font-size: clamp(3.625rem, 2.703rem + 1.97vw, 5.063rem);
	color: #000c8b;
}
@media screen and (max-width: 1150px){
	.catchcopy {
		background: #e5ffff;
	}
}


/* ---------- 背景 ---------- */
#orikomi .BG_position {
	position: absolute;
	width: 100%;
	top: 250px;
	z-index: -1;
}
#orikomi .josei {
	background-image: url("../images/BG_josei.png");
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
	height: 760px;
}
#orikomi .blue {
	height: 2676px;
}
#orikomi .blue .top {
	line-height: 0;
	margin: 0;
	padding: 0;
}
#orikomi .blue .middle {
	background: #0075ff;
	height: calc(850px - 0.1%);
	line-height: 0;
	margin: -10px 0 0 0;
	padding: 0;
}
#orikomi .blue .bottom {
	line-height: 0;
	margin: -10px 0 0 0;
	padding: 0;
}
@media screen and (max-width: 1500px){
	#orikomi .blue {
		top: 15%;
	}
	#orikomi .blue .middle {
		height: calc(1050px - 0.1%);
	}
}
@media screen and (max-width: 1150px){
	#orikomi .blue {
		top: 24%;
	}
	#orikomi .blue .middle {
		height: calc(1200px - 0.1%);
	}
	#orikomi .josei {
		height: 890px;
	}
}
@media screen and (max-width: 900px){
	#orikomi .blue {
		top: 23%;
	}
	#orikomi .josei {
		top: 14%;
		height: 600px;
		background-position: center;
		background-size: cover;
	}
}


/* ---------- ネット折込って？ ---------- */
#orikomi {
	position: relative;
}
#orikomi .ichi {
	text-align: center;
	font-size: 1.75rem;
	line-height: 3.3ex;
}
#orikomi .ni {
	text-align: center;
	font-size: 1.1rem;
	margin-top: 20px;
}
#orikomi .img1 {
	width: 594px;
	margin: 40px auto;
}

/* スマホやPCに、配信できます。 */
#orikomi .haishin {
	width: 100%;
	max-width: 1024px;
	margin: 280px auto 0 auto;
}
#orikomi .haishin .align {
	width: 100%;
	max-width: 900px;
}
#orikomi .haishin .eria .flex {
	height: 550px;
}
/* 現代はスマホ観覧率80％ */
#orikomi .san {
	color: #ffff00;
	font-size: 2.5rem;
	justify-content: center;
}
#orikomi .san hr {
	border: #ffff00 1px solid;
	height: 65px;
	transform: rotate(30deg);
	margin: 0 40px;
}
#orikomi .san hr:first-child {
	transform: rotate(-30deg);
}
/* スマホやPCパソコンに、配信できます。 */
#orikomi .shi {
	color: #000c8b;
	font-size: 3.8rem;
	text-align: center;
}
#orikomi ruby {
	color: #FFF;
}
#orikomi ruby rt {
	font-size: 1.2rem;
}
/* エリア半径を指定 */
#orikomi .go {
	font-size: 2.625rem;
	text-align: left;
	margin-top: 8%;
	margin-bottom: 5%;
}
#orikomi .go mark {
	width: 680px;
	padding-left: 20px;
	display: inline-block;
}
#orikomi .roku {
	width: 470px;
	color: #FFF;
	font-size: 1.6rem;
	margin-top: 10px;
	text-align: justify;
}
#orikomi .roku span {
	display: block;
	font-size: 1.1rem;
	text-align: center;
	margin-top: 4%;
}
#orikomi .eria .flex {
	position: relative;
}
#orikomi .eria .img {
	position: absolute;
	top: 0;
	z-index: -1;
}
#orikomi .eria .eki,
#orikomi .eria .text{
	justify-content: flex-end;
}
#orikomi .eria .eki .img {
	left: 0;
}
#orikomi .omise .img {
	right: 0;
}
@media screen and (max-width: 1150px){
	#orikomi .ichi,
	#orikomi .ni {
		text-align: left;
	}
	#orikomi .shi {
		margin-bottom: 8%;
		font-size: 2.6rem;
	}
	#orikomi .img1 {
		width: 350px;
		margin: 20px;
	}
	#orikomi .go {
		margin-top: 0;
	}
	#orikomi .roku {
		font-size: 1.5rem;
		width: 340px;
	}
	#orikomi .eria .flex {
		justify-content: center;
	}
	#orikomi .eria .text {
		margin-top: -100px;
	}
	#orikomi .eria .text .roku {
		font-size: 1.375rem;
		width: 700px;
		text-align: center;
	}
	#orikomi .eria .img {
		width: 530px;
		top: 15%;
	}
	#orikomi .eria .omise {
		margin-top: -50px;
	}
}


/* ---------- ネット折込の種類 ---------- */
#shurui .ichi {
	color: #0075ff;
	background: #ffff00;
	box-shadow: #000 10px 10px 0;
	font-size: clamp(3.438rem, 2.036rem + 2.99vw, 5.625rem);
	text-align: center;
	line-height: 2.3ex;
	padding: 20px 0;
}
#shurui .ni {
	font-size: clamp(2.5rem, 1.538rem + 2.05vw, 4rem);
	align-items: flex-end;
	line-height: 2.5ex;
	margin: 60px auto 0 auto;
	width: 90%;
}
#shurui .ni mark {
	background: #0075ff;
	color: #FFF;
}
#shurui .ni b {
	font-size: clamp(4rem, 1.756rem + 4.79vw, 7.5rem);
	color: #000c8b;
}
#shurui .ni b span {
	font-size: clamp(6rem, 2.795rem + 6.84vw, 11rem);
	letter-spacing: -25px;
}
#shurui .san {
	color: #0075ff;
	text-align: center;
	font-size: clamp(1.5rem, 0.987rem + 1.09vw, 2.3rem);
	line-height: 3ex;
}
/* 検索連動型・ディスプレイ型 */
#shurui .BG {
	position: relative;
	height: 0;
	padding-bottom: 36.82%;
}
#shurui .BG .BG_img {
	position: absolute;
	z-index: -1;
	top: 0;
	width: 100%;
}
#shurui .title1 {
	width: 65%;
	margin-right: 10%;
	padding-top: 5%;
}
#shurui .title1 h2 {
	font-size: clamp(5rem, 2.436rem + 5.47vw, 9rem);
	text-align: left;
}
#shurui .title1 p {
	font-size: clamp(1.25rem, 0.769rem + 1.03vw, 2rem);
	width: 80%;
	text-align: justify;
}
#shurui .title2 {
	margin-top: -8.5%;
	color: #000c8b;
}
#shurui .title2 h3 {
	text-align: right;
	font-size: clamp(3rem, 1.205rem + 3.83vw, 5.8rem);
}
#shurui .title2 h5 {
	text-align: right;
	font-size: clamp(1.25rem, 0.513rem + 1.57vw, 2.4rem);
	line-height: 1.5ex;
}
#shurui .blue {
	background: #8ed4ff;
	padding: 40px 0 80px 0;
}
#shurui .yellow {
	background: #ffffc4;
	padding: 60px 0;
	border-radius: 20px;
}
#shurui .yellow h3 {
	color: #0075ff;
	font-size: clamp(2rem, 1.119rem + 1.88vw, 3.375rem);
}
#shurui .yellow p {
	font-size: clamp(1.375rem, 1.054rem + 0.68vw, 1.875rem);
	max-width: 1000px;
	width: 95%;
	margin: 3% auto;
}
#shurui .yellow .img {
	max-width: 859px;
	margin: auto;
}
#shurui .yellow .img img {
	margin-top: -32%;
}
#shurui .yellow .circle {
	background: #ff8c00;
	color: #FFF;
	text-align: center;
	line-height: 2.2ex;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	font-size: 4.688rem;
	position: relative;
	z-index: 1;
}
#shurui .title3 {
	margin: 10% auto 3% auto;
}
#shurui .title3 h2 {
	font-size: clamp(2.188rem, 1.026rem + 2.48vw, 4rem);
}
#shurui .title3 mark {
	display: block;
	padding: 10px 0;
	color: #000c8b;
}
#shurui .title3 h5 {
	font-size: clamp(1.375rem, 0.654rem + 1.54vw, 2.5rem);
	margin-top: 2%;
	text-align: center;
}
#shurui .flex_img {
	max-width: 1000px;
	margin: auto;
	justify-content: space-between;
}
#shurui .flex_img span {
	width: 465px;
}
@media screen and (max-width: 1150px){
	#shurui .ichi {
		margin-top: -30%;
	}
	#shurui .title_line h3 b {
		font-size: clamp(2.2rem, 1.046rem + 2.46vw, 4rem);
	}
	#shurui .BG {
		padding-bottom: 54.13%;
	}
	#shurui .title2 {
		margin-top: -14%;
	}
	#shurui .yellow .img {
		max-width: 455px;
	}
	#shurui .yellow .circle {
		width: 150px;
		height: 150px;
		font-size: 2.5rem;
	}
	#shurui .flex_img {
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	#shurui .flex_img span {
		width: 510px;
	}
	#shurui .flex_img span:last-child {
		margin-top: 3%;
	}
}
@media screen and (max-width: 800px){
	#shurui .title1 h2 {
		width: 540px;
	}
}

/* ----- 媒体特性を最大限に活かす広告を選定 ----- */
#ads {
	margin-top: 5%;
}
#ads h5 {
	color: #e50639;
	text-align: center;
	font-size: clamp(2.375rem, 1.734rem + 1.37vw, 3.375rem);
}
#ads .flex {
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 980px;
	margin: auto;
}
#ads .align {
	width: 440px;
	margin-top: 5%;
}
#ads h2 {
	font-size: 2.8rem;
	letter-spacing: -2px;
	text-align: center;
	color: #0075ff;
	line-height: 1.8ex;
	height: 50px;
}
#ads h2 span {
	font-weight: normal;
	font-size: 1.8rem;
}
#ads .first,
#ads .second {
	height: 90px;
}
@media screen and (max-width: 1150px){
	#ads .flex {
		flex-flow: column;
		justify-content: center;
		width: 520px;
	}
	#ads .align {
		width: 520px;
		margin-top: 8%;
	}
	#ads .first {
		height: 50px;
	}
}