/* 蜈ｱ騾� */
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;
	gap: 20px;
}

h2 {
	text-align: center;
}
.strong {
	font-weight: bold;
}
.textR {
	text-align: right;
}

/* ===== 繧ｭ繝ｼ繝薙ず繝･繧｢繝ｫ ===== */
/* cs */
.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 .cap p {
	position: relative; 
	display: inline-flex; 
	height: 30px; 
	border-radius: 9999px; 
	overflow: hidden;
	background: #000;
}
.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);
}
.service #hero p a.button {
	width: 100%;
}
#lead {
	background-color: #0e2d5d;
	padding: 10px;
}
#lead p {
	color: #fff;
}
#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: -20vh;
}
#problem .list ul {
	background-color: #303668;
}
#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%);
}
#solving p {
	background-repeat: no-repeat;
	margin: 0;
}

#case [class^="case_0"] p {
	background-repeat: no-repeat;
}
#case .case_01 p {
	background-image: url("/img/service/cs/bg_flow01.png");
}
#case .case_02 p {
	background-image: url("/img/service/cs/bg_flow02.png");
}
#case .case_03 p {
	background-image: url("/img/service/cs/bg_flow03.png");
}
#case .case_04 p {
	background-image: url("/img/service/cs/bg_flow04.png");
}

#support {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
	background-color: #fbf7f0;
}
#support .list {
	border: 4px solid #303668;
}
#support .list ul {
	background-color: #fff;
	width: 100%;
	flex-wrap: wrap;
	margin: 0;
	padding: 40px 20px 20px;
	box-sizing: border-box;
	gap: 0;
}
#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;
}
#support .list li span {
	font-size: 18px;
	font-weight: bold;
	color: #303668;
	text-decoration: underline;
}

#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 .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%;        /* 隕ｪ隕∫ｴ�縺ｮ蟷�↓蟇ｾ縺励※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 >div:nth-of-type(1) {
    background-image: url(/img/service/cs/bg_pc.svg);
    background-position: 10vw 4vh;
}
#plan .c_flex.business >div:nth-of-type(2) {
    background-image: url(/img/service/cs/bg_mail.svg);
    background-position: -2vw 4vh;
}
#plan .c_flex.business >div:nth-of-type(3) {
    background-image: url(/img/service/cs/bg_note.svg);
    background-position: 10vw 5vh;
}
#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:nth-of-type(1) {
    background-image: url(/img/service/cs/Illust_flow01.png);
}
#flow .step:nth-of-type(2) {
    background-image: url(/img/service/cs/Illust_flow02.png);
}
#flow .step:nth-of-type(3) {
    background-image: url(/img/service/cs/Illust_flow03.png);
}
#flow .step:nth-of-type(4) {
    background-image: url(/img/service/cs/Illust_flow04.png);
}
#flow .step:nth-of-type(5) {
    background-image: url(/img/service/cs/Illust_flow05.png);
}
#flow .step.c_flex [class^="step_"] {
	flex: 1;
}
#flow .step.c_flex .text {
	flex: 3;
}

#results {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
	background-color: #fbf7f0;
}
#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;
}
#results .c_item p span {
	font-size: 90%;
	border: 1px solid #222;
	padding: 3px 10px;
	border-radius: 20px;
	background-color: #eee;
}
#results .c_item p span + span {
	margin-right: 10px;
}

#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;
}

/*
  逕ｻ髱｢蟷�′ 993px 莉･荳�
*/
@media screen and (min-width:993px) {
	.service #hero {
    	background-position: center center;
    	background-blend-mode: lighten;
    	background-size: cover;
    	padding: 3rem 0 5rem;
    	text-align: center;
	}
	.service #hero {
		background-color: rgba(192,163,46,0.5);
    	background-image: url(/img/service/cs/bg_kv.jpg);
	}
	.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;
	}
	.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 {
		background-color: #2b305c;
		border: 1px solid #9E97E3;
		padding: 50px 10px;
		text-align: center;
	}
	#problem .list li::before {
		top: 20px;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#solving p {
		background-image: url("/img/service/cs/illust_cs.png");
		background-size: 70%;
		background-position: center 50px;
		padding: 450px 0 30px;
	}
	#solving::after {
		border-top: 100px solid #f6f8ed; /* 荳願ｾｺ�郁牡莉倥″�� */
		/* 驟咲ｽｮ�井ｾ具ｼ夊ｦ∫ｴ�縺ｮ荳倶ｸｭ螟ｮ縺ｫ驟咲ｽｮ�� */
		bottom: -100px; /* 隕∫ｴ�縺ｮ荳狗ｫｯ縺九ｉ繝懊�繝€繝ｼ縺ｮ鬮倥＆蛻�ｸ九∈ */
	}

	#case {
		padding-top: 200px;
		padding-bottom: 90px;
	}
	#case [class^="case_0"] {
		background-repeat: no-repeat;
		padding: 0 20px;
		flex: 1;
	}
	#case .case_01, #case .case_03 {
		background-image: url("/img/service/cs/bg_problem_odd.png");
		background-size: 130%;
		background-position: 90% bottom;
	}
	#case .case_02, #case .case_04 {
		background-image: url("/img/service/cs/bg_problem.png");
		background-size: 230%;
		background-position: 90% 120px;
	}
	#case [class^="case_0"] p {
		padding-bottom: 25vh;
		margin-bottom: 0;
	}
	#case .case_01 p {
		background-position: 10px bottom;
		background-size: 60%;
	}
	#case .case_02 p {
		background-position: right 130px;
		background-size: 70%;
	}
	#case .case_03 p {
		background-position: center 120px;
		background-size: 80%;
	}
	#case .case_04 p {
		background-position: center bottom;
		background-size: 90%;
	}
		
	#support {
		padding-top: 60px;
		padding-bottom: 90px;
		background-image: url("/img/service/cs/bg_support.png");
	}
	#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: 15vh;
	}
	#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%;
	}
	#flow span.line {
		display: block;
		border-bottom: 40px solid #303668;
		margin-top: -40px;
	}	
	
	#results {
		padding-top: 60px;
		padding-bottom: 90px;
		background-image: url("/img/service/cs/bg_support.png");
	}
	#results .c_item {
		flex: 1;
		background-size: 15%;
    	background-position: 30px 10px;
		padding: 50px 20px;
	}

	#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;
	}
}

/*
  逕ｻ髱｢蟷�′ 992px 莉･荳九�繝�ヰ繧､繧ｹ縺ｫ縺ｮ縺ｿ驕ｩ逕ｨ縺輔ｌ繧九せ繧ｿ繧､繝ｫ
*/
@media screen and (max-width: 992px) {
	h2 {
		font-size: 160%;
	}
	.c_flex.sp {
		flex-wrap: nowrap;
	}
	.sp100 {
		flex-wrap: wrap;
	}
	.sp100 >div {
		width: 100%;
	}
	.service #hero {
		padding-top: 1rem;
		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; /* 隕∫ｴ�縺ｮ荳狗ｫｯ縺九ｉ繝懊�繝€繝ｼ縺ｮ鬮倥＆蛻�ｸ九∈ */
	}
	#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%;
	}

	#case {
		padding: 100px 10px;
	}
	#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;
	}
	#case .case_01, #case .case_03 {
		background-size: 140%;
		background-position: 50% top;
	}
	#case .case_02, #case .case_04 {
		background-size: 140%;
		background-position: 20% 50px;
	}
	#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;
	}
}