@charset "UTF-8";

/* =====================================================
   共通スタイル（fst / mall / cs 全ページ共通）
   ===================================================== */
div.c_item {
	background-color: #fff;
}
div.c_item.border {
	border: 1px solid #dadada;
}
div.border.gray {
	border-color: #dadada;
}
div.border.blue {
	border-color: #0e2d5d;
}
.c_flex {
	display: flex;
}
h2 {
	text-align: center;
}
.strong {
	font-weight: bold;
}
.textR {
	text-align: right;
}
.service #hero {
	width: 100%;
	box-shadow: 0 6px 32px rgba(10,30,58,0.22);
}
.service #hero .cap {
	display: flex;
	justify-content: center;
}
.service #hero p a.button {
	width: 100%;
}
#lead p {
	color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 120%;
}
#problem {
	padding: 0;
}
#problem .problem_title {
	background-color: #dbedef;
	margin: 0;
}
#problem .list {
	background-color: #f6f8ed;
	padding: 10px 0 0;
}
#problem .list >section {
	margin-top: -160px;
}
#problem .list li {
	list-style-type: none;
	color: #fff;
	font-size: 120%;
	position: relative;
}
#problem .list li::before {
	display: inline-block;
	width: 10px;
	height: 10px;
	content: "";
	border-radius: 100%;
	background: #fff;
	position: absolute;
}
#solving {
	background-color: #f6f8ed;
	padding: 0;
	position: relative;
}
#solving::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-left: 50vw solid transparent;
	border-right: 50vw solid transparent;
	left: 50%;
	transform: translateX(-50%);
}
#case [class^="case_0"] p {
	background-repeat: no-repeat;
}
#support .list ul {
	background-color: #fff;
	width: 100%;
	flex-wrap: wrap;
	margin: 0;
	padding: 40px 20px 20px;
	box-sizing: border-box;
	gap: 0;
}
#platforms .c_flex >div {
	padding: 10px;
}
#platforms .c_flex >div p {
	margin: 0;
}
#plan {
	background-color: #f1f7ff;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
}
#plan p {
  text-align: center;
}
#plan .deco {
	justify-content: center;
	align-items: center;
}
#plan .deco .frame {
	background-color: #0e2d5d;
	border-radius: 30px;
	color: #fff;
	text-align: center;
	flex: 2;
}
#plan .multiply-icon {
	width: 80%;
	aspect-ratio: 1 / 1;
	position: relative;
}
#plan .multiply-icon::before, #plan .multiply-icon::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #0e2d5d;
	position: absolute;
	top: 50%;
	left: 0;
	border-radius: 2px;
}
#plan .multiply-icon::before {
	transform: rotate(45deg);
}
#plan .multiply-icon::after {
	transform: rotate(-45deg);
}
#plan h3.choice {
	border: none;
	border-radius: 30px;
	background-color: #0e2d5d;
	color: #fff;
	display: table;
	padding: 5px 20px;
	margin: 0 auto;
}
#plan .c_flex.hours [class^="plan"] {
	background-repeat: no-repeat;
}
#plan .c_flex.hours .plan20 {
	background-image: url(/img/service/fst/ico_plan20.png);
}
#plan .c_flex.hours .plan40 {
	background-image: url(/img/service/fst/ico_plan40.png);
}
#plan .c_flex.hours .plan60 {
	background-image: url(/img/service/fst/ico_plan60.png);
}
#plan .c_flex.hours .plan80 {
	background-image: url(/img/service/fst/ico_plan80.png);
}
#plan .c_flex.hours [class^="plan"] h4 span {
	color: #fff;
	background-color: #f23300;
	font-weight: normal;
	padding: 5px 10px;
	border-radius: 30px;
}
#plan .c_flex.business >div {
	background-repeat: no-repeat;
	background-size: 80%;
}
#plan .c_flex.business h4 ,#plan .custom h4 {
	color: #0e2d5d;
}
#plan .c_flex.business h4 img ,#plan .custom h4 img {
	width: 40px;
	vertical-align: bottom;
	padding-right: 10px;
}
#plan .c_flex.business ul {
	padding-left: 10px;
	padding-right: 10px;
}
#plan .c_flex.business li {
	list-style-type: none;
	background-image: url("/img/service/fst/ico_list.svg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 26px;
	padding-left: 30px;
	padding-bottom: 5px;
}
#plan .custom >div {
	padding: 20px;
}
#flow {
	padding-top: 60px;
	padding-bottom: 90px;
}
#flow .step {
	background-repeat: no-repeat;
}
#flow .step.c_flex [class^="step_"] {
	flex: 1;
}
#flow .step.c_flex .text {
	flex: 3;
}
#faq {
	background-color: #dbedef;
}
#info {
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #222;
	margin-bottom: 0;
}
#info h2, #info p {
	color: #fff;
	text-align: center;
}

@media screen and (min-width:993px) {
	.c_flex {
		gap: 20px;
	}
	.service #hero h2 {
		font-size: 240%;
		text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
	}
	.service #hero >p {
		text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
		margin-bottom: 40px;
        font-size: 130%;
	}
	.service #hero img {
		display: none;
	}
	.service #hero .cv_area {
		width: 20%;
		margin: 0 auto;
	}
	#lead p {
		margin: 0.5rem 0;
	}
	section.cw_s {
		width: 40%;
		margin: 0 auto;
	}
	section.cw_m {
		width: 70%;
		margin: 0 auto;
	}
	section.cw_l {
		width: 80%;
		margin: 0 auto;
	}
	#problem .problem_title {
		padding: 150px 0 200px;
	}
	#problem .list ul {
		margin: 0;
		padding: 60px 60px 50px;
	}
	#problem .list li::before {
		top: 20px;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	#solving::after {
		border-top: 100px solid #f6f8ed;
		bottom: -100px;
	}
	#case {
		padding-top: 200px;
		padding-bottom: 90px;
	}
	#support .list li {
		width: 50%;
	}
	#platforms {
		padding-top: 60px;
		padding-bottom: 90px;
	}
	#platforms .c_flex >div {
		flex: 1;
	}
	#plan {
		padding-top: 60px;
		padding-bottom: 90px;
		background-image: url("/img/service/fst/bg_plan.png");
	}
	#plan .deco .frame {
		font-size: 160%;
		padding: 10px 20px;
	}
	#plan .c_flex >div {
		flex: 1;
	}
	#plan .c_flex.hours >div {
		text-align: center;
	}
	#plan .c_flex.hours [class^="plan"] {
		background-size: 30%;
		background-position: center 20px;
	}
	#plan .c_flex.hours [class^="plan"] h4 {
		margin-top: 120px;
	}
	#plan .c_flex.hours [class^="plan"] h4 span {
		font-size: 80%;
	}
	#flow .step {
		padding-bottom: 200px;
	}
	#flow .cw_l.c_flex >div {
		flex: 1;
	}
	#flow .step:nth-of-type(1) {
		background-position: 90% 90%;
		background-size: 80%;
	}
	#flow .step:nth-of-type(2) {
		background-position: center 70%;
		background-size: 50%;
	}
	#flow .step:nth-of-type(3) {
		background-position: 10% 90%;
		background-size: 70%;
	}
	#flow .step:nth-of-type(4) {
		background-position: center 90%;
		background-size: 90%;
	}
	#flow .step:nth-of-type(5) {
		background-position: 10% 90%;
		background-size: 80%;
	}
	#faq {
		padding-top: 60px;
		padding-bottom: 90px;
	}
	#faq .c_item {
		padding: 20px 40px;
	}
	#faq .c_item + .c_item {
		margin-top: 30px;
	}
	#info {
		background-image: url(/img/service/fst/bg_info.png);
		padding: 2rem 0 4rem;
	}
}

@media screen and (max-width: 992px) {
	h2 {
		font-size: 160%;
	}
	.c_flex.sp {
		flex-wrap: nowrap;
	}
	.c_flex > div + div {
		margin-top: 20px;
	}
	.sp100 {
		flex-wrap: wrap;
	}
	.sp100 >div {
		width: 100%;
	}
	.service #hero {
		padding-top: 5rem;
		padding-bottom: 1rem;
	}
	.service #hero h2 {
		font-size: 150%;
	}
	.service #hero h2 + p {
		font-size: 90%;
	}
	.service #hero h2,.service #hero p {
		margin-left: 1rem;
		margin-right: 1rem;
	}
	.service #hero img {
		padding: 1rem 0;
	}
	.service #hero p {
		margin-top: 0;
		margin-bottom: 0;
	}
	.service #hero .button {
		margin: 1rem 0 0.5rem;
	}
	.service #hero .button:last-child {
		margin: 0;
	}
	#problem .problem_title {
		padding: 50px 0 150px;
	}
	#problem .list ul {
		margin: 0 10px;
		padding: 30px 10px;
	}
	#problem .list li {
		padding: 0 0 0 20px;
	}
	#problem .list li::before {
		top: 10px;
		left: 0;
	}
	#solving::after {
		border-top: 50px solid #f6f8ed;
		bottom: -50px;
	}
	#case {
		padding: 100px 10px;
	}
	#case [class^="case_0"] p {
		background-size: 40%;
		background-position: right;
		padding-right: 100px;
	}
	#support {
		padding: 50px 10px;
		background-image: url("/img/service/fst/bg_support_sp.png");
	}
	#platforms {
		padding: 50px 10px;
	}
	#plan {
		padding: 50px 10px;
		background-image: url("/img/service/fst/bg_plan_sp.png");
	}
	#plan .deco .frame {
		font-size: 120%;
		padding: 10px;
	}
	#plan .deco >div {
		flex: 1;
	}
	#plan .c_flex.hours [class^="plan"] {
		background-size: 20%;
		background-position: 20px center;
		padding-left: 120px;
	}
	#plan .c_flex.hours [class^="plan"] h4 {
		margin-bottom: 5px;
	}
	#plan .c_flex.hours [class^="plan"] p {
		margin-top: 0;
	}
	#flow .step {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	#flow .step:nth-of-type(1) {
		background-position: right 90%;
		background-size: contain;
	}
	#flow .step:nth-of-type(2) {
		background-position: 85%;
		background-size: 20%;
		padding-left: 10px;
	}
	#flow .step:nth-of-type(3) {
		background-position: right 90%;
		background-size: contain;
		padding-left: 20px;
	}
	#flow .step:nth-of-type(4) {
		background-position: 80%;
		background-size: 25%;
		padding-left: 30px;
	}
	#flow .step:nth-of-type(5) {
		background-position: right 90%;
		background-size: contain;
		padding-left: 40px;
	}
	#flow .step.c_flex [class^="step_"] img {
		width: 80px;
	}
	#flow span.line {
		display: none;
	}
	#results {
		padding: 50px 10px;
		background-image: url("/img/service/fst/bg_support_sp.png");
	}
	#results .c_item {
		background-size: 10%;
		background-position: 10px 10px;
		padding: 40px 20px 10px;
	}
	#faq {
		padding: 50px 10px;
	}
	#faq .c_item {
		padding: 10px 20px;
	}
	#faq .c_item + .c_item {
		margin-top: 10px;
	}
	#info {
		background-image: url(/img/service/fst/bg_info_sp.png);
		padding: 2rem 1rem 4rem;
	}
}


/* =====================================================
   fst（Service） 固有スタイル
   ===================================================== */
.fst #hero .cap p {
	position: relative;
	display: inline-flex;
	height: 30px;
	border-radius: 9999px;
	overflow: hidden;
}
.fst #hero .cap span:nth-of-type(1) {
	background: #1a4d1a;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	padding: 0 36px 0 22px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
	margin-right: -16px;
	position: relative;
	z-index: 2;
}
.fst #hero .cap span:nth-of-type(2) {
	background: #1a5fb5;
	color: #fff;
	font-size: 14px;
	padding: 0 22px 0 28px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	position: relative;
	z-index: 1;
}
.fst #lead {
	background: linear-gradient(135deg, #0b1f3a 0%, #0e2e45 50%, #0d3530 100%);
	padding: 10px;
}
.fst #problem .list ul {
	background-color: #00515a;
}
.fst #solving p {
	padding: 60px 0 30px;
	margin: 0;
}
.fst #case [class^="case_0"] {
	background-image: url("/img/service/fst/bg_problem.png");
	background-repeat: no-repeat;
}
.fst #case .case_01, .fst #case .case_03 {
	background-position: 50% top;
}
.fst #case .case_02, .fst #case .case_04 {
	background-position: 20% 50px;
}
.fst #case .case_01 p {
	background-image: url("/img/service/fst/bg_flow01.png");
}
.fst #case .case_02 p {
	background-image: url("/img/service/fst/bg_flow02.png");
}
.fst #case .case_03 p {
	background-image: url("/img/service/fst/bg_flow03.png");
}
.fst #case .case_04 p {
	background-image: url("/img/service/fst/bg_flow04.png");
}
.fst #support {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
	background-color: #f6f8ed;
}
.fst #support .list {
	border: 4px solid #00515a;
}
.fst #support .list li {
	list-style-type: none;
	background-image: url("/img/service/fst/ico_check.svg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 40px;
	padding-left: 50px;
	padding-bottom: 20px;
	box-sizing: border-box;
	font-size: 18px;
}
.fst #support .list li span {
	font-size: 18px;
	font-weight: bold;
	color: #00515a;
	text-decoration: underline;
}
.fst #plan .c_flex.business >div:nth-of-type(1) {
	background-image: url(/img/service/fst/bg_chart.svg);
	background-position: 10vw 4vh;
}
.fst #plan .c_flex.business >div:nth-of-type(2) {
	background-image: url(/img/service/fst/bg_graph.svg);
	background-position: -2vw 4vh;
}
.fst #plan .c_flex.business >div:nth-of-type(3) {
	background-image: url(/img/service/fst/bg_smile.svg);
	background-position: 10vw 5vh;
}
.fst #flow .step:nth-of-type(1) {
	background-image: url(/img/service/fst/Illust_flow01.png);
}
.fst #flow .step:nth-of-type(2) {
	background-image: url(/img/service/fst/Illust_flow02.png);
}
.fst #flow .step:nth-of-type(3) {
	background-image: url(/img/service/fst/Illust_flow03.png);
}
.fst #flow .step:nth-of-type(4) {
	background-image: url(/img/service/fst/Illust_flow04.png);
}
.fst #flow .step:nth-of-type(5) {
	background-image: url(/img/service/fst/Illust_flow05.png);
}
.fst #results {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
	background-color: #f6f8ed;
}
.fst #results .c_item {
	background-image: url(/img/service/fst/bg_quote.svg);
	background-repeat: no-repeat;
	background-size: 15%;
	background-position: 30px 10px;
	padding: 50px;
}

@media screen and (min-width:993px) {
	.fst #hero {
		background-position: center center;
		background-blend-mode: lighten;
		background-size: cover;
		padding: 3rem 0 5rem;
		text-align: center;
		background-color: rgba(204, 232, 242, 0.5);
		background-image: url(/img/service/fst/bg_kv.jpg);
	}
	.fst #problem .list li {
		background-color: #005d68;
		border: 1px solid #79a698;
		padding: 50px 10px;
		text-align: center;
	}
	.fst #case [class^="case_0"] {
		padding: 0 20px 20px;
		background-size: cover;
	}
	.fst #case [class^="case_0"] p {
		background-size: 60%;
		background-position: center bottom;
		padding-bottom: 200px;
	}
	.fst #support {
		padding-top: 60px;
		padding-bottom: 90px;
		background-image: url("/img/service/fst/bg_support.png");
	}
	.fst #flow span.line {
		display: block;
		border-bottom: 40px solid #88c0e9;
		margin-top: -40px;
	}
	.fst #results {
		padding-top: 60px;
		padding-bottom: 90px;
		background-image: url("/img/service/fst/bg_support.png");
	}
	.fst #results .c_item {
		flex: 1;
		background-size: 15%;
		background-position: 30px 10px;
		padding: 50px;
	}
}

@media screen and (max-width: 992px) {
	.fst #case [class^="case_0"] {
		padding: 0 0 20px 20px;
		background-size: cover;
	}
}


/* =====================================================
   mall 固有スタイル
   ===================================================== */
.mall #hero .cap p {
	position: relative;
	display: inline-flex;
	height: 30px;
	border-radius: 9999px;
	overflow: hidden;
	background: #BF0000;
}
.mall #lead {
	background-color: #222;
	padding: 10px;
}
.mall #problem .list ul {
	background-color: #303668;
}
.mall #solving p {
	padding: 60px 0 30px;
	margin: 0;
}
.mall #case .case_01 p {
	background-image: url("/img/service/mall/bg_flow01.png");
}
.mall #case .case_02 p {
	background-image: url("/img/service/mall/bg_flow02.png");
}
.mall #case .case_03 p {
	background-image: url("/img/service/mall/bg_flow03.png");
}
.mall #case .case_04 p {
	background-image: url("/img/service/mall/bg_flow04.png");
}
.mall #support {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
	background-color: #f6f8ed;
}
.mall #support .list {
	border: 4px solid #303668;
}
.mall #support .list li {
	list-style-type: none;
	background-image: url("/img/service/cs/ico_check.svg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 40px;
	padding-left: 50px;
	padding-bottom: 20px;
	box-sizing: border-box;
	font-size: 18px;
}
.mall #support .list li span {
	font-size: 18px;
	font-weight: bold;
	color: #303668;
	text-decoration: underline;
}
.mall #plan .c_flex.business >div:nth-of-type(1) {
	background-image: url(/img/service/cs/bg_pc.svg);
	background-position: 10vw 4vh;
}
.mall #plan .c_flex.business >div:nth-of-type(2) {
	background-image: url(/img/service/cs/bg_mail.svg);
	background-position: -2vw 4vh;
}
.mall #plan .c_flex.business >div:nth-of-type(3) {
	background-image: url(/img/service/cs/bg_note.svg);
	background-position: 10vw 5vh;
}
.mall #flow .step:nth-of-type(1) {
	background-image: url(/img/service/fst/Illust_flow01.png);
}
.mall #flow .step:nth-of-type(2) {
	background-image: url(/img/service/fst/Illust_flow02.png);
}
.mall #flow .step:nth-of-type(3) {
	background-image: url(/img/service/fst/Illust_flow03.png);
}
.mall #flow .step:nth-of-type(4) {
	background-image: url(/img/service/fst/Illust_flow04.png);
}
.mall #flow .step:nth-of-type(5) {
	background-image: url(/img/service/fst/Illust_flow05.png);
}
.mall #results {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
	background-color: #f6f8ed;
}
.mall #results .c_item {
	background-image: url(/img/service/cs/bg_quote.svg);
	background-repeat: no-repeat;
	background-size: 15%;
	background-position: 30px 10px;
	padding: 50px;
}
.mall #hero .cap span {
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 0 24px;
	position: relative;
}
.mall #hero .cap span:first-child {
	padding-left: 22px;
	font-weight: 500;
}
.mall #hero .cap span:last-child {
	padding-right: 22px;
}
.mall #hero .cap span:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -1px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.5);
	transform: skewX(-12deg);
}
.mall #results .c_item p span {
	font-size: 90%;
	border: 1px solid #222;
	padding: 3px 10px;
	border-radius: 20px;
	background-color: #eee;
}
.mall #results .c_item p span + span {
	margin-right: 10px;
}

@media screen and (min-width:993px) {
	.mall #hero {
		background-position: center center;
		background-blend-mode: lighten;
		background-size: cover;
		padding: 3rem 0 5rem;
		text-align: center;
		background-color: rgba(255,182,182,0.5);
		background-image: url(/img/service/mall/bg_kv.jpg);
	}
	.mall #problem .list li {
		background-color: #2b305c;
		border: 1px solid #e397df;
		padding: 50px 10px;
		text-align: center;
	}
	.mall #case [class^="case_0"] {
		background-repeat: no-repeat;
		padding: 0 20px;
		flex: 1;
	}
	.mall #case [class^="case_0"] p {
		padding-bottom: 200px;
		margin-bottom: 0;
	}
	.mall #support {
		padding-top: 60px;
		padding-bottom: 90px;
		background-image: url("/img/service/fst/bg_support.png");
	}
	.mall #flow span.line {
		display: block;
		border-bottom: 40px solid #f6e0f5;
		margin-top: -40px;
	}
	.mall #results {
		padding-top: 60px;
		padding-bottom: 90px;
		background-image: url("/img/service/fst/bg_support.png");
	}
	.mall #results .c_item {
		flex: 1;
		background-size: 15%;
		background-position: 30px 10px;
		padding: 50px 20px;
	}
	.mall #case .case_01, .mall #case .case_03 {
		background-image: url("/img/service/mall/bg_problem_odd.png");
		background-size: 130%;
		background-position: 90% bottom;
	}
	.mall #case .case_02, .mall #case .case_04 {
		background-image: url("/img/service/mall/bg_problem.png");
		background-size: 230%;
		background-position: 90% 120px;
	}
	.mall #case .case_01 p {
		background-position: 10px bottom;
		background-size: 60%;
	}
	.mall #case .case_02 p {
		background-position: right 130px;
		background-size: 70%;
	}
	.mall #case .case_03 p {
		background-position: center 120px;
		background-size: 80%;
	}
	.mall #case .case_04 p {
		background-position: center bottom;
		background-size: 90%;
	}
}

@media screen and (max-width: 992px) {
	.mall #case [class^="case_0"] {
		background-image: url("/img/service/mall/bg_problem.png");
		background-repeat: no-repeat;
		padding: 0 0 20px 20px;
		background-size: cover;
	}
	.mall #solving p {
		font-size: 90%;
	}
	.mall #case .case_01, .mall #case .case_03 {
		background-size: 140%;
		background-position: 50% top;
	}
	.mall #case .case_02, .mall #case .case_04 {
		background-size: 140%;
		background-position: 20% 50px;
	}
}


/* =====================================================
   cs（Order） 固有スタイル
   ===================================================== */
.cs #hero .cap p {
	position: relative;
	display: inline-flex;
	height: 30px;
	border-radius: 9999px;
	overflow: hidden;
	background: #000;
}
.cs #lead {
	background-color: #0e2d5d;
	padding: 10px;
}
.cs #problem .list ul {
	background-color: #303668;
}
.cs #solving p {
	background-repeat: no-repeat;
	margin: 0;
}
.cs #case .case_01 p {
	background-image: url("/img/service/cs/bg_flow01.png");
}
.cs #case .case_02 p {
	background-image: url("/img/service/cs/bg_flow02.png");
}
.cs #case .case_03 p {
	background-image: url("/img/service/cs/bg_flow03.png");
}
.cs #case .case_04 p {
	background-image: url("/img/service/cs/bg_flow04.png");
}
.cs #support {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
	background-color: #fbf7f0;
}
.cs #support .list {
	border: 4px solid #303668;
}
.cs #support .list li {
	list-style-type: none;
	background-image: url("/img/service/cs/ico_check.svg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 40px;
	padding-left: 50px;
	padding-bottom: 20px;
	box-sizing: border-box;
	font-size: 18px;
}
.cs #support .list li span {
	font-size: 18px;
	font-weight: bold;
	color: #303668;
	text-decoration: underline;
}
.cs #plan .c_flex.business >div:nth-of-type(1) {
	background-image: url(/img/service/cs/bg_pc.svg);
	background-position: 10vw 4vh;
}
.cs #plan .c_flex.business >div:nth-of-type(2) {
	background-image: url(/img/service/cs/bg_mail.svg);
	background-position: -2vw 4vh;
}
.cs #plan .c_flex.business >div:nth-of-type(3) {
	background-image: url(/img/service/cs/bg_note.svg);
	background-position: 10vw 5vh;
}
.cs #flow .step:nth-of-type(1) {
	background-image: url(/img/service/cs/Illust_flow01.png);
}
.cs #flow .step:nth-of-type(2) {
	background-image: url(/img/service/cs/Illust_flow02.png);
}
.cs #flow .step:nth-of-type(3) {
	background-image: url(/img/service/cs/Illust_flow03.png);
}
.cs #flow .step:nth-of-type(4) {
	background-image: url(/img/service/cs/Illust_flow04.png);
}
.cs #flow .step:nth-of-type(5) {
	background-image: url(/img/service/cs/Illust_flow05.png);
}
.cs #results {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
	background-color: #fbf7f0;
}
.cs #results .c_item {
	background-image: url(/img/service/cs/bg_quote.svg);
	background-repeat: no-repeat;
	background-size: 15%;
	background-position: 30px 10px;
	padding: 50px;
}
.cs #hero .cap span {
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 0 24px;
	position: relative;
}
.cs #hero .cap span:first-child {
	padding-left: 22px;
	font-weight: 500;
}
.cs #hero .cap span:last-child {
	padding-right: 22px;
}
.cs #hero .cap span:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -1px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.5);
	transform: skewX(-12deg);
}
.cs #results .c_item p span {
	font-size: 90%;
	border: 1px solid #222;
	padding: 3px 10px;
	border-radius: 20px;
	background-color: #eee;
}
.cs #results .c_item p span + span {
	margin-right: 10px;
}

@media screen and (min-width:993px) {
	.cs #hero {
		background-position: center center;
		background-blend-mode: lighten;
		background-size: cover;
		padding: 3rem 0 5rem;
		text-align: center;
		background-color: rgba(192,163,46,0.5);
		background-image: url(/img/service/cs/bg_kv.jpg);
	}
	.cs #problem .list li {
		background-color: #2b305c;
		border: 1px solid #9E97E3;
		padding: 50px 10px;
		text-align: center;
	}
	.cs #case [class^="case_0"] {
		background-repeat: no-repeat;
		padding: 0 20px;
		flex: 1;
	}
	.cs #case [class^="case_0"] p {
		padding-bottom: 200px;
		margin-bottom: 0;
	}
	.cs #support {
		padding-top: 60px;
		padding-bottom: 90px;
		background-image: url("/img/service/cs/bg_support.png");
	}
	.cs #flow span.line {
		display: block;
		border-bottom: 40px solid #303668;
		margin-top: -40px;
	}
	.cs #results {
		padding-top: 60px;
		padding-bottom: 90px;
		background-image: url("/img/service/cs/bg_support.png");
	}
	.cs #results .c_item {
		flex: 1;
		background-size: 15%;
		background-position: 30px 10px;
		padding: 50px 20px;
	}
	.cs #case .case_01, .cs #case .case_03 {
		background-image: url("/img/service/cs/bg_problem_odd.png");
		background-size: 130%;
		background-position: 90% bottom;
	}
	.cs #case .case_02, .cs #case .case_04 {
		background-image: url("/img/service/cs/bg_problem.png");
		background-size: 230%;
		background-position: 90% 120px;
	}
	.cs #case .case_01 p {
		background-position: 10px bottom;
		background-size: 60%;
	}
	.cs #case .case_02 p {
		background-position: right 130px;
		background-size: 70%;
	}
	.cs #case .case_03 p {
		background-position: center 120px;
		background-size: 80%;
	}
	.cs #case .case_04 p {
		background-position: center bottom;
		background-size: 90%;
	}
	.cs #solving p {
		background-image: url("/img/service/cs/illust_cs.png");
		background-size: 70%;
		background-position: center 50px;
		padding: 450px 0 30px;
	}
}

@media screen and (max-width: 992px) {
	.cs #case [class^="case_0"] {
		background-image: url("/img/service/cs/bg_problem.png");
		background-repeat: no-repeat;
		padding: 0 0 20px 20px;
		background-size: cover;
	}
	.cs #solving p {
		background-image: url("/img/service/cs/illust_cs_sp.png");
		background-size: 100%;
		background-position: center 50px;
		padding: 450px 0 30px;
		font-size: 90%;
	}
	.cs #case .case_01, .cs #case .case_03 {
		background-size: 140%;
		background-position: 50% top;
	}
	.cs #case .case_02, .cs #case .case_04 {
		background-size: 140%;
		background-position: 20% 50px;
	}
}