@charset "utf-8";

/*================================================================
	Base Setting
================================================================*/
html,
body,
#wrap {
	overflow-x:hidden;
	width:100%;
	min-width: 320px;
}
body {
	line-height:2;
	font-family:"Noto Sans JP", "Noto Sans Japanese","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","sans-serif";
	font-size:18px;
	font-feature-settings:"palt";
	color:#222;
}
body img {
	width:auto;
	vertical-align:bottom;
}
body a {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	text-decoration:none;
	color:inherit;
}
.center { text-align: center; }
@media only screen and (min-width: 1025px) {
	body a,
	body a *,
	body :before,
	body :after {
		transition: 0.2s;
	}
	#globalLang { display: none; }
}
@media only screen and (max-width:1024px) {
	body { font-size:14px; }
	body a:hover img { opacity:1; }
	#globalHeader { display: none; }
}

::selection{
	background: #6098ff;
	color: #ffffff;
}
::-moz-selection{
	background: #6098ff;
	color: #ffffff;
}

/* #header
--------------------------------------------*/
#header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 320px;
	padding: 0 30px;
	z-index: 10;
	transition: all 0.3s ease;
	background-color:transparent;
}
#gNav{
	display:flex;
	justify-content:space-between;
	align-items:center;
	height:70px;
	}
#logo {
	position: relative;
	width:170px;
}
.breadcrumbs {
	overflow-x:auto; 
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	padding:0.5em 30px;
	font-size: 14px;
}
.breadcrumbs,
.breadcrumbs a {
	white-space: nowrap;
	color: rgba(255,255,255,0.7);
	text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.breadcrumbs .current-item {
	color: rgba(255,255,255,0.9);
}
.breadcrumbs > span + span:before {
	content: "\0bb";
	margin: 0 0.5em;
}
.breadcrumbs a { text-decoration: underline; }
.breadcrumbs a:hover { text-decoration: none; }
@media only screen and (max-width:1024px) {
	#header {
		padding-left:1em;
		padding-right: 0;
	}
	#logo {
		top: 1em;
		width:140px;
		height: 35px;
	}
	.breadcrumbs {
		justify-content: flex-start;
		padding:0.5em 1.2em;
		font-size: 10px;
	}
}

/* #main
--------------------------------------------*/
#wrap {
	/*
	margin-top: -70px;
	*/
}

#main {
	position: relative;
/*	margin-top: -70px;*/
	letter-spacing: 0.1em;
}

/* colorbox main
--------------------------------------------*/
#cboxLoadingOverlay,
#cboxLoadingGraphic { display: none !important; }

#colorbox,
#cboxWrapper,
#cboxContent,
#cboxLoadedContent,
#cboxMain {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 320px;
	background: none !important;
	cursor: pointer;
}
#cboxMain,
#cboxInner {
	display: flex;
	justify-content: center;
	align-items: center;
}
#cboxInner {
	position: relative;
	width: 80%;
	height: 80%;
	max-width: 1120px;
	max-height: 730px;
}
#cboxInner .youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
#cboxInner .youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#cboxMain #close {
	position:absolute;
	top: 17px;
	right:20px;
	width:50px;
	height:50px;
	cursor: pointer;
}
#cboxMain #close:before,
#cboxMain #close:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 40px;
	margin: -20px 0 0 -1px;
	background: #FFF;
}
#cboxMain #close:before { transform: rotate(45deg); }
#cboxMain #close:after { transform: rotate(-45deg); }
@media only screen and (max-width:768px) {
	#cboxInner {
		width: calc(100% - 20px);
		height: calc(100% - 20px);
	}
	#cboxMain #close {
		top: 0;
		right:0;
		width:50px;
		height:50px;
	}
	#cboxMain #close:before,
	#cboxMain #close:after {
		height: 27px;
		margin: -14px 0 0 -1px;
	}
}

/*================================================================
	Module Setting
================================================================*/
.baseWidth {
	position:relative;
	max-width:1080px;
	min-width:320px;
	margin:0 auto;
}
.spStyle, .spStyle2 { display: none; }
.pcStyle, .pcStyle2 { display: block; }

.txtLink {border-bottom: 1px solid #666;}
.txtLink:hover {	border-bottom: 0;}

@media only screen and (max-width:1024px) {
	.spStyle { display:block; }
	.pcStyle { display: none; }
}
@media only screen and (max-width:768px) {
	.spStyle2 { display:block; }
	.pcStyle2 { display: none; }
}



/*================================================================
	Contents layout
================================================================*/
section.sec{
	padding: 6% 4% 6%;
}
.headline {
	color: #000;
	font-size:2.2em;
	font-weight: 900;
	line-height: 1.6;
	letter-spacing: 0.1em;
	margin-bottom: 2em;
	text-align: center;
}
.headline .txtSmall{
	font-size: 0.6em;
	letter-spacing: 1px;
}
.headline2 {
	color: #222;
	font-size:1.5em;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.6;
	margin-bottom: 1em;
	text-align: center;
}
.headline2 span{
	position: relative;
}
.headline2 span:before {
	content: '';
	position: absolute;
	bottom: 40%;
	left: -1.8em;
	width: 1.6em;
	height: 2px;
	margin-top: -6px;
	background-color: #222;
	-webkit-transform: translateY(-50%) rotate(55deg);
	transform: translateY(-50%) rotate(55deg);
}
.headline2 span:after {
	content: '';
	position: absolute;
	bottom: 40%;
	right: -1.6em;
	width: 1.6em;
	height: 2px;
	margin-top: -6px;
	background-color: #222;
	-webkit-transform: translateY(-50%) rotate(125deg);
	transform: translateY(-50%) rotate(125deg);
}
.headline3 {
	color: #234ab0;
	font-size:1.6em;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 0.8em;
	}

.headline4{
	font-size: 1.8em;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: center;
	margin: 0 auto 0.5em;
	position: relative;
}
.headline4:before {
	content: '';
	position: absolute;
	bottom: 50%;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #234AB0;
}
.headline4 span {
	display: inline-block;
	color: #234AB0;
	padding: .2em 0.5em .3em 0.6em;
	margin: 0 1em;
	background-color: #ecf8ff;
	position: relative;
}

section.sec .txt p{	margin-bottom: 0.4em;}
section.sec .txt ul {	margin-bottom: 1.6em;}
.colorUnderline {
	font-size: 1em;
	padding: 0 0.3em;
	background: rgba(0,0,0,0) -webkit-linear-gradient(transparent 60%, #f8f066 0%) repeat scroll 0 0;
	background: rgba(0,0,0,0) -o-linear-gradient(transparent 60%, #f8f066 0%) repeat scroll 0 0;
	background: rgba(0,0,0,0) linear-gradient(transparent 60%, #f8f066 0%) repeat scroll 0 0;
	display: inline;
}

@media only screen and (max-width:1024px) {
	section.sec{
		padding: 10% 4% 10%;
	}
	.headline {
		font-size:1.6em;
		letter-spacing: 0.1em;
		margin-bottom: 1em;
	}
	.headline2 {
		font-size:1.4em;
	}
	.headline3 {
		font-size:1.3em;
	}
	.headline4 {
		font-size:1.4em;
	}
}


/*================================================================
	btnType layout
================================================================*/
.btnType01 a {
	color:#FFF;
	font-size: 2em;
	font-weight: 900;
	text-align: center;
	letter-spacing: 0.1em;
	padding: 0.5em 1em 0.5em 1em;
	text-shadow: 0px -0.1em rgba(0,0,0,.2);
	border: 5px solid #FFF;
	border-radius: 60px;
	box-shadow: 0px 5px 0px rgba(0,0,0,.15);
	background: #ffea00 linear-gradient(0deg, #099f00, #25ed00);
	min-width: 560px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	transition: all 1s ease 0s;
}
.btnType01 a:hover{
	background: #00d11e;
	transition: all 1s ease 0s;
}
.btnType01 a i{
	font-size: 1.1em;
	padding-left: 0.4em;
}
.btnType02 a {
	color:#234ab0;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.1em;
	padding: 0.5em 1em 0.5em 1em;
	background: #FFF;
	border: 2px solid #234ab0;
	border-radius: 60px;
	min-width: 200px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
.btnType02 a:hover{
	color: #FFF;
	background-color: #234ab0;
}
.btnType02 a i{
	font-size: 1.1em;
	padding-left: 0.4em;
}
.btnType01 a:hover,
.btnType02 a:hover,
 a:hover .btnType03{
	animation: grow 1300ms ease infinite;
/*	animation: random-bg .5s linear infinite, grow 1300ms ease infinite;*/
}
/*
@keyframes random-bg {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
}*/
@keyframes grow {
	0% {
		transform: scale(1);
	}
	14% {
		transform: scale(1.1);
	}
	28% {
		transform: scale(1);
	}
	42% {
		transform: scale(1.1);
	}
	70% {
		transform: scale(1);
	}
}

@media only screen and (max-width:1024px) {
	.btnType01 a {
		font-size: 1.5em;
		width: 100%;
		min-width:inherit;
	}
	.btnType02 a {
		width: 100%;
	}
}

@media only screen and (max-width:450px) {
	.btnType01 a {
		min-width: initial;
	}
}


/*================================================================
	caution layout
================================================================*/
.caution {
	color: #c00;
}
.toggle + * { display:none; }
.toggle.active + * { display:block; }

.youtube {
	width: auto;
	margin: 0 auto ;
}
.youtube .movie {
	position: relative;
	padding-top: 56.25%;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.youtube p { padding-top: 1rem; }

@media only screen and (max-width:1024px) {
	.youtube {
		width: 100%;
	}
	.youtube p { padding-top: 1em; }
}



/*================================================================
	Custom Setting
================================================================*/

/*======================================================
	キービジュアル / #keyv
======================================*/
#keyv {
	margin: 0;
	padding: 0 0;
	background: #1d4abb url("../img/bg_keyv.jpg") no-repeat 50% 50%;
	background-size:cover;
	position: relative;
/*	overflow: hidden;*/
	z-index: 1; 
}
#keyv:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.05);
	z-index: -1; 
}
#keyv .txt{
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 460px;
	z-index: 3;
}
#keyv .txt .title{
	color: #FFF;
	font-size: 2.5em;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.8;
	margin-bottom: 0.4em;
}
#keyv .txt .title .bgTxt{
	line-height: 1.6;
	display: block;
}
#keyv .txt .title .bgTxt .bgband{
/*	background: rgba(26,74,201,0.9);*/
	background: rgba(1,139,245,0) linear-gradient(50deg,rgba(1,139,245,0.9),rgba(0,62,204,0.9));
	padding: 0.2em 0.4em 0.1em 0.4em;
/*	display: inline;*/
}
#keyv .txt .title .bgTxt em{
	font-weight: 700;
	font-style:normal;
}
#keyv .c-yellow{ color: #f3fa23;}
#keyv .f-big{ font-size: 1.6em;}
#keyv .f-big2{ font-size: 1.2em;}
#keyv .f-small{ font-size: 0.8em;}

#keyv .txt .vpName span{
	color: #FFF;
	font-size: 1.3em;
	font-weight: 700;
	letter-spacing: 1px;
	text-shadow: rgba(0,0,0,0.9) 1px 0 10px;
	display: inline-block;
	padding: 0 0.5em;
	background-color: rgba(0,0,0,0.6)
}
#keyv .txt .vpNameTxt {
	color: #FFF;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-shadow: rgba(0,0,0,0.9) 1px 0 10px;
	margin-top: 0.5em;
	line-height: 1.6;
}

@media only screen and (max-width:1024px) {
	#keyv {
		background: #FFF url("../img/bg_keyv.png") no-repeat 80% 0%;
		background-size:cover;
	}
	#keyv .txt{
		flex-direction: column;
		height: 300px;
		padding: 15% 4% 6%;
	}
	#keyv .txt .title{
		font-size: 1.7em;
	}
	#keyv .txt .title .bgTxt {
		line-height: 1.7;
	}
}
@media only screen and (max-width:500px) {
	#keyv .txt{
		padding-top: 30%;
	}
}


/* #keyv .keyvBand
------------------------------------------------------*/
#keyv .keyvBand {
	background: rgba(12,69,255,0.5);
	min-height: 170px;
}
#keyv .keyvBand .innerBox{
	display: flex;
	align-items: center;
	padding: 1.4em 1em 1em;
}
#keyv .keyvBand .innerBox .sales{
	display: flex;
	align-items: center;
}
#keyv .keyvBand .innerBox .icon{
	width: 22%;
	min-width: 100px;
	margin-right: 2%;
}
#keyv .keyvBand .innerBox .bandCom{
	color: #FFF;
	font-size: 1.1em;
	font-weight: 700;
	text-shadow: rgba(0,0,0,0.9) 1px 0 10px;
	line-height: 1.4;
}
#keyv .keyvBand .innerBox .btnType01 a{
	font-size: 1.2em;
	font-weight: 700;
	padding: 0.6em 1em 0.6em 1em;
	text-shadow: 0px -2px rgba(0,0,0,.2);
	border: 3px solid #FFF;
	min-width: 320px;
}
#keyv .keyvBand .participation{
	text-align: center;
	height: 30px;
	position: relative;
	top:0;
}

@media only screen and (max-width:1024px) {
	#keyv .keyvBand {
	}
	#keyv .keyvBand .innerBox{
		flex-wrap: wrap;
		justify-content: center;
	}
	#keyv .keyvBand .innerBox .sales{
		align-items: center;
		justify-content: center;
		margin-bottom: 1em;
	}
	#keyv .keyvBand .innerBox .bandCom{
		font-size: 1em;
	}

	#keyv .keyvBand .innerBox .btn{
		width: 90%;
	}
	#keyv .keyvBand .innerBox .btnType01 a{
		min-width:inherit;
	}
	#keyv .keyvBand .participation{
		text-align: center;
		height: 5vw;
		margin: 1vw 4vw 0;
	}
}



/*======================================================
	こんなことありませんか / #case
======================================*/
#case{
	background-color:#FFF;
}
#case .sceneInner{
	padding: 4em 6% 1em;
	margin-bottom: 4em;
	background: #7DC4FA url("../img/bg_polygon.jpg") no-repeat 100% 50%;
	background-size: cover;
	position: relative;
}
#case .sceneInner .headline2{
	font-size: 1.4em;
/*	margin-bottom: 0.3em;*/
}
#case .sfTxt {
	color: #FFF;
	font-size: 1.8em;
	font-weight: 900;
	text-align: center;
	line-height: 1.6;
/*	margin-top: 1em;*/
	margin-bottom: 0.6em;
	text-shadow: rgba(2,23,45,0.7) 1px 0 10px;
}

#case .tab {
/*	max-width: 940px;*/
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#case .tab li {
	width: 31%;
	border-radius: 10px;
	background-color: #fff;
/*	box-shadow: 0px 1px 10px rgba(0,0,0,.3);*/
	box-shadow: 0px 5px 12px -2px rgba(0,0,100,.5);
	display: flex;
	position: relative;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), from(#fdfbfb), to(#ebeff4));
	background: -webkit-linear-gradient(top, #FFF 60%, #fdfbfb 85%, #ebeff4 100%);
	background: linear-gradient(to bottom, #FFF 60%, #f8f9fb 85%, #ebeff4 100%);
}
#case .tab li.active {
	border: 6px solid #0351be;
	background: #FFF;
	box-shadow: 0px 1px 10px rgba(0,0,0,0);
}
#case .tab li.active:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -30px;
	margin-bottom: -90px;
	border-style: solid;
	border-width: 45px 30px;
	border-color: #0351be transparent transparent transparent;
}
#case .tab li:hover {
/*	background-color: #fffd71;*/
	transition: all 0.5s ease 0s;
}
#case .tab li a{
	display: flex;
	padding: 1em 1.2em;
	width: 100%;
}
#case .tab li.active a{
	background-color: #FFF;
	border-radius: 10px;
}
#case .tab dl {
	display: flex;
	flex-direction: column;
	width: 100%;
}
#case .tab dt {
	margin-bottom: 1em;
	display: flex;
	align-items: center;
	padding: 0 0 1em 0;
	border-bottom: 1px dotted #999;
}
#case .tab dt .icon img{
	min-width: 90px;
}
#case .tab dt .title {
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.6;
	margin-left: 0.5em;
}
#case .tab dt .engTxt {
	color: #fff;
	font-size: 0.8em;
	font-family:'Roboto', sans-serif;
	font-style: italic;
	padding: 0 1em 0 1em;
	margin-bottom: 0.4em;
	display: inline-block;
	background: #7ab2fd;
	border-radius: 40px;
}
#case .tab dd.txt{
	margin-bottom: 1.2em;
	line-height: 1.8;
}
#case .tab dd.btn{
	margin-top: auto;
	margin-bottom: 0;
	text-align: center;
}
#case .tab .btnType03 span{
	font-size: 0.85em;
	color:#234ab0;
	font-weight: 900;
	letter-spacing: 0.1em;
	padding: 0.2em 1em 0.2em 1em;
	background: #ffea00;
	border-radius: 60px;
	width: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
#case .tab .btnType03 span i{
	font-size: 1.2em;
	margin-left: 0.3em;
}
#case .tab li a:hover .btnType03 span,
#case .tab li.active a .btnType03 span{
	color: #FFF;
	background: #234ab0;
}

@media only screen and (max-width:1024px) {
	#case .sceneInner{
		padding-top: 7vw;
		padding-bottom: 1em;
		margin-bottom: 2em;
	}
	#case .sceneInner .sfTxt {
		font-size: 1.5em;
		margin-top:0.5em;
	}
/*
	#case .sceneInner:after{
		border-width: 30px 60px;
		margin-left: -60px;
	}
*/
	#case .tab {
		flex-direction: column;
		justify-content: center;
		margin: 0 auto;
	}
	#case .tab li{
		width: 100%;
		margin-bottom: 1em;
	}
	#case .tab li.active:after {
		content:none;
	}
	#case .tab li a{
		padding: 1em 1em;
		justify-content: center;
	}
	#case .tab dt {
		margin-bottom: 0.5em;
	}
	#case .tab dd.txt{
		margin-bottom: 0.5em;
	}

}


/* #case .tabContents / #case .tabInner
------------------------------------------------------*/
.tabContents {
	display: none;
}
.tabContents.active {
	display: block;
}
#case .tabContents {
	margin: 2em 0 0;
	background-color: #ecf8ff;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
}
#case .tabContents:before {
	content: '';
	position: absolute;
	top: -100px;
	left: -100px;
	width: 300px;
	height: 350px;
	background-color: rgba(204,236,255,1);
	-webkit-transform: skewX(-55deg);
	-ms-transform: skewX(-55deg);
	transform: skewX(-55deg);
}
/*
#case .tabContents:after {
	content: '';
	position: absolute;
	bottom: -100px;
	right: -100px;
	width: 300px;
	height: 350px;
	background-color: rgba(204,236,255,1);
	-webkit-transform: skewX(-55deg);
	-ms-transform: skewX(-55deg);
	transform: skewX(-55deg);
}
*/
#case .tabInner{
	position: relative;
	z-index: 2; 
	padding: 3em 4em;
}

@media only screen and (max-width:1024px) {
	#case .tabContents {
		margin: 2em 1em 0;
	}
	#case .tabInner{
		padding: 4vw 4vw 0;
	}
}


/* #case .tabInner .tabTitleBox
------------------------------------------------------*/
#case .tabTitleBox {
	margin-bottom: 3em;
	display: flex;
	align-items: center;
}
#case .tabTitleBox .number{
	color: #234ab0;
	font-size: 3.8em;
	font-weight: 900;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 1px;
	line-height: 1;
	margin-right: 0.6em;
}
#case .tabTitleBox .number span{
	font-size: 1.6em;
}
#case .tabTitleBox .txt{
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1.8;
}

@media only screen and (max-width:1024px) {
	#case .tabTitleBox {
		flex-direction: column;
		margin-bottom: 1em;
	}
	#case .tabTitleBox .number{
		font-size: 1.8em;
		margin: 0;
	}
	#case .tabTitleBox .txt{
		font-size: 1.4em;
		margin-top: 0.5em;
	}
}


/* #case .tabInner .solutionBox
------------------------------------------------------*/
#case .solutionBox {
	background-color: #FFF;
	margin-bottom: 4em;
	border-radius: 10px;
	overflow: hidden;
}
#case .solutionBox .plan {
	padding: 1em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#case .solutionBox .plan dl {
	width: 46%;
	padding: 1em 1.5em 1em;
	position: relative;
}
#case .solutionBox .plan dl:before {
	content: "";
	width: 60px;
	height: 72px;
	margin-top: -36px;
	line-height: 1;
	position: absolute;
	top: 50%;
	right: -16%;
	background: url("../img/icon_arrow.png") no-repeat 50% 50%;
	background-size: 60px 72px
}
#case .solutionBox .plan dl:last-child:before{
	display: none;
}
#case .solutionBox .plan dt{
	margin-bottom: 0.6em;
}
#case .solutionBox .plan dt > span {
	color: #fff;
	font-size: 0.9em;
	display: inline-block;
	background-color: #234ab0;
	padding: 0.1em 1.2em 0.1em 1.2em;
	border-radius: 30px;
}
#case .solutionBox .plan dd{
	font-weight: 700;
	font-size: 0.95em;
/*
	height: 75%;
	display: flex;
	align-items: center;
	margin-top: auto;
*/
}
#case #tab03 .solutionBox .plan dl{
	width: 29%;
}
#case #tab03 .solutionBox .plan dl:before {
	right: -21%;
}
#case #tab03 .solutionBox .vAlignment dd{
/*	align-items: stretch;*/
}
#case #tab03 .solutionBox .vAlignment{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#case .iconTxtBox{
	display: flex;
	align-items: center;
	justify-content: space-around;
}
#case #tab02 .iconTxtBox{
	margin: 2em 2em 1em;
	padding:1em 1em;
	background-color: #fffde3;
}
#case #tab03 .iconTxtBox{
	margin: 0 2em 1em;
	border-top: 1px dotted #333;
	padding:1.5em 1em 1em;
}
#case .iconTxtBox .box01{
	font-weight: 700;
	text-align: center;
	width: 10%;
	margin: 0.2em 0;
	line-height: 1;
}
#case .iconTxtBox .box02 {
	width: 85%;
}
#case #tab02 .iconTxtBox .box01 i{
	font-size: 4em;
	color: #ffc602;
}
#case #tab03 .iconTxtBox .box01 i{
	font-size: 4em;
	color: #f13229;
}

@media only screen and (max-width:1024px) {
	#case .solutionBox{
		margin-bottom: 3em;
	}
	#case .solutionBox .plan{
		flex-direction: column;
		padding-top: 0.5em;
	}
	#case .solutionBox .plan dl,
	#case #tab03 .solutionBox .plan dl{
		width: 100%;
		padding: 0.5em 1em 2.4em;
	}
	#case .solutionBox .plan dl:last-child,
	#case #tab03 .solutionBox .plan dl:last-child{
		padding-bottom: 1em;
	}
	#case #tab03 .solutionBox .plan dl:before,
	#case .solutionBox .plan dl:before {
		width: 30px;
		height: 36px;
		margin-left: -15px;
		position: absolute;
		top: 102%;
		left: 50%;
		background: url(../img/icon_arrow.png) no-repeat 50% 50%;
		background-size: 30px 36px;
		transform: rotate(90deg);
	}
	#case .solutionBox .plan dt{
		text-align: center;
	}
	#case .iconTxtBox{
		flex-direction: column;
	}
	#case .iconTxtBox .box01,
	#case .iconTxtBox .box02{
		width: 100%;
	}
	#case #tab02 .iconTxtBox{
		margin: 1em 0 0;
	}
	#case #tab03 .iconTxtBox{
		padding:1em 0 0.5em;
		margin: 0 1em 1em;
	}
	#case #tab02 .iconTxtBox .box01 i,
	#case #tab03 .iconTxtBox .box01 i{
		font-size: 2.2em;
	}
}


/* #case .tabInner .dataCon
------------------------------------------------------*/
.dataCon {
	background-color: #FFF;
	padding: 0 5% 6%;
	border: 3px solid #234ab0;
	border-radius: 10px;
	position: relative;
}
.dataCon .boxLabel{
	position: relative;
	top: -1.5em;
	text-align: center;
}
.dataCon .boxLabel span{
	display: inline-block;
	color: #234ab0;
	font-weight: 700;
	text-align: center;
	padding: .2em 1.2em .3em 1.3em;
	border: 3px solid #234ab0;
	border-radius: 30px;
	background-color: #FFF;
}
.dataCon .topTxt{
	font-size: 1.25em;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
	margin: 0.5em 0 2em;
}
.dataCon .pic{
	text-align: center;
}
.dataCon .txt{
	margin: 2em 2% 0;
}

@media only screen and (max-width:1024px) {
	.dataCon .topTxt{
		font-size: 1.1em;
		text-align: left;
		margin: -0.5em 0 1em;
	}
}


/* #case .tabInner .pvBox
------------------------------------------------------*/
#case .pvBox{
	margin-top: 5em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#case .pvBox .pic {
	width: 45%;
	border-radius: 10px;
	text-align: center;
}
#case .pvBox .txt {
	width: 50%;
}
#case .pvBox .txt .pvTitle{
	font-size: 1.4em;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.6;
	margin-bottom: 0.5em;
}

@media only screen and (max-width:1024px) {
	#case .pvBox {
		flex-direction: column-reverse;
		justify-content: center;
		width: 100%;
		margin: 2em auto 0;
	}
	#case .pvBox .pic ,
	#case .pvBox .txt {
		width: 100%;
		margin-bottom: 1em;
	}
	#case .pvBox .txt .pvTitle{
		font-size: 1.2em;
	}
}


/* #case .tabInner .contactBox
------------------------------------------------------*/
#case .contactBox{
	padding: 2.5em 2em 3em;
	text-align:center;
	background: #234ab0;
	position: relative;
	z-index: 4;
}
#case .contactBox .btnType01 a {
	font-size: 1.8em;
/*	font-weight: 700;*/
	padding: 0.6em 1em 0.6em 1em;
}
@media only screen and (max-width:1024px) {
	#case .contactBox{
		margin-top: 1em;
		padding: 1.5em 2em 2em;
	}
	#case .contactBox .btnType01 a {
		font-size: 1.4em;
		letter-spacing: 1px;
	}
}



/*======================================================
	他にもこんなことに使えます / otherUsage
================================================*/
#otherCase .point{
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
	border-radius: 30px;
}
#otherCase .headline2{
	margin-bottom: 0;
}
#otherCase .point li{
	width:48%;
	line-height: 1.8;
	margin: 2em 0 0 ;
	padding: 3% 4%;
	background: #f3fff1;
	border-radius: 10px;
}
#otherCase .point .title{
	color: #234ab0;
	font-size: 1.3em;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.5em;
}
#otherCase .point .txt{
	margin-bottom: 1em;
}

@media only screen and (max-width:1024px) {
	#otherCase .point{
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	#otherCase .point li{
		width:100%;
		margin: 1.5em 0 0;
		padding: 6% 6%;
	}
	#otherCase .point .title{
		min-height:inherit;
		font-size: 1.1em;
	}
}



/*======================================================
	VisionPoseとは / about
================================================*/
#about {
	background-color: #ecf8ff;
	overflow: hidden;
}
#about .pearBox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 5em;
}
#about .pearBox .pic{
	width: 55%;
	background-color: #FFF;
	border-radius: 10px;
	text-align: center;
	overflow: hidden;
}
#about .pearBox .txt{
	width: 40%;
}
#about .pearBox .txt p{
	margin-bottom: 1em;
}

@media only screen and (max-width:1024px) {
	#about .pearBox {
		flex-direction: column;
		justify-content: center;
		width: 100%;
		margin: 0 auto 2em;
	}
	#about .pearBox .pic ,
	#about .pearBox .txt {
		width: 100%;
	}
	#about .pearBox .pic{
		margin-bottom: 1em;
	}
}


/* #about .appBox
------------------------------------------------------*/
#about .appBox {
	margin-bottom: 6em;
	border-radius: 10px;
	background-color: #FFF;
	overflow: hidden;
}

#about .appBox .title{
	color: #FFF;
	font-size: 1.2em;
	font-weight: 700;
	text-align: center;
	padding: 0.8em 1em;
	margin-bottom: 0;
	background-color: #234ab0;
}
#about .appBox .title.headline2 span{
	color:#ffea00;
	font-size: 0.9em;
	line-height: 2.2;
}
#about .appBox .title.headline2 span:before,
#about .appBox .title.headline2 span:after{
	background-color:#ffea00;
}
#about .appBox .tool{
	display: flex;
	justify-content:space-between;
	padding: 1em 1em 2em;
	margin: 1em 2em 2em;
	border-bottom: 1px dotted #333;
}
#about .appBox .tool:last-child{
	border: 0;
	padding: 0 1em 1em;
}
#about .appBox .tool img{width: 100%;}
#about .appBox .tool .txtBox{ width: 55%;}
#about .appBox .tool .picBox{ width: 40%;}

#about .appBox .tool .txtBox .appName{
	color: #234ab0;
	font-size: 2.2em;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
	line-height: 1.6;
}
#about .appBox .tool .txtBox .poTxt{
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 1em;
}
#about .appBox .tool .usagefile{
	padding: 1.5em 2em;
	background: #f6f6f6;
}
#about .appBox .tool .usageTxt{
	color:#234ab0;
	font-weight: 700;
}
#about .appBox .tool .bluebold{
	font-weight: 900;
}
#about .appBox .tool .bluebold:first-child{
	padding-left:0;
}

@media only screen and (max-width:1024px) {
	#about .appBox {
		margin-bottom: 4em;
	}
	#about .appBox .tool {
		flex-direction: column;
		width: 96%;
		margin: 0 auto 1em;
		padding-bottom: 1em;
	}
	#about .appBox .tool .txtBox,
	#about .appBox .tool .picBox{
		width: 100%;
		margin: 0;
	}
	#about .appBox .tool .usagefile,
	#about .appBox .tool .toolimg .pic{
		margin-top: 1em;
	}
	#about .appBox .tool .txtBox .appName{
		font-size: 1.8em;
	}
	#about .appBox .tool .txtBox .poTxt{
		font-size:1.1em;
		margin-bottom: 0.8em;
	}
}


/* #about .dataCon
------------------------------------------------------*/
#about .dataCon .boxLabel{
	top: -2em;
}
#about .dataCon .boxLabel span{
	color: #FFF;
	font-size: 1.2em;
	background-color: #234ab0;
}
#about .dataCon .whatSdk{
	margin-top: 2.5em;
	border-top: 1px dotted #333;
	padding:2em 1em 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#about .dataCon .whatSdk .box01{
	font-size: 1.3em;
	font-weight: 700;
	text-align: center;
	width: 20%;
	margin: 0.3em 0;
}
#about .dataCon .whatSdk .box02 {
	width: 78%;
}

@media only screen and (max-width:1024px) {
#about .dataCon .whatSdk{
		flex-direction: column;
		padding:0.5em 0 0;
	}
	#about .dataCon .whatSdk .box01,
	#about .dataCon .whatSdk .box02{
		width: 100%;
	}
}


/* #about .contract
------------------------------------------------------*/
#about .contract{
	margin-top:4em;
	position: relative;
}
#about .iconTxtBox{
	display: flex;
	align-items: center;
	margin: 0em 2em 0.5em;
	padding:1em 1em;
}
#about .iconTxtBox .box01.photo{
	margin-right: 2em;
	border-radius: 200px;
	max-width: 140px;
	overflow: hidden;
}
#about .iconTxtBox .box02 {
	font-weight: 700;
	width: 65%;
	padding: 1.5em 2em ;
	border: 2px solid #333;
	border-radius:30px 0 30px 0;
	background-color: #FFF;
}
#about .contract .txt{
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
}
#about .contract .womanImg{
	position: absolute;
	right:-3%;
	bottom:-7vw;
	max-width: 260px
}

@media only screen and (max-width:1024px) {
	#about .iconTxtBox{
		margin: 1em 0 2em;
		padding: 0 1em;
	}
	#about .iconTxtBox .box01.photo{
		margin-right: 1em;
		max-width: 120px;
	}
	#about .iconTxtBox .box02{
		width: 90%;
		padding: 1em;
	}
	#about .contract{
		margin-top:2em;
	}
	#about .contract .txt{
		text-align: left;
	}
	#about .contract .womanImg{
		display: none;
	}
}



/*======================================================
	VisionPose SDKの特長 / features
================================================*/
#features .featuresBox{
	padding: 3em 4em ;
	margin-bottom: 2em;
	background-color: #ecf8ff;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}
#features .featuresBox:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-style: solid;
	border-width: 40px 40px 0 0;
	border-color: rgba(78,186,255,0.4) transparent transparent transparent;
}
#features .featuresBox .bgword {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-size: 8em;
	font-style: italic;
	letter-spacing: -4px;
	position: absolute;
	top: 60px;
	right: 1%;
	line-height: 0;
	color: rgba(203,235,254,1);
	z-index: 1;
}
#features .featuresInner {
	position: relative;
	z-index: 2;
}
#features .featuresInner .flowpic {
	text-align: center;
	padding: 4% 2%;
	margin: 2em 0 4em;
	background-color: #FFF;
	border-radius: 10px;
	overflow: hidden;
}
#features .headicon{margin-bottom: 1em;}
#features .headicon span{
	font-weight: 700;
	background-color: #f9b920;
	padding:0.3em 0.6em 0.3em 0.7em;
}

#features .toolVideo .col2video {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#features .toolVideo .col2video li{width: 47%;}
#features .toolVideo .caption{
	font-size: 0.9em;
	line-height: 1.6;
	letter-spacing: 0;
	text-align: center;
	margin-top: 0.2em;
}

#features .featuresBox .platform {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#features .featuresBox .platform .txt{
	width: 60%;
}
#features .featuresBox .platform .device{
	margin-top: 2em;
	line-height: 1.5;
	position: relative;
	border: 1px solid #666;
	border-radius: 4px;
}
#features .featuresBox .platform .device .title{
	position: relative;
	top:-0.8em;
	left: 0.5em;
}
#features .featuresBox .platform .device .title>span{
	display: inline-block;
	background-color: #ecf8ff;
	font-weight: 700;
	padding: 0 0.5em;
}
#features .featuresBox .platform .device>p{
	padding: 0 1.5em 1em;
}

#features .featuresBox .platform .pic{
	width: 35%;
	padding: 1.5em;
	text-align: center;
	background-color: rgba(255,255,255,0.7);
	border-radius: 10px;
	align-self: center;
}

#features .col3Area{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#features .col3Area .featuresBox{
	width: 31%;
	padding: 2em;
	display: flex;
	justify-content: center;
	flex-direction: column;
/*	align-items: center;*/
}
#features .col3Area .featuresBox .headline3{
	font-size: 1.2em;
	text-align: center;
}

@media only screen and (max-width:1024px) {
	#features .featuresBox{
		padding: 7vw 4vw 2vw 4vw;
		margin-bottom: 1em;
	}
	#features .featuresBox .bgword {
		font-size: 18vw;
		top: 8vw;
		letter-spacing: 0;
	}
	#features .featuresInner .headline3 {
		margin-top: 1em;
	}
	#features .featuresInner .flowpic {
		padding: 1em;
		margin: 1em 0 2em;
	}
	#features .toolVideo .col2video {
		flex-direction: column;
		justify-content: center;
		width: 100%;
		margin: 0 auto;
	}
	#features .toolVideo .col2video li {
		width: 100%;
		margin-bottom: 1em;
	}
	#features .toolVideo .caption{
		text-align: left;
	}
	#features .featuresBox .platform {
		flex-direction: column;
		justify-content: center;
		width: 94%;
		margin: 0 auto;
	}
	#features .featuresBox .platform .txt ,
	#features .featuresBox .platform .pic {
		width: 100%;
		margin-bottom: 1em;
	}
	#features .col3Area .featuresBox{
		width: 100%;
		padding: 1.5em;
		margin-bottom: 1em;
	}
	#features .col3Area .featuresBox .headline3{
		font-size: 1.2em;
		text-align: left;
	}
}


/* #features .user
------------------------------------------------------*/
#features .user {
	margin-top: 4em;
}
#features .user .headline2{
	font-size: 1.2em;
}
#features .user .topCom{
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
#features .user .topCom .number{
	color: #f13229;
	font-size: 2em;
	font-weight: 900;
	font-family: 'Oswald', 'Roboto', sans-serif;
}
#features .user .date{
	color: #666;
	font-size: 0.9em;
	text-align: center;
	margin: 0.8em 0 2em;
}
#features .user .graph {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
/*	margin: 2em 0 0;*/
}
#features .user .graph dl{
	width: 40%;
}
#features .user .graph dt{
	text-align: center;
}
#features .user .graph dt > span {
	color: #fff;
	font-weight: 700;
	display: inline-block;
	background-color: #234ab0;
	padding: .6em 1.3em .6em 1.2em;
	line-height: 1.2;
	border-radius: 30px;
}
#features .user .graph dd{
	height: 400px;
	text-align: center;
}
#features .user .graph .visualizer-front{
	width: 100%;
	height: 100%;
}
#features .user .bottomTxt{
	text-align: center;
}

@media only screen and (max-width:1024px) {
	#features .user {
		margin-top: 2em;
	}
	#features .user .graph  {
		flex-direction: column;
		justify-content: center;
		width: 100%;
		margin: 0 auto;
	}
	#features .user .graph dl{
		width: 100%;
/*		margin-top: 2em;*/
	}
	#features .user .graph dd{
		height: 40vw;
		min-height: 300px;
	}
	#features .user .bottomTxt{
		text-align: left;
	}
}



/*======================================================
	お客さまの声 / customerVoice
================================================*/
#customerVoice {
	background: #ddfadf url("../img/bg_voice.png") no-repeat 50% 60%;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
#customerVoice .customerBox {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
#customerVoice .customerBox .txt{
	width: 60%;
}
#customerVoice .customerBox .txt .customerData{
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 1px;
	padding: 0.2em 0.5em 0.4em 1em;
	margin-bottom: 1em;
	border-left: 8px solid #234ab0;
}
#customerVoice .customerBox .txt .customerData .name{
	font-size:1.4em;
}
#customerVoice .customerBox .pic {
	width: 35%;
}

@media only screen and (max-width:1024px) {
	#customerVoice .customerBox {
		flex-direction: column-reverse;
		justify-content: center;
		width: 100%;
		margin: 0 auto;
	}
	#customerVoice .customerBox .txt ,
	#customerVoice .customerBox .pic {
		width: 100%;
	}
	#customerVoice .customerBox .pic {
		margin-bottom: 1em;
	}
}



/*======================================================
	VPシリーズご案内 / vpMore
================================================*/
#vpMore {
	background-color: #ecf8ff;
}
#vpMore .lineupBox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#vpMore .lineupBox dl {
	flex-basis: 31%;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
}
#vpMore .lineupBox dt {
	color: #FFF;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.6;
	background-color: #234ab0;
	padding: 1em;
	text-align: center;
	min-height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#vpMore .lineupBox dd {
	text-align: center;
	padding: 1.5em 2em 1em;
	position: relative;
}
#vpMore .lineupBox dd:after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-color: #234ab0 transparent transparent;
	border-width: 12px 12px 0;
}
#vpMore .lineupBox dd .txt{
	font-weight: 700;
	min-height: 70px;
	margin-bottom: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
}
#vpMore .lineupBox dd .btnType02 a{
	width: 100%;
	letter-spacing: 0;
}
/*green*/
/*
#vpMore .lineupBox dd .btnType02 a *,
#vpMore .lineupBox dd .btnType02 i:before{
	transition:0s;
}
#vpMore .lineupBox dd .btnType02 a:hover{
	background: #00d11e;
	border-color: #00d11e;
	transition: all 0.5s ease 0s;
}
*/

@media only screen and (max-width:1024px) {
	#vpMore .lineupBox {
		flex-direction: column;
		justify-content: center;
		margin: 0 auto;
	}
	#vpMore .lineupBox dl{
		width: 100%;
		margin-bottom: 1.5em;
		padding-bottom:0.5em;
	}
	#vpMore .lineupBox dt,
	#vpMore .lineupBox dd .txt{
		min-height:inherit;
	}
}



/*======================================================
	お問い合わせボタン帯 / btnArea
================================================*/
.btnArea {
	background-color:#a9e8ff;
	text-align: center;
	padding: 4% 8% 4%;
}
@media only screen and (max-width:1024px) {
	.btnArea{
		padding: 2em 6% 2em;
	}
}



/*======================================================
	お問い合わせ / contact
================================================*/
/* .txtLink
------------------------------------------------------*/
#contactSec .txtLink {
	border-bottom: 1px solid #000;
	color: inherit !important;
}
#contactSec .txtLink:hover {
	border-bottom: 0;
}
/* .cautionBox
------------------------------------------------------*/
#contactSec .cautionBox { color: #C00; }
#contactSec .cautionBox {
	display: flex;
	justify-content: center;
	padding: 2em 1em 2em 2em;
	border: 1px solid #C00;
}
#contactSec .cautionBox li {
	margin-bottom: 0 !important;
	text-indent: -1em;
}
#contactSec .cautionBox li:before { content: "※"; }
@media only screen and (max-width:1024px) {
	#contactSec .cautionBox {
		padding-top: 1em;
		padding-bottom: 1em;
	}
}
/* #contactSec
------------------------------------------------------*/
#contactSec {
	padding: 5em 0;
	background-color:rgba(78,186,255,0.8);
}
#contactSec .baseWidth {
	padding:0 2%;
}
#contactSec .headline{
	margin-bottom:0.5em;
}
#contactSec .contactInner {
	background-color: #FFF;
	padding:0 4% 3%;
	border-radius: 10px;
}
#contactSec .contactInner.pageThanks {
	padding:5% 4% 3%;
}
#contactSec .txt {
	margin-bottom: 2em;
	text-align: center;
}



@media only screen and (max-width:768px) {
	#contactSec .baseWidth {
		padding:0 4%;
	}
	#contactSec .headline{
		font-size:1.8em;
	}
	#contactSec .txt,
	#contactSec .cautionBox {
		text-align: left;
	}
	#contactSec .txt br { display: none; }
}