@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');
/* KV CSS Document */
/******** 全体 ********/
body.toppage {
	background-image: url("../image/kv/sp/kv_topwave.svg");
	background-repeat: no-repeat;
	background-size: 110% auto;
	background-position: center top;
}
.kv {
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
	font-weight: 900;
	overflow-x: hidden;
}
body.toppage header.container-fluid {
	padding: 0;
}
@media screen and (min-width:1070px) {
	body.toppage {
		background-position-y: -85px;
	}
	.kv {
		max-width: 1200px;
		height: 1000px;
		overflow-x: visible;
	}
}
@media screen and (min-width:1334px) {
	body.toppage {
		background-position-y: -105px;
	}
}
@media screen and (min-width:1500px) {
	body.toppage {
    	background-position-y: -165px;
	}
}
/******** ロゴ ********/
.kv .logo {
	position: absolute;
	top: 6px;
    left: 5%;
}
.kv .logo img {
	width: 150px;
}
/** 1070px以上 **/
@media screen and (min-width:1070px) {
	.kv .logo {
		position: relative;
		padding-top: 4%;
		display: inline-block;
	}
	.kv .logo img {
		width: auto;
	}
}
/******** 赤と青の丸 ********/
.kvcircle {
	position: absolute;
	top: 82px;
    left: 10px;
}
.kvcircle .blue {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #74abeeb5;
    position: relative;
}
.kvcircle .red {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #fa67d2b5;
    position: absolute;
    top: 22px;
    left: 25px;
}
/** 1070px以上 **/
@media screen and (min-width:1070px) {
	.kvcircle {
		top: 19%;
		left: 25px;
	}
	.kvcircle .blue {
		width: 50px;
		height: 50px;
	}
	.kvcircle .red {
		width: 35px;
		height: 35px;
		top: 27px;
    	left: 27px;
	}
}
/******** 今あるホームページをそのまま更新代行で対応できる！ ********/
.kv .candowrap {
	background-color: #fa67d2b5;
	border-radius: 50%;
	width: 155px;
	height: 155px;
	padding-top: 38px;
    padding-left: 21px;
	position: absolute;
	right: 10px;
	top: 6px;
	z-index: 5;
}
.kv .candowrap p {
	text-align: left;
	color: #fff;
	font-size: 17px;
    line-height: 24px;
}
.kv .candowrap span.cando_small {
	font-size: 0.7em;
	display: inline-block;
    line-height: 15px;
}
.kv .candowrap span.cando_big {
	font-size: 1.4em;
}
/** 1070px以上 **/
@media screen and (min-width:1070px) {
	.kv .candowrap {
		width: 300px;
		height: 300px;
		right: 80px;
		top: 26px;
		padding-top: 77px;
    	padding-left: 43px;
	}
	.kv .candowrap p {
		font-size: 30px;
		line-height: 42px;
	}
	.kv .candowrap span.cando_small {
		line-height: 24px;
	}
	@media screen and (min-width:1111px) {
		.kv .candowrap {
			right: 130px;
		}
	}
}
/******** ホームページの更新は更新エージェントへ ********/
.kv .catchcopy {
	padding-top: 132px;
	position: relative;
	z-index: 10;
	text-align: center;
}
.kv .catchcopy p {
	font-size: 8.5vw;
	margin: 0 auto;
}
.kv .catchcopy p:first-child {
	letter-spacing: 2px;
}
.kv .catchcopy p:last-child {
	letter-spacing: 5px;
}
.kv .catchcopy span.campanyname {
	background-color: #000;
	color: #fff;
	display: inline;
	padding-left: 5px;
    padding-bottom: 4px;
	margin-right: 3px;
}
.kv .br_sp {
	display: none;
}
/** 1070px以上 **/
@media screen and (min-width:1070px) {
	.kv .br_sp {
		display: block;
	}
	.kv .catchcopy {
		text-align: left;
		position: absolute;
		padding-top: 0;
		top: 23%;
		left: 8%;
	}
	.kv .catchcopy p {
		font-size: 53px;
		display: inline-block;
		width: 100%;
	}
}
/******** 更新代行リスト ********/
.kv .kvservicewrap {
	display: flex;
	padding: 0 3px;
	position: relative;
	margin-top: 15px;
}
/** 1070px以上 **/
@media screen and (min-width:1070px) {
	.kv .kvservicewrap {
		display: static;
		position: static;
	}
}
/**** 左側 ****/
.servicecategory {
	text-align: center;
	width: 50vw;
}
.servicecategory img {
	max-width: 100%;
}
.servicecategory ul li {
	background-color: #ffde54;
	width: 92%;
	height: 33px;
    border: 2px solid #000;
    border-radius: 12px;
	font-size: 14px;
	padding: 3px 0;
	margin-bottom: 6px;
}
.servicecategory ul li:last-child {
	margin-bottom: 0;
}
@media screen and (min-width:500px) {
	.servicecategory {
		margin-left: 5%;
	}
}
@media screen and (min-width:800px) {
	.servicecategory ul li {
		width: 30vw;
    	height: 50px;
    	font-size: 18px;
    	padding: 8px 0;
    	margin: 0 auto 6px;
	}
}
@media screen and (min-width:1070px) {
	.servicecategory img {
		max-width: none;
		position: absolute;
		top: 50%;
    	/*left: calc( 50% - 50%);*/
		left: calc(50% - 519px);
		width: 278px;
	}
	.servicecategory ul {
		position: absolute;
		display: flex;
		width: 470px;
		flex-wrap: wrap;
		top: 60%;
    	left: calc( 50% - 235px);
	}
	.servicecategory ul li { 
		width: 200px;
		height: 50px;
		font-size: 20px;
    	padding: 7px 0;
    	border: 3px solid #000;
	}
	.servicecategory ul li:nth-child(odd) {
		margin-right: 10px;
	}
}
/**** 右側 ****/
.kv .serviceimage {
	width: 60vw;
}
.kv .serviceimage .pricelabel_pc {
	display: none;
}
.kv .serviceimage .pricelabel_mobile {
	position: absolute;
	top: calc(50% - 40%);
	right: 2%;
	max-width: 50vw;
	/*max-height: 80px;*/
}
.kv .serviceimage .meetingimage {
	position: absolute;
	bottom: calc(50% - 50%);
	right: 0;
    max-width: 56vw;
	max-height: 300px;
}
@media screen and (min-width:400px) {
	.kv .serviceimage .pricelabel_mobile {
		top: calc(50% - 50%);
	}
	.kv .serviceimage .meetingimage {
		bottom: calc(50% - 53%);
		right: 0;
		top: 27%;
	}
}
@media screen and (min-width:500px) {
	.kv .serviceimage .pricelabel_mobile {
		right: 1%;
	}
	.kv .serviceimage .meetingimage {
		right: 5%;
		top: 28%;
	}
}
@media screen and (min-width: 680px) {
	.kv .serviceimage .pricelabel_mobile {
		top: calc(50% - 56%);
	}
}
@media screen and (min-width:800px) {
	.kv .serviceimage .pricelabel_mobile {
		top: calc(50% - 56%);
		max-width: none;
		max-height: none;
	}
	.kv .serviceimage .meetingimage {
		max-width: none;
		max-height: 350px;
		right: 15%;
		top: 32%;
	}
}
@media screen and (min-width:1070px) {
	.kv .serviceimage .pricelabel_mobile {
		display: none;
	}
	.kv .serviceimage .pricelabel_pc {
		display: block;
		position: absolute;
		top: 40%;
    	left: calc(50% - 15%);
		max-height: auto;
		max-width: 412px;
	}
	.kv .serviceimage .meetingimage {
		max-width: 454px;
   		max-height: 532px;
		top: calc( 50% - 4%);
		right: calc(50% - 519px);
		width: 278px;
		 /*
    	top: calc( 50% - 9%);
    	right: calc(50% - 48%);
    	width: 327px
		*/
	}
}
/******** 無料診断してみる ********/
.diagnosebutton {
	background: rgb(255,105,223);
	background: linear-gradient(90deg, rgba(255,105,223,1) 0%, rgba(169,144,255,1) 100%);
	color: #fff;
	font-size: 17px;
	border-radius: 60px;
	line-height: 14px;
	padding: 17px 0;
	width: calc(100% - 30px);
    margin: 1rem auto 1.5rem;
	letter-spacing: 1px;
	position: relative;
	z-index: 5;
	cursor: pointer;
}
.diagnosebutton:hover {
	letter-spacing: 7px;
}
.diagnosebutton span.buttom_small {
	font-size: 0.8em;
	font-weight: 500;
	display: inline-block;
	margin-top: 6px;
}
.diagnosebutton a {
	color: #fff;
	position: relative;
	transition: all 0.4s 0s ease-in-out;
}
.diagnosebutton a:hover {
	text-decoration: none;
}
.diagnosebutton::before {	/* 白い丸 */
	content: "";
	background: #fff;
	border-radius: 50%;
	height: 40px;
	width: 40px;
	position: absolute;
	z-index: 10;
	right: 15px;
	top: 20%;
}
.diagnosebutton::after {	/* 矢印 */
	content: "\f061";
	font-family: FontAwesome;
	position: absolute;
	z-index: 15;
	right: 24px;
    top: 39%;
	color: #000;
	font-size: 22px;
	transition: .5s;
}
.diagnosebutton:hover::after {	/* hoverで位置をズラす */
	right: 4px;
}
@media screen and (min-width:1070px) {
	.diagnosebutton {
		width: 550px;
		height: 95px;
		font-size: 24px;
		line-height: 20px;
		padding: 25px 0;
		position: absolute;
		left: calc( 50% - 275px);
		bottom: 0;
	}
	.diagnosebutton::before {	/* 白い丸 */
		top: 28%;
	}
}
/******** サービス解説 ********/
.servicecomment p {
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 2rem;
	padding: 0px 10px;
}
/** 1070px以上 **/
@media screen and (min-width:1070px) {
	.servicecomment {
    	position: absolute;
		top: 80%;
    	left: calc( 50% - 420px);
	}
	.servicecomment p {
		width: 840px;
		padding: 0;
		text-align: center;
	}
}
/******** シェイプ ********/
.kv_shape img {
	position: absolute;
}
.kv_shape .s_small {
	width: 180px;
    height: 140px;
    right: calc(0% - 83px);
    top: 160px;
}
.kv_shape .s_middle {
	bottom: -300px;
    right: calc(0% - 83px);
    width: 300px;
    height: 580px;
}
.kv_shape .s_middle_left {
	top: -60px;
    left: calc(0% - 203px);
    width: 300px;
    height: 580px;
}
@media screen and (min-width:1070px) {
	.kv_shape .s_small {
   		right: calc(50% - 103px);
    	top: 140px;
		transform: rotate(189deg);
	}
	.kv_shape .s_middle {
		right: calc(0% - -37px);
		width: 390px;
		transform: rotate(224deg);
	}
	.kv_shape .s_middle_left {
		top: 260px;
    	left: calc(0% - 213px);
    	width: 480px;
    	height: 681px;
	}
}
/********  ********/
/********  ********/
/********  ********/
/********  ********/