@charset "utf-8";


/* <inline> */

@media (min-width: 480px) {

/* </inline> */

/* <pconly> */
	
	/* <inline> */
	
	.overview > p.overview-uipath {
		margin: auto;
		padding-right: 0;
		height: 67px;
		width: 140px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-transform: translateX(410px);
		transform: translateX(410px);
	}

	.whats {
		background-image: url(/images/system/480/robot.jpg);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 100% auto;
		margin-left: 50%;
		width: 100vw;
		min-width: 100vw;
		position: relative;
		left: -50vw;
	}
	.whats > h2 {
		color: #1E3376;
		margin-top: 20%;
		margin-right: auto;
		margin-left: auto;
		padding-top: 40px;
		width: 960px;
	}
	.whats > p {
		text-align: left;
		background-color: #FFF;
		margin-right: auto;
		margin-left: auto;
		padding-top: 1em;
		width: 640px;
	}

	/* </inline> */

	.probrem {
		background-color: #FBFCFE;
		background-image: url(/images/system/480/probrem.jpg);
		background-repeat: no-repeat;
		background-position: right top;
		background-size: cover;
		margin-top: 40px;
		margin-left: 50%;
		padding-bottom: 120px;
		width: 100vw;
		min-width: 100vw;
		position: relative;
		left: -50vw;
	}
	.probrem > h2 {
		color: #555;
		margin-right: auto;
		margin-left: auto;
		margin-top: 100px;
		width: 580px;
		padding-right: 380px;
	}
	.probrem > ul {
		margin-top: -16px;
		margin-right: auto;
		margin-left: auto;
		width: 580px;
		padding-right: 380px;
		display: -webkit-flex;
		-webkit-flex-flow: row wrap;
		display: flex;
		flex-flow: row wrap;
	}
	.probrem > ul > li {
		text-align: left;
		color: #FFF;
		background-color: #1E3376;
		margin-top: 36px;
		margin-left: 20px;
		border-radius: 15px;
		padding: 10px 15px;
		position: relative;
		-webkit-flex: 0 1 250px;
		flex: 0 1 250px;
	}
	.probrem > ul > li:nth-child(2n+1) {
		margin-left: 0;
	}
	.probrem > ul > li::before {
		content: "";
		background-color: #1E3376;
		border-radius: 6px / 5px;
		height: 10px;
		width: 12px;
		position: absolute;
		right: 40px;
		bottom: -25px;
	}
	.probrem > ul > li::after {
		content: "";
		background-color: #1E3376;
		border-radius: 13px / 8px;
		height: 16px;
		width: 26px;
		position: absolute;
		right: 60px;
		bottom: -20px;
	}

	.solution {
		background-color: #1E3376;
		color: #FFF;
		margin-left: 50%;
		padding-bottom: 40px;
		width: 100vw;
		min-width: 100vw;
		position: relative;
		left: -50vw;
		display: -ms-grid;
		-ms-grid-rows: auto;
		-ms-grid-columns: 1fr 270px 420px 270px 1fr;
		display: grid;
		grid-template-columns: 270px 420px 270px;
		justify-content: center;
	}
	.solution > h2 {
		font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGPMinchoE, serif;
		font-size: 32px;
		margin-top: 40px;
		border-bottom: 2px solid #5170CC;
		padding-right: 50px;
		padding-left: 50px;
		-ms-grid-row: 1;
		-ms-grid-column: 3;
		-ms-grid-row-align: center;
		-ms-grid-column-align: center;
		grid-row: 1;
		grid-column: 2;
		align-self: center;
		justify-self: center;
	}
	.solution > h2::after {
		content: "！";
	}
	.solution-works {
		margin-top: -20px;
		margin-right: 20px;
		margin-left: 20px;
		-ms-grid-row: 2;
		-ms-grid-column: 3;
		grid-row: 2;
		grid-column: 2;
		display: -webkit-flex;
		-webkit-flex-flow: row wrap;
		-webkit-align-items: center;
		-webkit-align-content: center;
		-webkit-justify-content: center;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		align-content: center;
		justify-content: center;
	}
	.solution-works > li {
		color: #1E3376;
		background-color: #FFF;
		margin-top: 20px;
		margin-right: 5px;
		margin-left: 5px;
		border-radius: 20px;
		padding: 10px 15px;
	}
	.solution-steps {
		-ms-grid-row: 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 3;
		grid-row: 2;
		grid-column: 1 / 4;
		display: -webkit-flex;
		-webkit-flex-flow: row nowrap;
		-webkit-align-items: center;
		-webkit-justify-content: space-between;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
	}
	.solution-steps > li {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: auto 120px;
		padding-top: 120px;
		position: relative;
		-webkit-flex: 0 1 250px;
		flex: 0 1 230px;
	}
	.solution-steps > li:nth-child(1) {
		background-image: url(/images/system/320/busy.png);
		margin-right: 40px;
	}
	.solution-steps > li:nth-child(1)::before {
		content: "";
		margin-top: auto;
		margin-bottom: auto;
		border-top: 30px solid transparent;
		border-bottom: 30px solid transparent;
		border-left: 20px solid #FFF;
		height: 0;
		position: absolute;
		top: 0;
		right: -40px;
		bottom: 0;
	}
	.solution-steps > li:nth-child(1)::after {
		content: "";
		margin-top: auto;
		margin-bottom: auto;
		border-top: 30px solid transparent;
		border-bottom: 30px solid transparent;
		border-left: 20px solid #1E3376;
		height: 0;
		position: absolute;
		top: 0;
		right: -35px;
		bottom: 0;
	}
	.solution-steps > li:nth-child(2) {
		background-image: url(/images/system/320/white-robot.png);
		margin-left: 40px;
	}
	.solution-steps > li:nth-child(2)::before {
		content: "";
		margin-top: auto;
		margin-bottom: auto;
		border-top: 30px solid transparent;
		border-bottom: 30px solid transparent;
		border-left: 20px solid #FFF;
		height: 0;
		position: absolute;
		top: 0;
		left: -40px;
		bottom: 0;
	}
	.solution-steps > li:nth-child(2)::after {
		content: "";
		margin-top: auto;
		margin-bottom: auto;
		border-top: 30px solid transparent;
		border-bottom: 30px solid transparent;
		border-left: 20px solid #1E3376;
		height: 0;
		position: absolute;
		top: 0;
		left: -45px;
		bottom: 0;
	}
	.solution-steps > li:nth-child(1) > h3::before {
		content: "Before";
		font-family: "Oswald", "Hiragino Kaku Gothic ProN", Meiryo, HGPGothicE, sans-serif;
		font-size: 32px;
		display: block;
	}
	.solution-steps > li:nth-child(2) > h3::before {
		content: "After";
		font-family: "Oswald", "Hiragino Kaku Gothic ProN", Meiryo, HGPGothicE, sans-serif;
		font-size: 32px;
		display: block;
	}
	.solution-steps > li > p {
		text-align: left;
		display: inline-block;
	}
	
	.support {
		display: -ms-grid;
		-ms-grid-rows: auto auto auto 1fr;
		-ms-grid-columns: 1fr 320px 640px 1fr;
		display: grid;
		grid-template-rows: auto auto auto 1fr;
		grid-template-columns: 320px 640px;
		justify-content: center;
	}
	.support > h2 {
		font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGPMinchoE, serif;
		margin-top: 40px;
		border-bottom: 2px solid #5170CC;
		padding-right: 50px;
		padding-left: 50px;
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		-ms-grid-column-align: center;
		grid-row: 1;
		grid-column: 1 / 3;
		justify-self: center;
	}
	.support > p {
		text-align: left;
		margin-top: 40px;
		-ms-grid-row: 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		-ms-grid-column-align: center;
		grid-row: 2;
		grid-column: 1 / 3;
		justify-self: center;
	}
	.support > dl {
		text-align: left;
		margin-left: 40px;
		padding-top: 20px;
		-ms-grid-row: 3;
		-ms-grid-row-span: 2;
		-ms-grid-column: 3;
		grid-row: 3 / 5;
		grid-column: 2;
	}
	.support > dl > dt {
		font-size: 18px;
		font-weight: bold;
		color: #000;
		margin-top: 20px;
		border-bottom: 1px dotted #1E3376;
	}
	.support > dl > dt::before {
		content: "➔";
		margin-right: 0.5em;
		color: #1E3376;
	}
	.support > dl > dd {
		margin-top: 20px;
		margin-left: 4em;
	}
	.support-education-courses {
		margin-left: -4em;
		width: 600px;
		display: -webkit-flex;
		-webkit-flex-flow: row nowrap;
		-webkit-justify-content: space-between;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	.support-education-courses > div {
		background-color: #F0F0F0;
		width: 290px;
		margin-top: 20px;
		margin-left: 20px;
		display: -webkit-flex;
		-webkit-flex-flow: column nowrap;
		display: flex;
		flex-flow: column nowrap;
	}
	.support-education-courses > div:nth-child(2n+1) {
		margin-left: 0;
	}
	.support-education-courses > div > dt {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		padding-top: 20px;
	}
	.support-education-courses > div > dt::before {
		content: "✔";
		margin-right: 0.5em;
		color: #1E3376;
	}
	.support-education-courses > div > dd {
		margin-top: 20px;
		margin-right: 20px;
		margin-left: 20px;
		padding-bottom: 20px;
	}
	.support-education-courses > div > dd > p {
		margin-top: 0;
	}
	.support-education-courses > div > dd > p + p {
		margin-top: 1em;
	}
	.support-academy,
	.support-winactor {
		color: #FFF;
		background-color: #1E3376;
		margin-top: 40px;
		padding-bottom: 40px;
		position: relative;
	}
	.support-academy > h3,
	.support-winactor > h3 {
		text-align: left;
		margin-top: 40px;
		margin-right: 40px;
		margin-left: 40px;
	}
	.support-academy > p,
	.support-winactor > p {
		text-align: left;
		margin-top: 40px;
		margin-right: 20px;
		margin-left: 20px;
	}
	.support-academy {
		-ms-grid-row: 3;
		-ms-grid-column: 2;
		-ms-grid-row-align: start;
		grid-row: 3;
		grid-column: 1;
		align-self: start;
	}
	.support-academy:after {
		content: "";
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;
		border-left: 20px solid #1E3376;
		position: absolute;
		top: 0;
		right: -20px;
	}
	.support-winactor {
		margin-top: 40px;
		background-color: #1E3376;
		-ms-grid-row: 4;
		-ms-grid-column: 2;
		-ms-grid-row-align: start;
		grid-row: 4;
		grid-column: 1;
		align-self: start;
	}

/* </pconly> */

/* <inline> */

}

/* </inline> */





/* <pconly> */
	
	/* <inline> */

@media (max-width: 959px) {

	.main-article > header {
		position: relative;
	}

	.whats {
		margin-left: 0;
		width: auto;
		min-width: 0;
		position: static;
		left: 0;
	}

	/* </inline> */

	.probrem {
		margin-left: 0;
		width: auto;
		min-width: 0;
		position: static;
		left: 0;
	}

	.solution {
		margin-left: 0;
		width: auto;
		min-width: 0;
		position: static;
		left: 0;
	}

	/* <inline> */

}

	/* </inline> */

/* </pconly> */





/* <inline> */

@media (min-width: 1px) and (max-width: 479px) {

	.overview {
		background-image: url(/images/system/320/robot.jpg);
	}
	.overview > h1 {
		text-align: center;
	}
	.overview > p {
		margin-top: 10px;
	}
	.overview > p.overview-uipath {
		text-align: center;
	}

	.whats > h2 {
		color: #1E3376;
		margin-top: 40px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.whats > p {
		text-align: left;
		background-color: #FFF;
		margin-right: 10px;
		margin-left: 10px;
		padding-top: 1em;
	}

/* </inline> */

	.probrem {
		background-color: #FBFCFE;
		background-image: url(/images/system/320/probrem.jpg);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100%;
		margin-top: 40px;
		padding-bottom: 78.125%;
	}
	.probrem > h2 {
		color: #555;
		padding-top: 40px;
	}
	.probrem > ul {
		background-color: #1E3376;
		color: #FFF;
		margin-top: 40px;
		margin-right: 10px;
		margin-left: 10px;
		border-radius: 15px;
		padding: 15px 20px;
		position: relative;
	}
	.probrem > ul::before {
		content: "";
		background-color: #1E3376;
		border-radius: 6px / 5px;
		height: 10px;
		width: 12px;
		position: absolute;
		left: 50px;
		bottom: -25px;
	}
	.probrem > ul::after {
		content: "";
		background-color: #1E3376;
		border-radius: 13px / 8px;
		height: 16px;
		width: 26px;
		position: absolute;
		left: 20px;
		bottom: -20px;
	}
	.probrem > ul > li {
		text-align: left;
		text-indent: -1.5em;
		padding-left: 1.5em;
	}
	.probrem > ul > li::before {
		content: "・";
		margin-right: 0.5em;
	}

	.solution {
		background-color: #1E3376;
		color: #FFF;
		padding-bottom: 40px;
	}
	.solution > h2 {
		font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGPMinchoE, serif;
		font-size: 24px;
		text-align: left;
		padding-top: 40px;
		border-bottom: 2px solid #5170CC;
		padding-right: 40px;
		padding-left: 40px;
		display: inline-block;
	}
	.solution > h2::after {
		content: "！";
	}
	.solution-works {
		padding-top: 20px;
		margin-right: 10px;
		margin-left: 10px;
		display: -webkit-flex;
		-webkit-flex-flow: row wrap;
		-webkit-align-items: center;
		-webkit-align-content: center;
		-webkit-justify-content: center;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		align-content: center;
		justify-content: center;
	}
	.solution-works > li {
		color: #1E3376;
		background-color: #FFF;
		margin-top: 20px;
		margin-right: 5px;
		margin-left: 5px;
		border-radius: 20px;
		padding: 10px 15px;
	}
	.solution-steps > li {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: auto 160px;
		margin-top: 70px;
		margin-right: 10px;
		margin-left: 10px;
		padding-top: 160px;
		position: relative;
	}
	.solution-steps > li::before {
		content: "";
		margin-right: auto;
		margin-left: auto;
		border-top: 20px solid #FFF;
		border-right: 30px solid transparent;
		border-left: 30px solid transparent;
		width: 0;
		position: absolute;
		top: -40px;
		right: 0;
		left: 0;
	}
	.solution-steps > li::after {
		content: "";
		margin-right: auto;
		margin-left: auto;
		border-top: 20px solid #1E3376;
		border-right: 30px solid transparent;
		border-left: 30px solid transparent;
		width: 0;
		position: absolute;
		top: -45px;
		right: 0;
		left: 0;
	}
	.solution-steps > li:nth-child(1) {
		background-image: url(/images/system/320/busy.png);
	}
	.solution-steps > li:nth-child(2) {
		background-image: url(/images/system/320/white-robot.png);
	}
	.solution-steps > li:nth-child(1) > h3::before {
		content: "Before";
		font-family: "Oswald", "Hiragino Kaku Gothic ProN", Meiryo, HGPGothicE, sans-serif;
		font-size: 32px;
		display: block;
	}
	.solution-steps > li:nth-child(2) > h3::before {
		content: "After";
		font-family: "Oswald", "Hiragino Kaku Gothic ProN", Meiryo, HGPGothicE, sans-serif;
		font-size: 32px;
		display: block;
	}
	.solution-steps > li > p {
		text-align: left;
		display: inline-block;
	}
	
	.support {
		overflow: hidden;
	}
	.support > h2 {
		font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGPMinchoE, serif;
		text-align: left;
		margin-top: 40px;
		margin-right: -240px;
		margin-left: -240px;
		border-bottom: 2px solid #5170CC;
		padding-right: 250px;
		padding-left: 250px;
		display: inline-block;
	}
	.support > p {
		text-align: left;
		margin-top: 40px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.support > dl {
		text-align: left;
		padding-top: 20px;
	}
	.support > dl > dt {
		font-size: 18px;
		font-weight: bold;
		color: #000;
		margin-top: 20px;
		border-bottom: 1px dotted #1E3376;
		padding-right: 10px;
		padding-left: 10px;
	}
	.support > dl > dt::before {
		content: "➔";
		margin-right: 0.5em;
		color: #1E3376;
	}
	.support > dl > dd {
		margin-top: 20px;
		margin-left: 40px;
		margin-right: 10px;
	}
	.support-education-courses > div {
		background-color: #F0F0F0;
		margin-top: 20px;
	}
	.support-education-courses > div > dt {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		padding-top: 20px;
	}
	.support-education-courses > div > dt::before {
		content: "✔";
		margin-right: 0.5em;
		color: #1E3376;
	}
	.support-education-courses > div > dd {
		margin-top: 20px;
		margin-right: 20px;
		margin-left: 20px;
		padding-bottom: 20px;
	}
	.support-education-courses > div > dd > p {
		margin-top: 0;
	}
	.support-education-courses > div > dd > p + p {
		margin-top: 1em;
	}
	.support-academy,
	.support-winactor {
		color: #FFF;
		background-color: #1E3376;
		margin-top: 40px;
		padding-bottom: 40px;
	}
	.support-academy > h3,
	.support-winactor > h3 {
		text-align: left;
		margin-right: 10px;
		margin-left: 10px;
		padding-top: 40px;
		display: inline-block;
	}
	.support-academy > p,
	.support-winactor > p {
		text-align: left;
		margin-top: 40px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.support-academy {
		position: relative;
	}
	.support-academy:after {
		content: "";
		margin-right: auto;
		margin-left: auto;
		width: 0;
		border-right: 20px solid transparent;
		border-bottom: 20px solid #1E3376;
		border-left: 20px solid transparent;
		position: absolute;
		top: -20px;
		right: 0;
		left: 40px;
	}

/* <inline> */

}

/* </inline> */