@charset "utf-8";
/* CSS Document */
/***********************************************************
	uptale.css
************************************************************/

/*=================================================
メインエリア
==================================================*/
.mainArea {
	background-image: url("../../common/img/main/main_cont2_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center center;
	height: 500px;
	overflow: hidden;
}
.mainArea .mainAreainnr {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 10px;
}
.mainArea .mainAreainnr .txtArea {
	width: 100%;
}
.mainArea .mainAreainnr .txtArea h2 {
	font-size: 20px;
	text-align: center;
	margin-bottom: 20px;
	padding-top:20px;
	line-height: 1.4;
	color: #FFF;
}
.mainArea .mainAreainnr .txtArea .msg1 {
	color: #FFF;
	font-size: 16px;
	text-align: center;
	margin-bottom: 10px;
}
.mainArea .mainAreainnr .txtArea .msg2 {
	color: #FFF;
	font-size: 16px;
	text-align: center;
	font-weight: 500;
}
.mainArea .mainAreainnr .imgArea {
	width: 60%;
	text-align: center;
	margin: 0 auto;
}


/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {
	.mainArea {
		height: 400px;
	}
	.mainArea .mainAreainnr {
		align-items: center;
	}
	.mainArea .mainAreainnr .txtArea {
		width: 60%;
	}
	.mainArea .mainAreainnr .txtArea h2 {
		font-size: 30px;
		text-align: left;
		margin-bottom: 20px;
		padding-top:20px;
	}
	.mainArea .mainAreainnr .txtArea .msg1 {
		font-size: 16px;
		text-align: left;
		margin-bottom: 15px;
	}
	.mainArea .mainAreainnr .txtArea .msg2 {
		font-size: 18px;
		text-align: left;
		margin-bottom: 5px;
	}
	.mainArea .mainAreainnr .imgArea {
		width: 40%;
		text-align: right;
	}
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.mainArea {
		height: 550px;
	}
	.mainArea .mainAreainnr {
		max-width: 1200px;
		padding: 0 10px;
		margin: 0 auto;
	}
	.mainArea .mainAreainnr .txtArea {
		width: 53%;
	}
	.mainArea .mainAreainnr .txtArea h2 {
		font-size: 42px;
		text-align: left;
		margin-bottom: 50px;
	}
	.mainArea .mainAreainnr .txtArea .msg1 {
		font-size: 18px;
	}
	.mainArea .mainAreainnr .txtArea .msg2 {
		font-size: 22px;
	}
	.mainArea .mainAreainnr .imgArea {
		width: 47%;
		text-align: right;
	}
}

/*=================================================
イントロ部
==================================================*/
.intoroArea {
}
.intoroArea .intoroAreainnr {
	padding: 0 10px;
}
.intoroArea .intoroAreainnr .intoroBox {
	background-color: #FFF;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid #8255FE;
}
.intoroArea .intoroAreainnr .intoroBox .txtArea {
	width: 100%;
	margin-bottom: 15px;
}
.intoroArea .intoroAreainnr .intoroBox .txtArea .ttl {
	font-size: 24px;
	margin-bottom: 20px;
}
.intoroArea .intoroAreainnr .intoroBox .txtArea p {
	font-size: 18px;
}
.intoroArea .intoroAreainnr .intoroBox .imgArea {
	width: 100%;
	text-align: center;
}
/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {

	
	.intoroArea .intoroAreainnr .intoroBox {
		padding: 40px;
	}
	.intoroArea .intoroAreainnr .intoroBox .txtArea {
		width: 68%;
		margin-bottom: 0;
	}
	.intoroArea .intoroAreainnr .intoroBox .txtArea .ttl {
		font-size: 28px;
		margin-bottom: 20px;
	}
	.intoroArea .intoroAreainnr .intoroBox .txtArea p {
		font-size: 20px;
	}
	.intoroArea .intoroAreainnr .intoroBox .imgArea {
		width: 30%;
		text-align: right;
	}
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {

	.intoroArea .intoroAreainnr {
		box-sizing: border-box;
		max-width: 1200px;
		margin: 0 auto;
	}
	.intoroArea .intoroAreainnr .intoroBox {
		padding: 50px;
	}
	.intoroArea .intoroAreainnr .intoroBox .txtArea .ttl {
		font-size: 30px;
	}
}


/*=================================================
	課題・要望にお応えします
==================================================*/
.assiArea {
}
.assiArea .assiAreainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
.assiArea .assiAreainnr .onePanlBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	background-color: #FFF;
	padding: 10px;
	margin-bottom: 30px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.assiArea .assiAreainnr .onePanlBox .txtArea {
	width: 100%;
	margin-bottom: 15px;
	font-size: 18px;
}
.assiArea .assiAreainnr .onePanlBox .imgArea {
	width: 100%;
	text-align: center;
}
/*-- 2列 ----------------*/
.assiArea .assiAreainnr .twoPanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.assiArea .assiAreainnr .twoPanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid #8255FE;
	background-color: #FFF;
}
.assiArea .assiAreainnr .twoPanlBox li .icon {
	text-align: center;
	margin-bottom: 15px;
}
.assiArea .assiAreainnr .twoPanlBox li p {
	text-align: left;
}

/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {
	.assiArea .assiAreainnr .onePanlBox {
		padding: 40px;
		margin-bottom: 50px;
	}
	.assiArea .assiAreainnr .onePanlBox .txtArea {
		width: 58%;
		margin-bottom: 0;
		font-size: 20px;
	}
	.assiArea .assiAreainnr .onePanlBox .imgArea {
		width: 40%;
		text-align: right;
	}
	/*-- 2列 ----------------*/
	.assiArea .assiAreainnr .twoPanlBox {
		margin: 40px 0;
	}
	.assiArea .assiAreainnr .twoPanlBox li {
		width: 49%;
		padding: 20px;
		margin: 0 0 0 0;
	}
	.assiArea .assiAreainnr .twoPanlBox li p {
		text-align: center;
	}
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.assiArea .assiAreainnr {
		max-width: 1200px;
		margin: 0 auto;
	}
	.assiArea .assiAreainnr .onePanlBox {
		padding: 50px;
	}
}

/*=================================================
	360°リアル映像でのVR学習
==================================================*/
.studyArea {
}
.studyArea .studyAreainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
/*-- 3列 ----------------*/
.studyArea .studyAreainnr .threePanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.studyArea .studyAreainnr .threePanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid #8255FE;
	background-color: #FFF;
}
.studyArea .studyAreainnr .threePanlBox li .icon {
	text-align: center;
	margin-bottom: 15px;
}
.studyArea .studyAreainnr .threePanlBox li p {
	text-align: left;
}
/*-- vrイメージ＋テキスト ----------------*/
.studyArea .studyAreainnr .twoPanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.studyArea .studyAreainnr .twoPanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 30px 0;
	margin: 0 0 20px 0;
	position: relative;
}
.studyArea .studyAreainnr .twoPanlBox li .img {
	text-align: center;
	margin-bottom: 15px;
}
.studyArea .studyAreainnr .twoPanlBox li p {
	text-align: center;
	z-index: 10;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFF;
	width: 94%;
	height: 90px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 14px;
}
.studyArea .studyAreainnr .twoPanlBox li p i {
	color: #8255FE;
}
/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {

	/*-- 3列 ----------------*/
	.studyArea .studyAreainnr .threePanlBox {
		margin: 40px 0;
	}
	.studyArea .studyAreainnr .threePanlBox li {
		width: 32%;
		padding: 20px;
		margin: 0 0 0 0;
	}
	.studyArea .studyAreainnr .threePanlBox li p {
		text-align: center;
	}
	/*--　vrイメージ＋テキスト ----------------*/
	.studyArea .studyAreainnr .twoPanlBox {
		margin: 40px 0;
	}
	.studyArea .studyAreainnr .twoPanlBox li {
		width: 49.5%;
		padding: 0 0 40px 0;
		margin: 0 0 40px 0;
	}
	.studyArea .studyAreainnr .twoPanlBox li p {
		text-align: center;
		font-size: 16px;
	}
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.studyArea .studyAreainnr {
		max-width: 1200px;
		margin: 0 auto;
	}
	/*-- vrイメージ＋テキスト ----------------*/
	.studyArea .studyAreainnr .twoPanlBox {
		max-width: 1100px;
		margin: 40px auto;
	}
}

/*=================================================
	簡単にコンテンツが作れます
==================================================*/
.easyArea {
}
.easyArea .easyAreainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
.easyArea .easyAreainnr .contsimgBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
	padding: 10px;
	background-color: #FFF;
}
.easyArea .easyAreainnr .contsimgBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 20px 0;
	text-align: center;
}
.easyArea .easyAreainnr .contsimgBox li img {
	margin-bottom: 10px;
}
.easyArea .easyAreainnr .contsimgBox li p {
	font-size: 14px;
	font-weight: 600;
}
.easyArea .easyAreainnr .contsimgBox li p i {
	color: #8255FE;
}

/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {

	.easyArea .easyAreainnr .contsimgBox {
		margin: 40px 0;
		padding: 20px;
	}
	.easyArea .easyAreainnr .contsimgBox li {
		width: 49%;
		padding: 20px;
		margin: 0 0 0 0;
	}
	.easyArea .easyAreainnr .contsimgBox li p {
		font-size: 18px;
	}
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.easyArea .easyAreainnr {
		max-width: 1200px;
		margin: 0 auto;
	}
}


/*=================================================
	ご利用方法は「撮影」・「作成」・「実行」の3ステップ
==================================================*/
.threestepArea {
}
.threestepArea .threestepAreainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
/*-- 5列 ----------------*/
.threestepArea .threestepAreainnr .fivePanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.threestepArea .threestepAreainnr .fivePanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid #8255FE;
	background-color: #FFF;
}
.threestepArea .threestepAreainnr .fivePanlBox li .icon {
	text-align: center;
	margin-bottom: 10px;
}
.threestepArea .threestepAreainnr .fivePanlBox li p {
	font-size: 14px;
	text-align: center;
}
/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {
	.threestepArea .threestepAreainnr .fivePanlBox li {
		width: 49%;
	}
	
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.threestepArea .threestepAreainnr {
		max-width: 1200px;
		margin: 0 auto;
	}
	/*-- 5列 ----------------*/
	.threestepArea .threestepAreainnr .fivePanlBox {
		margin: 40px 0;
	}
	.threestepArea .threestepAreainnr .fivePanlBox li {
		width: 19%;
		padding: 20px;
		margin: 0 0 0 0;
	}
	.threestepArea .threestepAreainnr .fivePanlBox li p {
		text-align: center;
		font-size: 16px;
	}
}

/*=================================================
	ユーザーの進捗管理
==================================================*/
.userpgArea {
}
.userpgArea .userpgAreainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
/*-- 3列 ----------------*/
.userpgArea .userpgAreainnr .threePanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.userpgArea .userpgAreainnr .threePanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid #8255FE;
	background-color: #FFF;
}
.userpgArea .userpgAreainnr .threePanlBox li .icon {
	text-align: center;
	margin-bottom: 15px;
}
.userpgArea .userpgAreainnr .threePanlBox li p {
	text-align: left;
}
/*-- 画像イメージ2列 ----------------*/
.userpgArea .userpgAreainnr .twoPanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.userpgArea .userpgAreainnr .twoPanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 0 0;
	margin: 0 0 20px 0;
}
.userpgArea .userpgAreainnr .twoPanlBox li .img {
	text-align: center;
}
/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {

	/*-- 3列 ----------------*/
	.userpgArea .userpgAreainnr .threePanlBox {
		margin: 40px 0;
	}
	.userpgArea .userpgAreainnr .threePanlBox li {
		width: 32%;
		padding: 20px;
		margin: 0 0 0 0;
	}
	.userpgArea .userpgAreainnr .threePanlBox li p {
		text-align: center;
	}
	/*-- 画像イメージ2列 ----------------*/
	.userpgArea .userpgAreainnr .twoPanlBox {
		margin: 40px 0;
	}
	.userpgArea .userpgAreainnr .twoPanlBox li {
		width: 49%;
		padding: 0 0 0 0;
		margin: 0 0 40px 0;
	}
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.userpgArea .userpgAreainnr {
		max-width: 1200px;
		margin: 0 auto;
	}
	/*-- 画像イメージ2列 ----------------*/
	.userpgArea .userpgAreainnr .twoPanlBox {
		max-width: 1200px;
		margin: 40px auto;
	}
}


/*=================================================
	多様なユースケース
==================================================*/
.useCasesArea {
}
.useCasesArea .useCasesAreainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
/*-- 4列 ----------------*/
.useCasesArea .useCasesAreainnr .fourPanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li {
	width: 100%;
	margin: 0 0 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	background-color: #FFF;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li .ttl {
	text-align: center;
	color: #FFF;
	padding: 5px 10px;
	background-color: #8255FE;
	font-size: 18px;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li:nth-child(1) .ttl {
	background-color: #8255FE;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li:nth-child(2) .ttl {
	background-color: #5577FE;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li:nth-child(3) .ttl {
	background-color: #9092DD;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li:nth-child(4) .ttl {
	background-color: #D26E73;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li .innr {
	padding: 10px;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li .innr .img {
	text-align: center;
	margin: 5px 0;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li .innr .list {
	list-style: none;
	margin: 10px 0;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li .innr .list li {
	font-size: 15px;
	position: relative;
  	padding: 0 0 0 1.2em;
  	margin: 0 0 5px 0;
}
.useCasesArea .useCasesAreainnr .fourPanlBox > li .innr .list li::before {
  position: absolute;
  left: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: '\f00c';
  color: #8255FE;
}
/*-- 3列 ----------------*/
.useCasesArea .useCasesAreainnr .threePanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.useCasesArea .useCasesAreainnr .threePanlBox li {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid #8255FE;
	background-color: #FFF;
}
.useCasesArea .useCasesAreainnr .threePanlBox li .img {
	text-align: center;
}
.useCasesArea .useCasesAreainnr .threePanlBox li .innr {
	text-align: center;
	padding: 10px;
}
.useCasesArea .useCasesAreainnr .threePanlBox li .innr .ttl {
	font-size: 16px;
}
.useCasesArea .useCasesAreainnr .threePanlBox li .innr p {
	font-size: 16px;
}
/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {

	/*-- 4列 ----------------*/
	.useCasesArea .useCasesAreainnr .fourPanlBox {
		margin: 40px 0;
	}
	.useCasesArea .useCasesAreainnr .fourPanlBox > li {
		width: 49%;
		margin: 0 0 0 0;
	}
	.useCasesArea .useCasesAreainnr .fourPanlBox > li .innr {
		padding: 15px;
	}
	/*-- 3列 ----------------*/
	.useCasesArea .useCasesAreainnr .threePanlBox {
		margin: 40px 0;
	}
	.useCasesArea .useCasesAreainnr .threePanlBox li {
		width: 32%;
		margin: 0 0 30px 0;
	}
	.useCasesArea .useCasesAreainnr .threePanlBox li .innr {
		text-align: center;
		padding: 15px;
	}
	.useCasesArea .useCasesAreainnr .threePanlBox li .innr .ttl {
		font-size: 18px;
	}
	.useCasesArea .useCasesAreainnr .threePanlBox li .innr p {
		font-size: 18px;
	}

}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.useCasesArea .useCasesAreainnr {
		max-width: 1200px;
		margin: 0 auto;
	}
	/*-- 4列 ----------------*/
	.useCasesArea .useCasesAreainnr .fourPanlBox > li {
		width: 24%;
		margin: 0 0 0 0;
	}
}


/*=================================================
	特徴
==================================================*/
.featureArea {
	background: linear-gradient(to bottom right, #8B58F8, #EF9772);
}
.featureArea .featureAreainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
/*-- 4列 ----------------*/
.featureArea .featureAreainnr .fourPanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.featureArea .featureAreainnr .fourPanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-top: 4px solid #8255FE;
	background-color: #FFF;
}
.featureArea .featureAreainnr .fourPanlBox li .icon {
	text-align: center;
	margin-bottom: 20px;
}
.featureArea .featureAreainnr .fourPanlBox li .ttl {
	font-size: 16px;
	text-align: center;
	margin-bottom: 15px;
}
.featureArea .featureAreainnr .fourPanlBox li p {
	flex-grow: 1;
	font-size: 14px;
}
/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {
	.featureArea .featureAreainnr .fourPanlBox li {
		width: 49%;
	}	
	
	.featureArea .featureAreainnr .fourPanlBox li .ttl {
		font-size: 18px;
	}
	.featureArea .featureAreainnr .fourPanlBox li p {
		font-size: 16px;
	}
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.featureArea .featureAreainnr {
		max-width: 1200px;
		margin: 0 auto;
	}
	/*-- 4列 ----------------*/
	.featureArea .featureAreainnr .fourPanlBox {
		margin: 40px 0;
	}
	.featureArea .featureAreainnr .fourPanlBox li {
		width: 24%;
		padding: 20px;
		margin: 0 0 0 0;
		/*display: flex;
    	flex-direction: column;*/
	}
	.featureArea .featureAreainnr .fourPanlBox li .ttl {
		/*flex-grow: 1;*/
		min-height: 60px;
	}
}


/*==========================================================================
	導入の流れ
============================================================================*/
/*****************************************************
	767px以下【sp】
******************************************************/
.stepFlow01Area {
	background-color: #f6f2fc;
}
.stepFlow01Area .stepFlow01Areainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li {
	width: 100%;
	position: relative;
	background-color: #FFF;
	margin: 0 0 30px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
/*--　矢印設定 --*/
.stepFlow01Area .stepFlow01Areainnr .stepflow li:after {
        content: "";
        position: absolute;
	    width: 0;
  		height: 0;
	    bottom: -20px;
	    right: 0;
  		left: 0;
  		margin: 0 auto;
        border-top: 20px solid #6016c5;
  		border-right: 20px solid transparent;
  		border-left: 20px solid transparent;
        z-index: 1;
 }
/* 矢印　カラーの設定*/
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(1):after {
	border-top: 20px solid #8B58F8;
  	border-right: 20px solid transparent;
  	border-left: 20px solid transparent;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(2):after {
	border-top: 20px solid #5577FE;
  	border-right: 20px solid transparent;
  	border-left: 20px solid transparent;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(3):after {
	border-top: 20px solid #9092DD;
  	border-right: 20px solid transparent;
  	border-left: 20px solid transparent;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(4):after {
	border-top: 20px solid #D26E73;
  	border-right: 20px solid transparent;
  	border-left: 20px solid transparent;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(5):after {
	border-top:none;
  	border-right:none;
  	border-left:none;
}
/* タイトル設定*/
.stepFlow01Area .stepFlow01Areainnr .stepflow li .ttlstep {
	color: #FFF;
	text-align: center;
	padding: 20px 5px;
	font-size: 20px;
}
/* タイトル　カラーの設定*/
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(1) .ttlstep {
	background-color: #8B58F8;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(2) .ttlstep {
	background-color: #5577FE;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(3) .ttlstep {
	background-color: #9092DD;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(4) .ttlstep {
	background-color: #D26E73;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(5) .ttlstep {
	background-color: #EF9772;
}
/* ボックスインナー */
.stepFlow01Area .stepFlow01Areainnr .stepflow li .innr {
	padding: 15px;
}
.stepFlow01Area .stepFlow01Areainnr .stepflow li .innr .ttl {
	font-size: 16px;
	text-align: center;
	margin-bottom: 10px;
}
/*****************************************************
	768px以上【tablet】
******************************************************/
@media print, screen and (min-width: 768px) {
	.stepFlow01Area .stepFlow01Areainnr {
	}
	.stepFlow01Area .stepFlow01Areainnr .stepflow li {
		width: 19%;
		position: relative;
		background-color: #FFF;
		margin: 0;
	}
	/* 矢印設定*/
	.stepFlow01Area .stepFlow01Areainnr .stepflow li:after {
        content: "";
        position: absolute;
	    width: 0;
  		height: 0;
		top: 20px;
        right: -20px;
		left:inherit;
  		margin: 0;
        border-top: 20px solid transparent;
  		border-right:none;
  		border-left: 20px solid #6016c5;
        z-index: 1;
 	}
	/* 矢印　カラーの設定*/
	.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(1):after {
		border-top: 20px solid transparent;
  		border-right:none;
  		border-left: 20px solid #8B58F8;
		border-bottom: 20px solid transparent;
	}
	.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(2):after {
		border-top: 20px solid transparent;
  		border-right:none;
  		border-left: 20px solid #5577FE;
		border-bottom: 20px solid transparent;
	}
	.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(3):after {
		border-top: 20px solid transparent;
  		border-right:none;
  		border-left: 20px solid #9092DD;
		border-bottom: 20px solid transparent;
	}
	.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(4):after {
		border-top: 20px solid transparent;
  		border-right:none;
  		border-left: 20px solid #D26E73;
		border-bottom: 20px solid transparent;
	}
	.stepFlow01Area .stepFlow01Areainnr .stepflow li:nth-child(5):after {
		border-top:none;
  		border-right:none;
  		border-left:none;
		border-bottom:none;
	}
	/* タイトル設定*/
	.stepFlow01Area .stepFlow01Areainnr .stepflow li .ttlstep {
		color: #FFF;
		text-align: center;
		padding: 20px 5px;
		font-size: 24px;
	}
	/* ボックスインナー */
	.stepFlow01Area .stepFlow01Areainnr .stepflow li .innr {
		padding: 20px;
	}
	.stepFlow01Area .stepFlow01Areainnr .stepflow li .innr .ttl {
		font-size: 17px;
		margin-bottom: 15px;
	}
}
/*****************************************************
	1024px以上【PC】
******************************************************/
@media print, screen and (min-width: 1024px) {
	.stepFlow01Area .stepFlow01Areainnr {
		box-sizing: border-box;
		margin: 0 auto;
		max-width: 1400px;
	}
}


/*=================================================
	ユーザーの進捗管理
==================================================*/
.userpgArea {
}
.userpgArea .userpgAreainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
/*-- 3列 ----------------*/
.userpgArea .userpgAreainnr .threePanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.userpgArea .userpgAreainnr .threePanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid #8255FE;
	background-color: #FFF;
}
.userpgArea .userpgAreainnr .threePanlBox li .icon {
	text-align: center;
	margin-bottom: 15px;
}
.userpgArea .userpgAreainnr .threePanlBox li p {
	text-align: left;
}
/*-- 画像イメージ2列 ----------------*/
.userpgArea .userpgAreainnr .twoPanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.userpgArea .userpgAreainnr .twoPanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 0 0;
	margin: 0 0 20px 0;
}
.userpgArea .userpgAreainnr .twoPanlBox li .img {
	text-align: center;
}
/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {

	/*-- 3列 ----------------*/
	.userpgArea .userpgAreainnr .threePanlBox {
		margin: 40px 0;
	}
	.userpgArea .userpgAreainnr .threePanlBox li {
		width: 32%;
		padding: 20px;
		margin: 0 0 0 0;
	}
	.userpgArea .userpgAreainnr .threePanlBox li p {
		text-align: center;
	}
	/*-- 画像イメージ2列 ----------------*/
	.userpgArea .userpgAreainnr .twoPanlBox {
		margin: 40px 0;
	}
	.userpgArea .userpgAreainnr .twoPanlBox li {
		width: 49%;
		padding: 0 0 0 0;
		margin: 0 0 40px 0;
	}
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.userpgArea .userpgAreainnr {
		max-width: 1200px;
		margin: 0 auto;
	}
	/*-- 画像イメージ2列 ----------------*/
	.userpgArea .userpgAreainnr .twoPanlBox {
		max-width: 1200px;
		margin: 40px auto;
	}
}


/*=================================================
	お客様の声
==================================================*/
.cstmviceArea {
}
.cstmviceArea .cstmviceAreainnr {
	padding: 0 10px;
	box-sizing: border-box;
}
/*-- 3列 ----------------*/
.cstmviceArea .cstmviceAreainnr .threePanlBox {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0;
}
.cstmviceArea .cstmviceAreainnr .threePanlBox li {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid #8255FE;
}
.cstmviceArea .cstmviceAreainnr .threePanlBox li .ttl {
	color: #FFF;
	text-align: center;
	background-color: #9092DD;
	border-radius: 15px;
	margin-bottom: 20px;
}
.cstmviceArea .cstmviceAreainnr .threePanlBox li .logo {
	text-align: center;
	margin-bottom: 15px;
}
.cstmviceArea .cstmviceAreainnr .threePanlBox li .per {
	text-align: center;
	color: #E60012;
	font-size: 30px;
	margin: 20px 0;
	font-weight: 800;
}
.cstmviceArea .cstmviceAreainnr .threePanlBox li .txt {
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	background-color: #F8F8F8;
	padding: 5px;
}

/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {

	/*-- 3列 ----------------*/
	.cstmviceArea .cstmviceAreainnr .threePanlBox {
		margin: 40px 0;
	}
	.cstmviceArea .cstmviceAreainnr .threePanlBox li {
		width: 32%;
		padding: 20px;
		margin: 0 0 0 0;
	}
	.cstmviceArea .cstmviceAreainnr .threePanlBox li .per {
		font-size: 48px;
	}
	.cstmviceArea .cstmviceAreainnr .threePanlBox li .txt {
		text-align: center;
		font-weight: 600;
		font-size: 18px;
	}

}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	.cstmviceArea .cstmviceAreainnr {
		max-width: 1200px;
		margin: 0 auto;
	}

}



/*=================================================

==================================================*/

/*******************************
	768px以上【tablet】
********************************/
@media print, screen and (min-width: 768px) {
	
}
/*******************************
	1024px以上【PC】
********************************/
@media print, screen and (min-width: 1024px) {
	
}