@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Noto+Sans+JP:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');
/* CSS Document */
/* bootstrap4の左右余白を消す */
container,
.container-fluid {
    padding-right: 0;
    padding-left: 0;
}
@media screen and (min-width:576px) and (max-width:767px)  {  /* 576px~767pxの左右の余白を消す */
    .container {
        max-width: none;
    }
}
@media screen and (min-width:1070px){
    .container, .container-lg, .container-md, .container-sm, .container-x{
        max-width:1070px;
    }
}
/**** 汎用CSS ****/
.mail-thanks {
    font-size: 16px;
    overflow-x: hidden;
}
main {
	overflow-x: hidden;
	font-family: "Montserrat","Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"
}
main h2, main h3, main h4 ,main h5,
.mail-thanks h2 {
    font-weight: bold;
}
main h2 {
    display: inline-block;
    background: rgb(243,93,119);
    background: linear-gradient(90deg, rgba(243,93,119,1) 0%, rgba(167,99,216,1) 52%, rgba(36,171,227,1) 100%);
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 30px;
}
.mail-thanks h2{
    font-size: 1.8em;
    color: #74abee;
    margin-bottom: 70px;
}
main h2 .sub {
    color: #000;
    font-size: .7em;
    letter-spacing: 1.2px;
    font-weight: 600;
}
main p,
.mail-thanks p{
    color: #000;
    font-size: 16px;
    line-height: 1.8em;
}
span.unline-orange {    /* オレンジ下線 */
    background: linear-gradient(transparent 60%, #ffb701 0%);
}
span.unline-skyblue {    /* 水色下線 */
    background: linear-gradient(transparent 60%, #6bc6e7 0%);
}
span.unline-yellow {    /* 黄色下線 */
    background: linear-gradient(transparent 60%, #ffff00 0%);
}
span.bold-pink {
	font-weight: bold;
	font-size: 1.1em;
	color: #fa67d2;
}
span.big {
	font-size: 1.3em;
}
span.bold {
	font-weight: bold;
}
.red {
	color: #e24b4b;
}
/* PCmodeとSPmodeの切り替え */
main .PCmode {
    display: none;
}
@media screen and (min-width:768px) {    /* 768px以上でSPmodeを非表示、PCmodeを表示 */
    main .SPmode {
        display: none;
    }
    main .PCmode {
        display: inline-block;
    }
}
/* SPのみ改行 */
@media screen and (min-width:992px) {
	br.br_sp {
		display: none;
	}
}
/* セクション区切りの丸 */
.circle .blue {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #74abeeb5;
    position: relative;
}
.circle .red {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fa67d2b5;
    position: absolute;
    top: 31px;
    left: 33px;
}

/* セクション区切る丸 */
header {
    position: relative;
}
/**** 問い合わせバナー ****/
main .cv {
    padding: 5rem 0;
	background-image: url("../image/inquery-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media screen and (min-width:768px){    /* PCでパララックス */
main .cv_parallax {
        background-attachment: fixed;
    }
}
main .cv .cv_ttl{
	color: #fff;
	font-size: 40px;
    line-height: 1.0;
    font-weight: 900;
    letter-spacing: 3px;
}
main .cv .cv_text01{
	color: #fff;
	font-size: 1.0em;
    line-height: 1.6;
    letter-spacing: 0.13em;
}
main .cv .cv_buttun{
  display: flex;
  justify-content: center;
}

main .cv .cv_text02{
	position: relative;
	display: table-cell;
	display: inline;
	color: #fff;
	font-size: 1em;
    line-height: 2.6;
    font-weight: 800;
    letter-spacing: 0.1em;
	padding: 7px 32px
}
main .cv .cv_text02:before, main .cv .cv_text02:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 34px;
	height: 3px;
	background-color: #fff;
}
main .cv .cv_text02:before {
	left:0;
	transform: rotate(60deg);
}
main .cv .cv_text02:after {
	right: 0;
	transform: rotate(-60deg);
}

main .cv .cv_text03{
	color: #fff;
	font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 0.2em;
}
main .cv .cv_tel{
	color: #fff;
	font-size: 28px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 0.2em;
}
main .cv span.cv_unline {    /* 黄色下線 */
    background: linear-gradient(transparent 90%, #ffff00 0%);
	padding-bottom: 4px;
}
main .cv span.cv_unline02 {    /* 黄色下線 */
    background: #ffff00;
	padding: 2px;
}
.cv .cv_ico {
    display: none;
}

@media screen and (min-width:720px) {
    .cv .cv_ico {
        display: block;
        position: absolute;
        right: calc(50% - 353px);
    }
}
main .cv a img {	/* ホバーでサイズを大きく */
	transition: 0.5s;
}
main .cv a:hover img {	/* ホバーでサイズを大きく */
    transform: scale(1.2, 1.2);
	transition: 0.5s;
}
/**** このようなお困りごとはありませんか？ ****/
.worries {
    background-color: transparent;
    position: relative;
    padding: 10rem 0 2rem;
	z-index: 100;
}
.worries .circle {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 3;
}
.worries h2 {
	margin-bottom: 55px;
}
.worries_inner {
	background-color: #def2ff;
	padding: 60px 0 70px;
	position: relative;
	text-align: center;
}
.worries_casebox {
	position: relative;
	background-color: #89bcef;
	border-radius: 20px;
	max-width: 260px;
	padding: 12px 5px 20px;
	margin: auto;
	text-align: center;
}
.worries_casebox dt {
	font-size: 1.2em;
    letter-spacing: 3px;
	margin-bottom: 7px;
}
.worries_casebox dd {
	color: #fff;
	font-size: 1.4em;
	line-height: 1.2;
}
.worries_solutionbtn {
	position: absolute;
	bottom: -25px;
	right: 0;
}
.worries_humanimage img {
	width: 110px;
}
/* case01 */
.worriescase01 {
	margin-left: 3%;
}
.worries_humanimage01 {
	position: absolute;
	top: -5px;
    right: -100px;
}
/* case02 */
.worriescase02 {
	margin-right: 3%;
    margin-top: 70px;
    margin-bottom: 70px;
}
.worries_humanimage02 {
	position: absolute;
	top: 6px;
    left: -90px;
}
/* case03 */
.worriescase03 {
	margin-left: 3%;
}
.worries_humanimage03 {
	position: absolute;
	top: -5px;
    right: -100px;
}
.worries_arrow {
	position: absolute;
	bottom: 0;
	left: calc( 50% - 106px);
	z-index: 10;
}
.worries_arrow img {
	width: 212px;
}
.worries_shadow {
	position: absolute;
    box-shadow: 0px 42px 44px 11px rgb(242 148 255 / 18%);
    width: 200px;
    height: 60px;
    bottom: 4px;
    border-radius: 80%;
    left: calc( 50% - 100px );
}
/* ふきだしの丸 */
.worriestitle_speachbubble_first,
.worriestitle_speachbubble_second {
	display: none;
}
@media screen and (min-width:716px) {
	.worries_casebox {
		position: relative;
	}
	.worriestitle_speachbubble_first {
		display: block;
		position: absolute;
		width: 16px;
		height: 13px;
		background-color: #89bcef;
		border-radius: 100%;
		left: 45px;
    	bottom: -26px;
		transform: rotate(-10deg);
	}
	.worriestitle_speachbubble_second {
		display: block;
		position: absolute;
		width: 11px;
		height: 11px;
		background-color: #89bcef;
		border-radius: 100%;
		left: 68px;
    	bottom: -38px;
	}
}
@media screen and (min-width: 500px) {
	.worries_casebox {
		max-width: calc( 100% - 130px);
	}
}
@media screen and (min-width: 650px) {
	.worries_inner {
		padding-bottom: 210px;
	}
	.worries_caseboxwrap {
		display: flex;
		max-width: 1000px;
		margin: 0 auto;
	}
	.worries_casebox dd {
		font-size: 1.15rem;
	}
	.worries_casebox {
		max-width: 250px;
		width: calc( 100% / 3.333);
	}
	.worriescase01 {
		margin: auto;
	}
	.worries_humanimage01 {
    	top: 100px;
    	right: calc( 50% - 60px);
	}
	.worriescase02 {
		margin: auto;
	}
	.worries_humanimage02 {
    	top: 100px;
		left: calc( 50% - 60px);
	}
	.worriescase03 {
		margin: auto;	
	}
	.worries_humanimage03 {
		top: 100px;
    	left: -80px;
	}
	.worries_solutionbtn {
    	bottom: -155px;
    	right: calc( 50% - 83.5px);
	}
}
/**** おまかせください！ ****/
main .solution {
    padding: 7rem 10px 2rem;
}
.solution section {
    position: relative;
}
.solutioncasewrap {
    position: relative;
    z-index: 100;
}
.solution .shape01 {
    position: absolute;
    z-index: 1;
    top: -30px;
    left: calc( 50% - 480px );
    width: 570px;
    transform: rotate(50deg);
}
.solution .shape02 {
    position: absolute;
    z-index: 1;
    top: 830px;
    right: calc( 50% - 590px );
    width: 680px;
    transform: rotate(45deg);
}
.solution .br_sp {
    display: block;
}
.solution h2 {
    font-size: 1.6em;
    display: inline-block;
    background: rgb(243,93,119);
    background: linear-gradient(90deg, rgba(243,93,119,1) 0%, rgba(167,99,216,1) 52%, rgba(36,171,227,1) 100%);
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}
.solution .solution_header .solution_copy {
	font-size: 1.2em;
    margin-bottom: 2rem;
    line-height: 1.6;
}
.aftercasebox {
	margin-bottom: 80px;
}
.aftercasebox:last-child {
	margin-bottom: 0;
}
.aftercasebox h3 {
	border: 1px solid #000;
	font-weight: normal;
	position: relative;
	z-index: 10;
	margin: 20px auto 0;
	max-width: 400px;
	background-color: #fff;
}
.aftercasebox h3:after {	/* ズレた背景 */
	/*content: "";*/
    display: block;
    width: 100%;
    height: 105px;
    background: #d3eaed;
    position: absolute;
    z-index: 2;
    top: -10px;
    right: -5px;
}
.aftercasebox h3:before {
	position: absolute;
	bottom: -20px;
    left: calc( 50% - 35px);
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 33px 0 33px;
	border-color: #007bff transparent transparent transparent;
}
/*** 見出しの装飾 ***/
/*　01　*/
.before_ornament01left,
.before_ornament01right {
	position: absolute;
}
.before_ornament01left {
	top: 21px;
	left: -7px;
}
.before_ornament01right {
	right: 5px;
    top: -12px;
}
/*　02　*/
.before_ornament02left,
.before_ornament02right {
	position: absolute;
}
.before_ornament02left {
	top: -8px;
	left: 9px;
}
.before_ornament02right {
	top: 5px;
	right: 12px;
}
#aftercasebox02 .solution_human_left img {
	width: 156px;
}
#aftercasebox02 .solution_human_right img {
	width: 125px;
}
#aftercasebox02 .solution_human_left {
	transform: scaleX(-1);
	top: 1px;
}
#aftercasebox02 .solution_human_right {
	top: 0;
	right: -90px;
	z-index: 5;
}
/* 03 */
.before_ornament03left,
.before_ornament03right {
	position: absolute;
}
.before_ornament03left {
	top: 23px;
	left: 9px;
}
.before_ornament03right {
	top: -18px;
	right: 15px;
}
#aftercasebox03 .solution_human_left img {
	width: 186px;
}
#aftercasebox03 .solution_human_left {
	top: 1px;
}
#aftercasebox03 .solution_human_right img {
	width: 105px;
}
#aftercasebox03 .solution_human_right {
	top: 1px;
	z-index: 2;
}
.aftercasebox h3 p {
	font-size: 20px;
	display: inline-block;
	border-bottom: 1px dashed #000;
	margin-top: 18px;
    margin-bottom: 18px;
    line-height: 1.5;
    padding-bottom: 7px;
}
.aftercasebox h4 {
	text-align: center;
	position: relative;
	width: 187px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
    margin-top: 30px;
}
.aftercase_h4pc {
	display: none;
}
#aftercasebox02 h4 {
	min-height: 208px;
}
.aftercase_titleimg {
	position: relative;
	z-index: 10;
}
.solution_human_left {
	position: absolute;
	left: -92px;
    top: -17px;
	z-index: 4;
}
.solution_human_left img {
	width: 135px;
}
.solution_human_right {
	position: absolute;
	right: -94px;
    top: 11px;
}
.solution_human_right img {
	width: 110px;
}
.aftercase_summasry {
	max-width: 580px;
	margin: 0 auto
}
/** お任せください　PCデザイン **/
@media screen and (min-width:865px) {
	.solution .shape02 {
		top: 590px;
	}
	main .solution {
		height: 1600px; /* あとで消す */
	}
	.aftercasebox {
		background-color: #fcfcfcd9;
		position: absolute;
		z-index: 10;
		padding: 40px 0 30px;
		width: 690px;
		/*width: 750px;*/
		box-shadow: 5px 3px 10px 1px rgba(0, 0, 0, 0.23);
	}
	.aftercasebox br.br_sp {
		display: none;
	}
	.solution_title {
		position: absolute;
		left: 60px;
		top: -26px;
	}
	.aftercase_wrap {
		margin-top: 80px;
		position: relative;
	}
	.aftercasebox h3 {
		border: none;
		background-color: transparent;
		max-width: inherit;
		margin: 0;
	}
	.aftercasebox h3:before {	/*　三角を削除　*/
		content: none;
	}
	.aftercasebox h3 p {
		display: inline;
		border-bottom: none;
		margin: 0;
		padding: 0;
		line-height: normal;
	}
	.aftercasebox h4 {
		width: auto;
	}
	.aftercase_h4pc {
		display: block;
		background: rgb(178,143,247);
		background: linear-gradient(90deg, rgba(178,143,247,1) 0%, rgba(121,163,240,1) 100%);
		color: #fff;
		font-weight: normal;
    	width: calc(100% - 10%);
    	padding: 15px 0px;
		letter-spacing: 1px;
	}
	.aftercase_titleimg,
	.solution_human_left,
	.solution_human_right {
		display: none;
	}
	.solution_human_left,
	.solution_human_right {
		display: block;
	}
	#aftercasebox01 {
		left: -83px;
	}
	.before_ornament01right {
		right: calc(50% - 280px);
    	top: -20px;
	}
	.before_ornament01left {
		top: -18px;
    	left: calc(50% - 290px);
	}
	#aftercasebox01 .solution_human_left {
		left: 0;
		right: calc(50% - 1090px);
    	top: -170px;
	}
	#aftercasebox01 .solution_human_right {
    	right: calc(50% - 515px);
    	top: -80px;
		z-index: 5;
	}
	#aftercasebox02 {
		top: 430px;
		right: -83px;
	}
	#aftercasebox02 h4 {
		min-height: inherit;
	}
	.before_ornament02right {
		top: -25px;
    	right: calc(50% - 320px);
	}
	.before_ornament02left {
		left: calc(50% - 330px);
    	top: -19px;
	}
	#aftercasebox02 .solution_human_left {
		transform: none;
		left: calc(50% - 529px);
    	top: -100px;
	}
	#aftercasebox02 .solution_human_right {
		left: calc(50% - 1175px);
    	top: 14px;
	}
	#aftercasebox03 {
		top: 860px;
		left: -83px;
	}
	.before_ornament03left {
		left: calc(50% - 280px);
    	top: -13px;
	}
	.before_ornament03right {
		top: -49px;
    	right: calc(50% - 280px);
	}
	#aftercasebox03 .solution_human_left {
    	right: calc(50% - 1160px);
    	top: -97px;
	}
	#aftercasebox03 .solution_human_right {
    	right: calc(50% - 510px);
    	bottom: 0;
		z-index: 4;
	}
}
/**** 選ばれる理由 ****/
main .chosen {
    padding: 100px 0 0;
    background-color: transparent;
}
.chosen .center-header {
	padding-top: 4.5rem;
}
.chosen section {
	position: relative;
}
main .chosen .circle {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 3;
}
/*** シェイプの位置 ***/
.chosen .shape01 {
    position: absolute;
    top: -190px;
    left: calc( 50% - 480px );
    width: 570px;
    z-index: 0;
    transform: rotate(50deg);
}
.chosen .shape02 {
    position: absolute;
    top: 730px;
    right: calc( 50% - 400px );
    width: 600px;
    z-index: 30;
    transform: rotate(45deg);
}
.chosen .shape03 {
    position: absolute;
    bottom: 170px;
    right: calc( 50% - 110px );
    width: 580px;
    z-index: 30;
    transform: rotate(45deg);
}
@media screen and (min-width:992px){
   .chosen .shape01 {
        position: absolute;
        top: 0px;
        left: calc( 50% - 650px );
        width: 570px;
        z-index: 0;
        transform: rotate(24deg);
    }
    .chosen .shape02 {
        position: absolute;
        top: 420px;
        right: calc( 50% - 950px );
        width: 1000px;
        z-index: 30;
        transform: rotate(148deg);
    }
    .chosen .shape03 {
        position: absolute;
        bottom: -320px;
        right: calc( 50% - -280px );
        width: 530px;
        z-index: 30;
        transform: rotate(271deg);
    }
}
main .chosen h2 {
    font-size: 1.8em;
}

/**** 選ばれる理由　全体の囲い ****/
.chosenbox_outer {
    position: relative;
    background-color: transparent;
    z-index: 100;
	padding: 0 10px;
}
.chosenbox_inner {
	max-width: 768px;
	margin: 0 auto;
	padding-top: 30px;
    padding-bottom: 20px;
}
/*** 説明部分 ***/
/**** h3 ****/
/** グラデーションの見出し **/
.gradation_label {
	background: rgb(242,93,119);
    background: linear-gradient(90deg, rgba(242,93,119,1) 0%, rgba(166,99,215,1) 52%, rgba(36,170,226,1) 100%);
    color: #fff;
    padding: 10px 15px 10px 12px;
    font-style: italic;
    display: inline;
    font-size: 0.8em;
    position: relative;
}
/* 前方の赤い三角 */
.gradation_label::before {
	content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 47px 10px;
    border-color: transparent transparent #f25d77 transparent;
    left: -10px;
    top: 0;
}
/* 後方の青い三角 */
.gradation_label::after {
	content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 53px 10px 0 0;
    border-color: #24aae2 transparent transparent transparent;
    right: -10px;
    top: 0;
}
/** 黒背景の見出し **/
.black_label {
	background-color: #000;
    color: #fff;
    font-weight: bold;
    font-style: italic;
    padding: 10px 16px 10px 10px;
    margin-top: 8px;
    display: inline-block;
    position: relative;
}
/*　後方　*/
.black_label::after {
    content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 53px 10px 0 0;
	border-color: #000 transparent transparent transparent;
	right: -10px;
    top: 0;
}
/* 前方 */
.black_label::before {
	content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 52px 10px;
    border-color: transparent transparent #000 transparent;
    left: -10px;
    top: 1px;
}　
/*** 文章 ***/
.pdtop_165px {
	padding-top: 165px;
}
.pdtop_115px {
	padding-top: 115px;
}
.chosenbox_outer h3 {
	position: absolute;
    top: 0;
    left: -11px;
}
/* 2と4の見出しは右つき */
.chosen_otherweb h3,
.chosen_speed h3 {
	text-align: right;
	right: -11px;
}
.chosenbox_outer h3.pc_only {
	display: none;
}
.chosen_h3_second {
	margin-top: 0;
}
/**** 01　運用のプロが幅広い知識であなたをフォロー ****/
.chosen_follow {
	background-image: url("../image/chosen01_bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.chosen_follow::before {
	content: "";
	background-color: rgb(255 252 226 / 82%);
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	height: 100%;
}
.chosen_follow h3.sp_only {
	position: relative;
	left: -26px;
}
/**** 02　他社が作ったサイトでも更新可能！ ****/
.chosen_otherweb {
	background-image: url("../image/chosen02_bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.chosen_otherweb::before {
	content: "";
    background-color: rgb(209 236 250 / 82%);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
}
/**** 03　業界最安値でホームページが更新できる！ ****/
.chosen_lowcost {
	background-image: url("../image/chosen03_bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.chosen_lowcost::before {
	content: "";
	background-color: rgb(255 252 226 / 82%);
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	height: 100%;
}
.chosen_lowcost h3.sp_only {
	position: relative;
	left: -26px;
}
/**** 04　最短即日でスピード対応！ ****/
.chosen_speed {
	background-image: url("../image/chosen04_bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.chosen_speed::before {
	content: "";
    background-color: rgb(209 236 250 / 82%);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
}
/****  ****/
/****  ****/
/****  ****/
@media screen and (min-width:768px) {     /* 画面サイズ768px以上に適応 */
	.chosenbox_inner {
		max-width: 1070px;
	}
	.chosenbox_outer h3.pc_only {
		display: block;
	}
	h3.sp_only {
		display: none;
	}
	.chosen_summarywrap {
		padding-top: 15px;
		width: 550px;
	}
	.chosen_summarywrap p {
		max-width: 600px;
	}
	.chosenbox_outer h3 {
		position: static;
	}
	.chosen_otherweb h3,
	.chosen_speed h3 {
		text-align: left;
	}
}
@media screen and (min-width:992px) {     /* 画面サイズ992px以上に適応 */
}


/**** 対応実績 ****/
main .works {
    background-color: #f1f0f0;
    padding: 100px 0;
}
main .works .img-thumbnail {
    padding: 5px;
    border-radius: 5px;
}
/* スライダー設定 */
.works .slider img {
    width:100%;
    height:auto;
}
.works .slider .slick-slide {
	margin: 0 1.5rem;
}
@media screen and (min-width: 772px) {
	main .works .mockupwrap {
		overflow-x: hidden;
		display: flex;
		flex-wrap: wrap;
	}
	main .mockupwrap .mockupbox {
		margin-right: 0;
	}
}
/**** 更新サービス例　サービスの詳細 ****/
main .service {
    background-color: #fff;
    padding: 100px 10px;
}
main .servicebox h3 {
    padding-bottom: 12px;
    background-repeat: no-repeat;
    background-size: 100% 3pt;
    background-position: bottom;
}
main .servicebox h3.under01,
main .servicebox h3.under05 {
    background-image: rgb(250,80,11);
    background-image: linear-gradient(90deg, rgba(250,80,11,1) 0%, rgba(138,201,237,1) 100%); 
}
main .servicebox h3.under02,
main .servicebox h3.under06,
main .servicebox h3.under07 {
    background-image:rgb(98,170,133);
    background-image:linear-gradient(90deg, rgba(98,170,133,1) 0%, rgba(81,104,161,1) 100%);
}
main .servicebox h3.under03,
main .servicebox h3.under04,
main .servicebox h3.under08 {
    background-image: rgb(136,193,106);
    background-image: linear-gradient(90deg, rgba(136,193,106,1) 0%, rgba(210,131,216,1) 100%);
}
.servicewrap {
    margin-bottom: 5rem;
}
.servicewrap .servicebox {
    margin-bottom: 2rem;
}
.servicewrap .servicebox:last-child,
.servicewrap .servicebox:nth-child(7){
    margin-bottom: 0;
}
.servicewrap .servicebox h3{
    font-size: 1em;
}
@media screen and (min-width:720px) {
	.servicewrap .servicebox h3 {
		font-size: 1.2em;
	}
}
.servicewrap .servicebox p {
    text-align: left;
}
.servicewrap .servicebox .row {
    margin-bottom: 1.5em;
}
/**** 対応CMS詳細 ****/
.service_cms {
	background-color: #e6edef;
	padding: 100px 10px;
}
.service_cms .title_cartcms {
    margin-top: 70px;
    margin-bottom: 30px;
}
.service_cms .image_back {
	background-color: #fff;
	padding: 10px 10px 20px;
}
@media screen and (min-width: 720px) {
	.service_cms .image_back {
		width: calc(100% - 20%);
    	margin: auto;
	}
}
@media screen and (min-width: 0) and (max-width: 991px) {
	.title_cartcms {
		font-size: 1.7em;
	}
}
/**** 他社サービスとの比較 ****/
main .comparison {
    padding: 100px 0;
    background-color: #EBF7FB;
}
.comparison .scrollwrap {
	font-weight: bold;
}
.comparisonwrap {
	display: flex;
	margin-top: 60px;
}
.comparehead_updateagentwrap,
.otherservicewrap {
	display: inline-flex;
	flex-shrink: 0;
	flex-wrap: nowrap;
	padding-bottom: 20px;
}
.comparisonwrap h3 {
	height: 60px;
}
/* 項目部分 */
.comparison .comparehead {
	padding-top: 15px;
}
.comparehead h3 {
	font-size: 15px;
    padding-top: 5px;
    margin-bottom: 0;
    line-height: 1;
}
.comparehead h3 span {
	font-size: 0.9em;
	font-weight: normal;
}
.comparehead ul li {
	background: rgb(35,174,227);
	background: linear-gradient(90deg, rgba(35,174,227,1) 0%, rgba(24,136,216,1) 100%);
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	width: 100px;
	height: 55px;
	margin-bottom: 5px;
	padding: 15px 10px 0;
    line-height: 1.7;
	clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
	padding-left: 5px;
}
.comparehead ul li:nth-child(7),
.comparehead ul li:nth-child(8),
.comparehead ul li:nth-child(9),
.comparehead ul li:nth-child(11),
.comparehead ul li:nth-child(13),
.comparehead ul li:nth-child(14),
.comparehead ul li:nth-child(15) {	/* 行間を調整 */
	line-height: 1.2;
	padding-top: 12px;
	font-size: 14px;
}
@media screen and (min-width: 768px) {
	.comparehead h3 {
		font-size: 18px;
	}
	.comparehead ul li {
		width: 160px;
	}
	.comparison br.br_sp {
		display: none;
	}
	.comparehead ul li:nth-child(8),
	.comparehead ul li:nth-child(9),
	.comparehead ul li:nth-child(13),
	.comparehead ul li:nth-child(14) {
		line-height: 2.0;
	}
}
/* 自社＆他社　共通部分 */
.comparison .comparebox h3 {
	text-align: center;
	margin-bottom: 0;
}
.comparison .comparebox ul li {
	text-align: center;
	height: 60px;
	width: 110px;
	padding: 15px 5px 0;
    line-height: 1.9;
	font-size: 14px;
	font-weight: 500;
}
.comparison .comparebox li.evaluationstar .yellow {	/* 黄色い星 */
	color: #edbd36;
}
.comparison .comparebox li.evaluationstar .gray {	/* グレーの星 */
	color: #5B5B5B;
}
.comparison .comparebox li i.fa-bullseye {	/* 二重まる */
	color: #ef17a3;
    font-size: 18px;
}
.comparison .comparebox li.trignal i {	/* 三角 */
	transform: rotate(150deg);
    font-size: 18px;
    margin-top: 8px;
}
@media screen and (min-width: 768px) {
	.comparison .comparebox ul li {
		width: 145px;
		padding: 15px 10px 0;
		font-size: 14px;
	}
}
/* 更新エージェント部分 */
.comparison .updateagent {
	margin-left: 5px;
	background: rgb(59,124,214);
	background: linear-gradient(90deg, rgba(59,124,214,1) 0%, rgba(3,184,227,1) 100%);
	border-radius: 10px;
	padding-top: 14px;
	position: relative;
	width: 118px;
}
.comparison .updateagent .recommend_image {
	position: absolute;
	top: -55px;
	right: -30px;
}
.comparison .updateagent h3 {
	font-size: 16px;
	color: #fff;
	padding-top: 6px;
}
.comparison .updateagent span.sub {
	font-size: .8em;
}
.comparison .updateagent ul {
	border-left: 3.5px solid #3b7cd6;
	border-right: 4px solid #03b8e3;
	margin-bottom: 40px;
}
.comparison .updateagent ul li {
	color: #003bd0;
	font-weight: bold;
}
.comparison .updateagent ul li:nth-child(4),
.comparison .updateagent ul li:nth-child(5),
.comparison .updateagent ul li:nth-child(6) {
	line-height: 1.2;
	font-size: 12px;
}
.comparison .updateagent ul li:nth-child(even) {	/* 偶数列 */
	background-color: #fff;
}
.comparison .updateagent ul li:nth-child(odd) {	/* 奇数列 */
	background-color: #ebf7fb;
}
/***今だけ０円***/
.comparison .comparebox ul .ownfee {
	display: flex;
    justify-content: center;
    align-items: baseline;
    padding: 0;
}
.zero {
	color: #e24b4b;
    font-size: 2em;
}
.yen {
	color: #e24b4b;
}
@media screen and (min-width: 768px) {
	.comparison .updateagent {
		margin-left: 15px;
		width: 152px;
	}
	.comparison .updateagent h3 {
		padding-top: 15px;
	}
	.comparison .updateagent ul li:nth-child(4),
	.comparison .updateagent ul li:nth-child(5),
	.comparison .updateagent ul li:nth-child(6) {
		font-size: 14px;
	}
}
/* 他社サービス部分 */
.otherservice_scrollwrap {	/* スクロールさせるためのdiv */
	overflow-x: auto;
	white-space:nowrap;
}
.comparison .otherservice {
	margin-left: 5px;
	background-color: #adadad;
	border-radius: 10px;
	margin-top: 13px;
}
.comparison .otherservice h3 {
	color: #fff;
	font-size: 14px;
	padding-top: 14px;
}
.comparison .updateonly h3,
.comparison .adventsing h3,
.comparison .inhouse h3 {
	padding-top: 22px;
}
.comparison .otherservice ul {
	border-left: 4px solid #adadad;
	border-right: 4px solid #adadad;
	margin-bottom: 30px;
}
.comparison .otherservice  ul li {
	color: #000;
}
.comparison .otherservice ul li:nth-child(4),
.comparison .otherservice ul li:nth-child(5),
.comparison .otherservice ul li:nth-child(6) {
	line-height: 2.5;
	font-size: 12px;
}
.comparison .otherservice  ul li:nth-child(even) {	/* 偶数列 背景色 */
	background-color: #f4f4f4;
}
.comparison .otherservice  ul li:nth-child(odd) {	/* 偶数列 */
	background-color: #fff;
}
.comparison .adventsing ul li:nth-child(6) {
	line-height: 1.2;
}
@media screen and (min-width: 768px) {
	.comparison .otherservice {
		margin-left: 15px;
	}
	.comparison .otherservice ul li:nth-child(4),
	.comparison .otherservice ul li:nth-child(5),
	.comparison .otherservice ul li:nth-child(6) {
		line-height: 1.9;
		font-size: 14px;
	}
	#lh17px {
		line-height: 17px;
	}
}
/* 続きを見る */
.comparison_viewmore {
	position: relative;
}
/* ボタンデザイン */
.comparison_viewmore .viewmore-btn {
	background-color: #f0c16f;
	color: #fff;
	text-align: center;
	position: absolute;
	bottom: 1.5rem;
	right: calc(50% - 80px);
	cursor: pointer;
	transition: all .2s;
	width: 180px;
	z-index: 120;
	padding: 14px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
}
.comparison_viewmore .viewmore-btn:hover {
	background-color: #ffb138;
}
.comparison_viewmore .viewmore-btn::after {	/* 続きを読むボタンのテキスト */
  content: "もっと比較する";
}
.viewmore_hiddenelement {	/* 隠すテキスト */
	overflow: hidden;
	position: relative;
}
.viewmore_hiddenelement.is-hide {	/* 見えているテキストの高さ */
	height: 750px;
}
.viewmore_hiddenelement::before {
	background: rgb(235,247,251);
	background: linear-gradient(0deg, rgba(235,247,251,1) 0%, rgba(255,255,255,20%) 100%);
	bottom: 0;
	content: "";
	height: 75px; /* グラデーションで隠す高さ */
	position: absolute;
	width: 100%;
	z-index: 100;
}
.viewmore-btn {
	bottom: -3rem;
}
.viewmore-btn.is-show::after {
	content: "閉じる";
}
.comparison_viewmore .viewmore-btn.is-show {	/* 閉じるボタンの位置を下げる */
	/*right: calc(50% - 45px);*/
	bottom: -3.5rem;
	width: 180px;
}
.viewmore-btn.is-show + .viewmore_hiddenelement::before {
	display: none;
}
/**** 事例 ****/
main .casestudy {
    padding: 100px 0;
}
/**** ご依頼から対応完了までの流れ ****/
main .flow {
    padding: 100px 0;
    background-color: #d9e4e5;
    position: relative;
}
/* SPmodeデザイン */
main .flow .SPmode .row {
    background-color: #fff;
    border-radius: 15px;
    padding: 10px 0;
    position: relative;
    box-shadow: 6px 6px 15px 0px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.1rem;
    margin-right: 10px;
    margin-left: 10px;
    align-items: center;
}
main .flow .SPmode .row .col-4 {
    text-align: center;
}
main .flow .SPmode .row .col-8 h3 {
    color: #7eb2ef;
    font-size: 1.3em;
}
main .flow .SPmode .row .arrow {
    position: absolute;
    z-index: 3;
    transform: rotate(90deg);
    right: 45%;
    bottom: -19%;
}
/* PCmodeデザイン */
main .flow .stepbox-wrap {
    display: flex;
    justify-content: space-between;
}
main .flow .stepbox {
    background-color: #fff;
    border-radius: 15px;
    width: 24%;
    padding: 10px 0;
    position: relative;
    box-shadow: 6px 6px 15px 0px rgba(0, 0, 0, 0.3);
}
main .flow .stepbox h3 {
    font-size: 1.1em;
    color: #7eb2ef;
}
main .flow .stepbox p {
    margin-top: 20px;
    padding: 0 10px;
}
main .flow .stepbox .arrow {
    position: absolute;
    top: 40%;
    right: -35px;
    z-index: 3;
}
main .flow .circle {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 3;
}
/**** 料金プラン ****/
main .price {
    padding: 100px 0;
    background-color: #fff;
}
.price section {
    position: relative;
}
.price .shape01 {
    position: absolute;
    top: 10px;
    left: calc( 50% - 350px );
    width: 380px;
    z-index: 30;
}
.price .shape02 {
    position: absolute;
    top: 350px;
    right: calc( 50% - 280px );
    width: 270px;
    z-index: 30;
    transform: rotate(292deg);
}
.price .shape03 {
    position: absolute;
    bottom: -80px;
    left: calc( 50% - 280px);
    width: 170px;
    z-index: 30;
    transform: rotate(74deg);
}
@media screen and (min-width:992px){
    .price .shape01 {
        position: absolute;
        top: 10px;
        left: -120px;
        width: 650px;
        z-index: 30;
    }
.price .shape02 {
    position: absolute;
        top: 350px;
        right: -110px;
        width: 320px;
        z-index: 30;
    }
.price .shape03 {
        position: absolute;
        bottom: -80px;
        left: -110px;
        width: 210px;
        z-index: 30;
        transform: rotate(354deg);
    }
}

main .price h2 {
    display: inline-block;
    background: rgb(243,93,119);
    background: linear-gradient(90deg, rgba(243,93,119,1) 0%, rgba(167,99,216,1) 52%, rgba(36,171,227,1) 100%);
    -webkit-background-clip: text;
    color: transparent;
}
main .price h2 .sub {
    color: #000;
}
main .price .price-wrap {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem;
    position: relative;
    z-index: 100;
}
main .price .price-box {
    width: 300px;
    flex-shrink: 0;
    margin-left: 1rem;
    box-shadow: 2px 5px 12px -3px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
	background-color: #ffffffa6;
	position: relative;
}
/* プラン名＆このプランにするの背景色 */
main .price .price-box .plan-name {
    font-weight: bold;
    border-radius: 20px 20px 0 0;
    color: #fff;
    height: 40px;
    padding-top: 3%;
}
main .price .price-box .label01 {
    background-color: #6bc6e7;
    background: linear-gradient(90deg, rgba(145,168,240,0.8) 0%, rgba(65,230,223,0.8) 100%);
} 
main .price .price-box .label02 {
    background-color: #397ed7;
    background: linear-gradient(90deg, rgba(116,64,201,0.8) 0%, rgba(3,184,227,0.8) 100%);
} 
main .price .price-box .label03 {
    background-color: #a838c4;
    background: linear-gradient(90deg, rgba(124,66,226,0.8) 0%, rgba(208,46,168,0.8) 100%);
} 
/* プラン内容　時間/月 */
main .price .price-box h3 {
    text-align: center;
    height: 100px;
    color: #000;
    padding-top: 10px;
	position: relative;
}
main .price .price-box h3 .sub {
    font-size: .5em;
}
main .price .price-box h3.label01 {  
    background: rgb(145,168,240);
    background: linear-gradient(90deg, rgba(145,168,240,0.1) 0%, rgba(65,230,223,0.1) 100%);
}
main .price .price-box h3.label02 {
    background: rgb(116,64,201);
    background: linear-gradient(90deg, rgba(116,64,201,0.1) 0%, rgba(3,184,227,0.1) 100%); 
}
main .price .price-box h3.label03 {
    background: rgb(124,66,226);
    background: linear-gradient(90deg, rgba(124,66,226,0.1) 0%, rgba(208,46,168,0.1) 100%);
}
/* プラン内容　詳細 */
main .price .price-box .package {    /* プラン内容　詳細 */
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 10px;
    text-align: center;
    height: 180px;
}
main .price .price-box .package dl dt {
    color: #fa67d2;
}
/* このプランにする */
main .price .price-box .clickbox {
    border-radius: 0 0 20px 20px;
    text-align: center;
    height: 20px;
    padding-top: 2%;
}
main .price .price-box .clickbox p {
    color: #fff;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 1em;
    transition: .4s;
}
main .price .price-box a:hover{
    text-decoration: none;
}
main .price .price-box:first-child {
    margin-left: 0;
}
.scrollwrap {
    display: none;
}
/* 今だけ0円アイコン */
.limitedzeroyen {
	position: absolute;
    right: -19px;
    top: 0px
}
/* 料金部分の取り消し線 */
.price-box h3::before {
	display: block;
	content: "";
	height: 3px;
	width: 120px;
	background-color: #e24b4b;
	position: absolute;
	left: calc(50% - 60px);
    transform: rotate(350deg);
    top: 58%;
}
.price-box h3::after {
	position: absolute;
	content: url("../image/price_free.png");
	top: -42px;
}
@media screen and (min-width: 992px) {
	.price-box h3::after {
		top: -55px;
	}
}
/*0円の注釈*/
.notice {
	margin-top: 5px;
    border-bottom: 1px solid #3b3b3b;
    display: inline-block;
}
@media screen and (min-width:0px) and (max-width:991px) {
    .price .price-wrap {
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .price .price-wrap::-webkit-scrollbar {
        height: 5px;
        border-radius: 50px;
    }
    .price .price-wrap::-webkit-scrollbar-thumb {    /* スクロールバーの動く部分 */
        background: rgba(36,171,227,.5);
        background: linear-gradient(90deg, rgba(243,93,119,.5) 0%, rgba(167,99,216,.5) 52%, rgba(36,171,227,.5) 100%);
    }
    .price .price-wrap::-webkit-scrollbar-track {    /* スクロールバーの動かない部分 */
        background-color: #F6F6F6;
    }
    /*　スクロールアナウンス　*/
    .scrollwrap {
        display: block;
        position: relative;
        margin-bottom: 5px;
    }
    .scrollwrap .notice {
        position:absolute;
        bottom:0;
        right:0;
        animation: arrowmove 1s ease-in-out infinite;    /*矢印の動き1秒かけて永遠にループ*/
    }
}
/*　左右に動く　*/
@keyframes arrowmove {
	0%{right:0;}
    50%{right:3px;}
    100%{right:0;}
}
/*** コンサル付きプラン ***/
.consultingplan {
	background-color: #E6EFEF;
	padding: 190px 15px 100px;
	position: relative;
}
.consultingplan section {
	position: relative;
	z-index: 2;
}
/*背景のオブジェクト*/
.consultingplan_bk01,
.consultingplan_bk02 {
	position: absolute;
	z-index: 1;
}
.consultingplan_bk01 {
	top: 230px;
    left: -80px;
	width: calc(100% - 16%);
	max-width: 480px;
}
.consultingplan_bk02 {
	right: 0;
    bottom: 0;
	height: calc(100% - 69%);
}
.consultingplan h2 {
	position: relative;
	margin-bottom: 60px;
}
.consultingplan .consul_title_image {
	position: absolute;
	left: 0;
	top: -150px;
}
.plan_detail {
	text-align: left;
	margin: 27px auto 45px
}
.consultingplan_cv {
	letter-spacing: 2px;
	position: relative;
}
.consultingplan_cv_image01 {
	position: absolute;
	left: calc(50% - 51%);
}
.consultingplan_cv_image02 {
	position: absolute;
	right: -10px;
	bottom: -120px;
    width: 110px;
}
@media screen and (min-width: 720px) {
	.plan_detail {
		width: 473px;
	}
	.consultingplan_cv_image01 {
		left: calc(50% + 130px);
    	transform: scale(-1, 1);
	}
	.consultingplan_cv_image02 {
		left: 70px;
	}
}
@media screen and (min-width:992px) {
	.consultingplan .consul_title_image {
		left: calc(50% - 450px);
    	top: -58px;
	}
	.consultingplan_cv_image01 {
		top: -16px;
    	left: calc(50% + 225px);
	}
	.consultingplan_cv_image02 {
		left: calc(50% - 350px);
	}
}
@media screen and (min-width:1400px) {
	.consultingplan_bk01 {
    	top: 290px;
   		left: -180px;
	}
	.consultingplan_bk02 {
		height: auto;
	}
}
/* 作業範囲例 */
.operationwrap {
    background: rgb(254,145,192);
    background: linear-gradient(60deg, rgba(254,145,192,0.26) 0%, rgba(0,84,254,0.26376488095238093) 86%);
    width: calc(100% - 5%);
    max-width: 500px;
    margin: 4rem auto 0;
    border-radius: 25px;
    position: relative;
    padding-top: 6.5rem;
    padding-bottom: 2rem;
    z-index: 100;
}
.operation_header {
    background: rgb(178,143,247);
    background: linear-gradient(60deg, rgba(178,143,247,1) 0%, rgba(121,163,240,1) 100%);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    position: absolute;
    top: -35px;
    left: -18px;
}
.operation_header h3 {
    font-size: .98em;
    color: #fff;
    text-align: center;
    padding-top: 35%;
}
.operation_header h3 .sub_header {
    display: inline-block;
    font-size: .9em;
    font-weight: normal;
}
.operationwrap h4 {
    display: inline-block;
    background: rgb(243,93,119);
    background: linear-gradient(90deg, rgba(243,93,119,1) 0%, rgba(167,99,216,1) 52%, rgba(36,171,227,1) 100%);
    -webkit-background-clip: text;
    color: transparent;
    position: absolute;
    top: 25px;
    left: 118px;
	padding: 0 9px 0 0;
	font-size: 1.4em;
}
.operationwrap .samplerequest {
    width: calc( 100% - 10% );
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 15px;
    margin: 0 auto;
}
.samplerequest ul {
    margin-bottom: 0;
}
.operation_image {
    position: absolute;
    bottom: -90px;
    right: -19px;
}
.samplerequest ul li i:before {
    color: #ea3ba3;
}
@media screen and (min-width:720px) {
    .operationwrap {
        padding-top: 4.5rem;
    }
    .operation_image {
        bottom: 13px;
        left: -10px;
    }
	.operationwrap h4 {
		padding: 0;
	}
    .operationwrap .samplerequest {
        margin: 0 0 0 180px;
        width: 300px;
    }
}
/**** 作業の目安例 ****/
main .example {
    padding: 100px 0;
    background-color: #def2ff;
    position: relative;
}
.example .categorylist_image {
    display: none;
}
main .exsample h2 {
   margin-bottom: 2rem; 
}
/*** モーダルクリックメニュー ***/
.categorylist {
	margin-top: 30px;
}
.categorybox {
    background-color: #fff;
    border-radius: 28px;
    height: 55px;
    width: calc( 100% - 10% );
    margin: 0 auto 30px;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 54px;
    position: relative;
    text-align: center;
	cursor: pointer;
}
.categorylist h3 {
	display: inline-block;
	max-width: 370px;
}
.categorylist .listendarrow {
    position: absolute;
    top: -2px;
    right: 15px;
}
/* 各ボックスの色設定 */
.categorybox01 {
    box-shadow: 0px 0px 20px 0px rgba(209, 96, 162, 0.65);
    color: #9f5eb3;
}
.categorylist .categorybox02 {
    box-shadow: 0px 0px 20px 0px rgba(209, 96, 162, 0.65);
    color: #d160a2;
}
.categorylist .categorybox03 {
    box-shadow: 0px 0px 20px 0px rgba(0, 96, 204, 0.65);
    color: #0060cc;
}
.categorylist .categorybox04 {
    box-shadow: 0px 0px 20px 0px rgba(167, 99, 216, 0.65);
    color: #a763d8;
}
.categorylist .categorybox05 {
    box-shadow: 0px 0px 20px 0px rgba(65, 55, 158, 0.65);
    color: #41379e;
}
.categorylist .categorybox06 {
    box-shadow: 0px 0px 20px 0px rgba(36, 171, 227, 0.65);
    color: #24abe3;
}
/* ホバーした時にボックスシャドウを削除 */
.categorybox {
	transition: all 0.2s 0s ease-in-out;
}
.categorybox:hover {
	box-shadow: none;
	transition: all 0.2s 0s ease-in-out;
}
/* モーダル全体共通設定 */
/* bootstrapデフォルト設定 */
.modal-content {
	color: #fff;
	border: none;
}
.modal-content .modal-body dt {
	font-weight: normal;
}
.modal-header {
	border-bottom: none;
}
.example .close {
	color: #fff;
}
.hovercard {
    text-align: left;
    color: #fff;
    top: 65px;
    margin: 0 5px;
    padding: 20px 15px 10px;
    font-size: .8em;
}
.hovercard i:before {
    margin-right: 2px;
}
.hovercard dt {
    position: relative;
    padding: 0 0 0 1.6em;
    margin: 0 0 5px 0;
	line-height: 1.4;
}
.hovercard dt::before {
    position: absolute;
    left: 0;
    font-weight: bold;
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    color: #fff;
}
.hovercard dd {
	line-height: 1.4;
    padding: 0;
}
/* 各要素の色設定 */
.example_modalcontent01 {
    background-color: #9f5eb3;
}
.example_modalcontent02 {
    background-color: #df59a0;
}
.example_modalcontent03 {
    background-color: #1c5ac7;
}
.example_modalcontent04 {
    background-color: #b55ad3;
}
.example_modalcontent05 {
    background-color: #4d2e9a;
}
.example_modalcontent06 {
    background-color: #00aae0;
	width: 97%;
}
@media screen and (min-width:720px) {
    .example .categorylist_image {
        display: block;
        position: absolute;
        top: -75px;
        right: calc(50% - 386px);
    }
    .categorylist h3 {
        margin-left: 0;
        font-size: 18px;
    }
    .categorylist h3:nth-child(even) {
        margin-right: 0;
    }
}
@media screen and (min-width:992px) {
	.categorylist h3 {
		margin-right: 40px;
	}
}
/**** やり取り方法 ****/
main .interact {
    padding: 100px 0;
}
.aboutinteract {
    margin-bottom: 2rem;
}
.interact h3,
.interact h3 {
    background: rgb(178,143,247);
    background: linear-gradient(90deg, rgba(178,143,247,1) 0%, rgba(121,163,240,1) 100%);
    color: #fff;
    padding: 10px 0 10px 1rem;
	margin-bottom: 25px;
}
.aboutinteract ul,
.aboutagreement ul {
    padding-left: 5px;
}
.aboutinteract ul li,
.aboutagreement ul li {
    margin-bottom: 15px;
    border-bottom: 3px dotted #A990FE;
    line-height: 1.6;
    padding-bottom: 15px;
}
.aboutinteract ul li:last-child,
.aboutagreement ul li:last-child {
    margin-bottom: 0;
}
@media screen and (min-width:772px) {
	.interact_image {
		margin-top: 20px;
	}
}
/**** お客様の声 ****/
main .voice {
    padding: 100px 0;
    background-color: #d3e5f1;
	position: relative;
	background-image: url(https://placehold.jp/787dbf/ffffff/1080x423.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	background-size: 100% auto;
}
.voice .circle {
	position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 3;
}
.voice h2 {
	font-size: 1.5em;
	text-stroke: 1px #fff;
	-webkit-text-stroke: 1px #FFF;
}
.voicewrap {
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	overflow-x: scroll;
    overflow-y: hidden;
	padding: 2rem 0;
}
.voicewrap .voicebox:nth-child(even) {
	margin-top: 2rem;
}
.voicewrap .voicebox {
	width: 300px;
	height: 430px;
	background-color: #fff;
	position: relative;
	margin-right: 3.5rem;
}
.voicewrap .voicebox:last-child {
	margin-right: 0;
}
.voicebox .voicebox_text {
	border-top: 3px solid;
	border-image: linear-gradient(to right, #ff69df 0%, #a990ff 100%);
	border-image-slice: 1;
}
.voicebox_text p {
	font-size: 15px;
    line-height: 1.5;
	width: calc( 100% - 30px );
	margin: 2.5rem auto 2rem;
}
.voicebox .voicebox_userlabel {
	position: absolute;
	right: 0;
	bottom: 35px;
	background-color: #000;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	padding: 2px 15px;
}
/**** よくある質問 ****/
main .faq {
    padding: 100px 10px;
	background-color: #fff;
}
.questiontitle {
    position: relative; /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    padding: 20px 30px 20px 15px;
    transition: all .5s ease;
	max-width: 680px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 4px;
	background: rgb(87,213,228);
    background: linear-gradient(-122deg, rgba(87,213,228,1) 0%, rgba(141,172,239,1) 55%, rgba(178,143,247,1) 100%);
	color: #fff;
	font-size: 1em;
	font-weight: normal;
}
/* 質問文前のQ */
.questiontitle i.fa-q {	
	padding-right: 5px;
	font-size: 1.1em;
}
/* 質問文の開くボタン、閉じるボタン */
.questiontitle::before,
.questiontitle::after {
	content: "";
	position: absolute;
	top: 48%;
	right: 20px;
	width: 4px;
    height: 20px;
	background: #fff;
	transition: all 1s;
}
.questiontitle::before {
	transform: translate(-50%,-50%) rotate(90deg);
}
.questiontitle::after{
	transform: translate(-50%,-50%) rotate(360deg);
}
.questiontitle.faq_close::after {
	transform: translate(-50%,-50%) rotate(90deg);
}
.questiontitle.faq_close::before {
	transform: translate(-50%,-50%) rotate(270deg);
}
/* 回答部分 */
.answerbox {
    display: none;
	max-width: 680px;
	padding-left: 10px;
    padding-right: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15px;
	margin-bottom: 2rem;
	position: relative;
}
.faq .answerbox::before {
	content: '\41';
	font-family: FontAwesome;
	position: absolute;
	color: #7eb7ec;
	font-size: 21px;
	left: 13px;
}
.faq .answerbox p {
	padding-left: 35px;
}
/**** 会社概要 ****/
main .companyprofile {
    padding: 100px 0;
    background-color: #f7f7f7;
}
main .companyprofile dl {
    display: flex;
    flex-wrap: wrap;
}
main .companyprofile dl dt {
    width: 30%;
}
main .companyprofile dl dd {
    width: 70%;
}
/**** メールフォーム ****/
main .contact {
    padding: 100px 1px;
	position: relative;
}
.contact section {
	position: relative;
	z-index: 100;
}
main .contact p {
    margin-bottom: 50px;
	padding: 0 10px;
}
/*** 背景のシェイプ ***/
.contact_shape img {
	position: absolute;
	z-index: 50;
}
.contact_shape img.s_middle {	/* 上 */
	width: 320px;
    height: auto;
    transform: rotate(195deg);
    right: -130px;
    top: 130px;
}
.contact_shape img.s_middle2 {	/* 中 */
	width: 200px;
    top: 38%;
    left: calc(50% - 130px);
    transform: rotate(16deg);
}
.contact_shape img.s_pcbig {	/* 下 */
	height: 450px;
    width: auto;
    left: -200px;
    bottom: 56px;
}
.formlabel-contents {
	display: none;
}
@media screen and (min-width:576px) {
	.contact_shape img.s_middle2 {
		display: none;
	}
} 
@media screen and (min-width: 576px) and (max-width: 620px) {
	.formlabel-contents {
		display: block;

	}
}
/* フォームデザイン */
main .contact form {
    padding: 0 .5rem;	
}
main .contact form#mail_form dt {
    text-align: left;
}
main .contact form#mail_form ul li label {
    border: none!important;
}
.form-group ul {
	margin-bottom: 0;
	padding-top: 7px;
}
@media screen and (min-width:576px) {    /* 576px以上 */
    main .contact form#mail_form dt {
        text-align: right;
    }
}
@media screen and (min-width:991px) { 
	main .contact form {
		margin-right: 80px;
	}
}
/* 入力エリア */
main .contact form#mail_form input,
main .contact form#mail_form textarea,
main .contact form#mail_form ul li label {
    border:1px solid #747474;
}
/* エラーメッセージ */
.contact .error_blank {
	color: #be3379;
	font-weight: bold;
}
/* 必須マーク */
main .contact form#mail_form dl dt i {
    font-size: .8em;
    margin-right: 5px;
}
main .contact form#mail_form dl dt span.required {
    background: #cc6699;
    border: 1px solid #cc6699;
    padding: 0 7px 0 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: normal;
}
/* 送信ボタン */
main .contact form #form_submit input {
    border-radius: 50px;
	letter-spacing: 4.2px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    padding: 10px 25px;
    color: #FFF;
    font-weight: 600;
    background: rgb(255,105,223);
    background: linear-gradient(90deg, rgba(255,105,223,1) 0%, rgba(169,144,255,1) 100%);
	box-shadow: 0 5px 20px 0 #e285f0b3;
	transition: all 0.4s 0s ease-in-out;
}
main .contact form #form_submit input:hover {
	background: rgb(255,105,223);
    background: linear-gradient(90deg, rgba(255,105,223,1) 0%, rgba(169,144,255,1) 30%);
	box-shadow: none;
	transition: all 0.4s 0s ease-in-out;
	letter-spacing: 15px;
}
main .contact form#mail_form input#form_submit_button,
main .contact form#mail_form input#form_submit_button:hover{
    border:1px solid transparent;	/* ボタンの枠線を削除 */
}
/* 電話番号のスピンボックスを非表示に */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}
/* 送信ボタンの位置 */
@media screen and (min-width:768px) {
	main .contact form #form_submit input {
		margin-left: 38%;
	}
}
/* 「お悩みや問合せ内容の改行 */
.contact .PCmode {
	display: none;
}
@media screen and (min-width:576px) {
	.contact .PCmode {
		display: block;
	}
}
/* thanksページ */
html.mail-thanks {
    padding-top: 3rem;
	background: #74abee;
}
.thanks section {
    position: relative;
	padding: 0 10px 0 10px;
}
.mail-thanks body {
    background-color: transparent;
}
.thanks .sendcompleat_image {
	position: absolute;
	right: -5px;
    top: 84px;
}
.thanks .sendcompleat_image img {
	height: 100px;
}
.mail-thanks .thanks p {
    color: #fff;
}
@media screen and (min-width:992px){
    .mail-thanks .thanks p {
        padding: 0 4rem;
    }
    .thanks .sendcompleat_image {
        position: absolute;
        top: -20px;
        right: calc( 50% - 440px );
        transform: rotate(4deg);
    }
	.thanks .sendcompleat_image img {
		height: 100%;
	}
}
.mail-thanks section .glass-box {
    background: rgba( 255, 255, 255, 0.25 );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    padding: 2rem 1rem;
    border-radius: 20px;
}
.mail-thanks h2 {
    margin-bottom: 30px;
    margin-top: 3rem;
    border-bottom: 5px dotted #fa67d2;
    padding-bottom: 15px;
    text-shadow: 4px 4px 8px rgba(0,0,0,0.13);
    color: #fff;
}
.mail-thanks article h2:first-child {
    margin-top: 1.5rem;
}
.mail-thanks .btn-link .btn {
    display: inline-block;
    padding: 1em;
    text-decoration: none;
    color: #fff;
    border: solid 2px #b38de7;
    border-radius: 7px;
    transition: .4s;
    background-color: #b38de7;
}
.mail-thanks .btn-link .btn:hover {
    background: #fff;
    color: #b38de7;
}
/* メール送信画面のフッター */
.mail-thanks footer {
	margin-top: 6rem;
	height: 215px;
}
/**** フッター ****/
footer {
    background-color:hsla(0,0%,100%,1);
    background-image:
        radial-gradient(at 11% 64%, #fff9c4 0px, transparent 50%),
        radial-gradient(at 73% 51%, #8fb5ff 0px, transparent 50%),
        radial-gradient(at 62% 59%, #d2a1f8 0px, transparent 50%),
        radial-gradient(at 82% 96%, #fd94f4 0px, transparent 50%);
    background-attachment: fixed;
    padding: 2rem 0;
    font-size: .8em;
}
.footer_nummitwrap .nummit_logo {
    margin-bottom: 1.5rem;
}
.footer_nummitwrap .nummit_summary,
.footer_infowrap .info_about {
    font-size: 14px;
}
.footer_infowrap .info_link {
    margin-bottom: 1rem;
}
.footer_infowrap .info_link a {
    color: #000;
}
.footer_infowrap .info_about {
    color: #fff;
    font-size: 16px;
}
.footer_infowrap .info_about dl dt {
    font-weight: normal;
}
/**** ページ下固定メニュー ****/
.fiexdjumpbtnouter {
	position: relative;
	z-index: 9999;
	margin-left: 6px;
	opacity: 0;
	transition: all 0.5s;
}
.fiexdjumpbtninner {
	background-color: #ffde54;
	border: solid 2px #000;
	border-radius: 13px 13px 0 0;
	position: fixed;
	width: calc( 100% - 12px);
	height: 50px;
    margin: auto;
    bottom: -2px;
	box-shadow: 0px 6px 21px 0px #b8b8b8;
	color: #000;
}
.fiexdjumpbtninner a {
	text-decoration: none;
}
.fiexdjumpbtn_image {
	position: absolute;
	bottom: 0;
	transform: scale(-1, 1);
	left: 10px;
}
.fiexdjumpbtn_image img {
	width: 62px;
}
.fiexdjumpbtn_notice {
	font-weight: 600;
	margin-top: 12px;
    padding-left: 27px;
	letter-spacing: 1px;
}
.fiexdjumpbtn_notice::before {	/* 白い丸 */
	content: "";
    background: #fff;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    position: absolute;
    z-index: 10;
    right: 16px;
    top: 11px;
}
.fiexdjumpbtnouter .fa-arrow-down {	/* 矢印 */
	position: absolute;
	z-index: 15;
    right: 22px;
    top: 13px;
    color: #000;
}
/*** 縦方向に動くアニメーション ***/
@keyframes move-y {
	form {
		transform: translateY(0);
	}
	to {
		transform: translateY(5px);
	}
}
.animated__move-y {
	animation: move-y 0.6s infinite alternate ease-in-out;
	display: inline-block;
}
@media screen and (min-width: 768px) {	/* タブレット */
	.fiexdjumpbtninner {
		height: 50px;
		margin-top: 9px;
    	font-size: 21px;
	}
	.fiexdjumpbtn_image img {
		width: 120px;
	}
	.fiexdjumpbtn_image {
		left: 70px;
	}
	.fiexdjumpbtn_notice {
    	margin-top: 9px;
		letter-spacing: 1.3px;
	}
	.fiexdjumpbtn_notice::before {
		height: 35px;
   		width: 35px;
		top: 6px;
	}
	.fiexdjumpbtnouter .fa-arrow-down {
		top: 10px;
		right: 25px;
	}
}
@media screen and (min-width: 865px) {	/* PC */
	.fiexdjumpbtnouter {
		margin-left: 0;
	}
	.fiexdjumpbtninner {
		background-color: #ffde54;
		border: solid 2px #000;
		border-radius: 13px 0 0 13px;
		position: fixed;
		width: 95px;
		height: 375px;
		margin: auto;
		bottom: 20px;
		right: -2px;
		box-shadow: 0px 6px 21px 0px #b8b8b8;
	}
	.fiexdjumpbtn_image {
    	left: -17px;
    	transform: none;
    	top: -71px;
	}
	.fiexdjumpbtn_image img {
    	width: 100px;
	}
	.fiexdjumpbtn_notice {
		writing-mode: vertical-rl;
		font-size: 21px;
		margin-left: calc(48px - 18px);
		padding-top: 9px;
		padding-left: 0;
	}
	.fiexdjumpbtn_notice::before {
		height: 40px;
    	width: 40px;
    	top: 315px;
		left: calc(48px - 20px);
	}
	.fiexdjumpbtnouter .fa-arrow-down {
    	top: 321px;
		right: 35px;
	}
}
/* SPのみ改行 */
footer .br_sp {
	display: none;
}
@media screen and (max-width:767px) {
    footer .br_sp {
        display: block;
    }
    .footer_infowrap .info_about {
        color: #000;
    }
}