@charset "UTF-8";
/*- 202003 MD ----------------*/

.pc_only{display:inline-block;}
.m_only{display:none;}
.block.m_only{display:none}

.hide{display:none;opacity:0;visibility:hidden;}
.block{display:block;margin:0 auto;width:100%}
.w_s{margin:0 auto;padding:5rem 0 ;max-width:1000px}
#concept p,#why_m p,#tokutei p{text-align: justify;}

#tokutei,#why_m{font-size:1rem;background:#03257E;color:#fff}
#tokutei h2,#why_m h2{color:#fff;}
#tokutei h5{font-size:1rem;margin-top:3rem}
#concept,#buisiness{padding-top:0;}

#top .bannerContainer{margin-top:0 !important;}

#system_network {background-color:#03257E;color:#fff;}
#system_network p{text-align:justify;}
#system_network h2{color:#fff;}
#system_network .sys_net_diagram{background:#fff;padding:5rem 5rem}
@media only screen and (max-width:1050px){
	.w_s{width:90%;}
	#concept{margin-top:-10rem}
	#system_network .sys_net_diagram{padding:0}

}

@media only screen and (max-width:768px){
	.pc_only{display:none;}
	.m_only{display:block;}
	.block.m_only{display:block;}

}

@media only screen and (max-width:650px){
	#footer .logo{margin-right:10px}
}


/*---------------------------*/

#selector .selector{display: none;}
#top .catch
{
	position: absolute;
	min-width: 20rem;
	box-sizing:border-box;
	padding: 2rem 0 2rem 2rem;
	background-color: rgb(218, 5yyyyyyyyyy, 50);

	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;

	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	top: 50%;
	margin-top: -7rem;
	
}

#top .catch p
{
	color: white;
	border-bottom: 1px solid;
	padding-right: 2rem;
}

#top .catch h5
{
	font-family: 'Roboto-B', 'GG-B', sans-serif;
	font-weight: 700;
	font-size: 2.5rem;
	margin-top: .75em;
	color: white;
	padding-right: 2rem;
	line-height: 1.2;
}

#top .catch h5 span
{
	display: block;
}

/**********************************************************************/
/******************************* BANNER *******************************/
/**********************************************************************/

a#entBt
{
	position: absolute;
	display: none;
	cursor: pointer;
	bottom: 0;
	width: 1rem;
	left: 2rem;
	margin-top: calc(-2em - 100px);
	z-index: 9998;
	height: calc(100px + 4.5em);
	background-color: rgba(255, 0, 0, 0);
}

a#entBt p
{
	font-family: 'Roboto-B', 'GG-B', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .8em;
	color: white;
	position: absolute;
	transform: rotate(90deg);
	transform-origin: center left;
	top: 0;
	left: 50%;
}

a#entBt span {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 100px;
	border-left: 1px solid #fff;
	box-sizing: border-box;
}
a#entBt span::before {
	position: absolute;
	top: 0px;
	left: 50%;
	content: '';
	width: 2px;
	height: 100px;
	margin-left: -2px;
	background-color: #fff;
	animation: sdb10 5s infinite;
	box-sizing: border-box;
}

@keyframes sdb10 {
	0%
	{
		transform: scale(1, 0);
		opacity: 0;
	}
	20%
	{
		transform: scale(1, 0);
		opacity: 1;
		transform-origin: center top;
	}
	40%
	{
		transform: scale(1, 1);
		opacity: 1;
		transform-origin: center top;
	}
	60%
	{
		transform: scale(1, 1);
		opacity: 1;
		transform-origin: center bottom;
	}
	80%
	{
		transform: scale(1, 0);
		transform-origin: center bottom;
		opacity: 1;
	}
	100% 
	{
		transform: scale(1, 0);
		opacity: 0;
	}
}

#top
{
	position: relative;
	height: 100vh;
	width: 100%;
}

#topSlide
{
	position: fixed;
	height: 100vh;
	width: 100%;
/*	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;*/
}

.top .slideFadeContainer
{
	background-color: white;
/*	position: fixed;*/
	top: 0;
	height: 100vh;
	z-index: 0;
}

.slideFadeContainer.start
{
	-webkit-filter: blur(0px);
	filter: blur(0px);
	opacity: 1;
	height: 100vh;
	
	-webkit-transition: opacity 1.0s ease, -webkit-filter 1.0s ease;
	-moz-transition: opacity 1.0s ease, filter 1.0s ease;
	-ms-transition: opacity 1.0s ease, filter 1.0s ease;
	-o-transition: opacity 1.0s ease, filter 1.0s ease;
	transition: opacity 1.0s ease, filter 1.0s ease;
}

/**********************************************************************/
/******************************* CONTENTS ****************************/
/**********************************************************************/

.secWrapper
{
	font-size: 1rem;
	padding: 4rem 0;
	position: relative;
	box-sizing: border-box;
	
	border-bottom: 1px solid rgb(200, 200, 200);
	
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
}

.secWrapper._c
{
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.secWrapper:last-child
{
	border-bottom-width: 0px;
}

.sectionTitle
{
	font-family: 'Roboto-B', 'GG-B', sans-serif;
	font-weight: 700;
	color: #03257E;
	line-height: 1.5;
}

.sectionTitle._b
{
	color: #03257E;
}

h2.sectionTitle
{
	font-size: 1.4rem;
	margin-bottom: 2rem;
}

h2.sectionTitle span
{
	font-size: 1.2rem;
	margin-left: 2em;
}

.secWrapper .descWrapper{width:50%;}
.secWrapper .photoWrapper{width:40%;}

.secWrapper .descWrapper > p + p
{
	margin-top: 2em;
}

.secWrapper .photoWrapper .photo
{
	position: relative;
	box-sizing: border-box;
	border:1px solid #ccc;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: rgba(0, 0, 0, .2);
	
}

.secWrapper .photoWrapper .photo:after
{
	content: "";
	position: relative;
	display: block;
	width: 100%;
	padding-top: 64%;
}

.secWrapper .photoWrapper .photo._1{background-image: url(../_img/img_1.jpg?ver=1.0);}
.secWrapper .photoWrapper .photo._2{background-image: url(../_img/img_2.jpg?ver=1.0);}
.secWrapper .photoWrapper .photo._3{background-image: url(../_img/img_3.jpg?ver=1.0);}
.secWrapper .photoWrapper .photo._4{background-image: url(../_img/img_4.jpg?ver=1.0);}
.secWrapper .photoWrapper .photo._5{background-image: url(../_img/img_5.jpg?ver=1.0);}
.secWrapper .photoWrapper .photo._6{background-image: url(../_img/img_6.jpg?ver=1.0);}
.secWrapper .photoWrapper .photo._7{background-image: url(../_img/img_7.jpg?ver=1.0);}


.secWrapper._a .descWrapper, .secWrapper._b .photoWrapper
{
	margin-right: 5.5%;
	margin-left: 2%
}
.secWrapper._a .photoWrapper, .secWrapper._b .descWrapper
{
	margin-left: 7.5%;
}

#concept{
	font-size:1rem;
	padding: 4rem 0;
	background-color:#fff;
}

#buisiness
{
	padding: 5.5rem 0 6.5rem;
	background-color: rgba(0, 100, 200, .1);
}

#buisiness .diagramWrapper
{
	margin-top: 3rem;
	padding-left: 0/*1rem*/;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	flex-wrap: wrap;
	
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#buisiness .diagram
{
	width: calc( 100% / 6 - 2rem);
	background-color: #03257E;
	border-radius: 50%;

	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	-webkit-align-items: center;
	align-items: center;
}

#buisiness .diagram:after
{
	content:"";
	position: relative;
	width: 100%;
	padding-top: 100%;
}

#buisiness .diagram > p
{
	color: #fff;
	/*font-family: 'Roboto-B', 'GG-B', sans-serif;*/
	font-weight: 500;
	font-size: 1rem;
	text-align: center;
	line-height: 1;
	position: absolute;
	width: 100%;
	top: calc(50% - .5em);
}
#buisiness .diagram.line2 p{ line-height:1.5em;margin-top:-1em;}

#buisiness .bg
{
	position: absolute;
	bottom: -1rem;
	border-radius: 1rem;
	left: 0;
	background-color: rgba(0, 100, 200, .5);
	z-index: 0;
	width: calc( (100% + 1rem) / 5 * 3);
}

#buisiness .bg:after
{
	content:"";
	display: block;
	position: relative;
	width: 100%;
	padding-top: 33%;
}

#buisiness .catch
{
	position: absolute;
	bottom: 1rem;
	border-radius: 0rem;
	left: 0;
	background-color: rgba(0, 100, 200, .5);
	width: calc( (100% + 1rem) / 5 * 3);
}

#buisiness .catch > p
{
	color: rgba(255, 255, 255, 1);
	font-family: 'Roboto-B', 'GG-B', sans-serif;
	font-weight: 700;
	color: white;
	font-size: 1rem;
	padding: .5em 0;
	text-align: center;
}

.caution
{
	background-color: rgba(0, 100, 200, .1);
	padding: .1em 1em;
	text-align: center;
}

.contact
{
	border-top: 1px solid rgb(200, 200, 200);
	padding-top: 5rem;
	margin-bottom: 5rem;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;

	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	
	-webkit-justify-content: center;
	justify-content: center;

	-webkit-align-items: center;
	align-items: center;
}

.contact .mail
{
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	background-color: #03257E;
	border-radius: .5em;
	color: #ffffff;
	font-size: 1.5rem;
	font-family: 'Roboto-B', 'GG-B', sans-serif;
	font-weight: 700;
	padding: .5em 1em;
	padding-left: 4rem;
}

.contact .mail:before
{
	content:"";
	display: block;
	position: absolute;
	width: 2rem;
	height: 2rem;
	left: 1rem;
	top:1rem;
	background-size: cover;
	background-position: 50% 50%;
}
.svg .contact .mail:before{background-image: url(../_img/contact.svg);}
.no-svg .contact .mail:before{background-image: url(../_img/contact.png);}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and  (max-width: 1200px)
{
	#buisiness .diagram > p
	{
		font-size: 1rem;
	}
	#buisiness .diagram
	{
		width: calc( 100% / 6 - 1.8rem);
	}
	#buisiness .catch
	{
		bottom: 0;
	}
	#buisiness .catch > p
	{
		font-size: .8rem;
	}
	#concept,#buisiness{padding-top:0;}
}

@media screen and  (max-width: 900px)
{
	#top .catch
	{
		width: 100%;
		height: auto;
		top: 0;
		margin-top: 0;
		padding: 1rem 2rem;
	}
	#top .catch h5 span
	{
		display: inline;
	}

	#top .catch h5
	{
		font-size: 2rem;
		margin-top: .5em;
	}

	#buisiness
	{
		padding-bottom: 2rem;
	}
	#buisiness .diagramWrapper
	{
		padding-left: 0;
		-webkit-justify-content: center;
		justify-content: center;
	}
	#buisiness .bg
	{
		width: 100%;
		top: 5rem;
		bottom: auto;
	}
	#buisiness .bg:after
	{
		padding-top: 35%;
	}
	#buisiness .catch
	{
		width: 100%;
		bottom: auto;
		top: calc(50% - 2rem);
	}
	#buisiness .diagram > p
	{
		font-size: 1rem;
	}
	#buisiness .diagram
	{
		width: calc( 100% / 3 - 1rem);
		margin: .5rem;
	}
	#buisiness .diagram:nth-child(4), #buisiness .diagram:nth-child(5), #buisiness .diagram:nth-child(6)
	{
		margin-top: 2rem;
	}
	#buisiness .catch > p
	{
		font-size: 1rem;
	}
	
	.secWrapper
	{
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	.secWrapper .descWrapper, .secWrapper .photoWrapper
	{
		width: 100%;
	}
	
	.secWrapper._a .descWrapper, .secWrapper._b .photoWrapper
	{
		margin-right: 0rem;
		margin-bottom: 2rem;
		width:100%;
		margin:0 auto;
	}
	.secWrapper._a .photoWrapper, .secWrapper._b .descWrapper
	{
		margin-left: 0rem;
		margin-top: 2rem;
	}
}

@media screen and  (max-width: 700px)
{
	#buisiness .catch > p
	{
		font-size: .8rem;
	}
	#buisiness .catch > p span
	{
		display: block;
		text-align: center;
	}
}

@media screen and  (max-width: 650px)
{
	.secWrapper,#concept, #buisiness,#why_m,#tokutei
	{
		padding: 4rem 2rem;
	}
	#system_network .w_s{padding:4rem 2rem}
	.sys_net_diagram .w_s{padding:4rem 0rem !important}
	#concept,#buisiness{padding-top:0;}
}

@media screen and (max-width: 450px)
{
	.sectionTitle > span
	{
		display: block;
	}
	h2.sectionTitle span
	{
		margin-left: 0;
	}

	#buisiness .bg:after{padding-top: 49%;}
	#buisiness .bg{top: 7rem;}
	#buisiness .catch{top: calc(50% + .5rem);}
	#buisiness .diagram:nth-child(4), #buisiness .diagram:nth-child(5){margin-top: 4rem;}
	
	#contact .tel span:last-child
	{
		display: block;
		margin-left: 0;
	}
}

@media screen and (max-width: 350px)
{
	.contact .mail
	{
		font-size: 1rem;
	}
	.contact .mail:before
	{
		width: 1.5rem;
		height: 1.5rem;
		top: .6rem;
	}
}