@charset "utf-8";

@media only screen and (max-width:991px) {}
@media only screen and (max-width:767px) {}
@media only screen and (max-width:374px) {}


#wrapper .fixedBg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: block;
	content: '';
	background: url(../images/top/lead_bg.jpg) no-repeat center center;
	background-size: cover;
	z-index: 1;
}
#wrapper .fixedBg video {
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: 100%;
	/*min-width: 100%;*/
	/*min-height: 100%;*/
	display: block;
	/*transform: translate(-50%,-50%);*/
}
@media only screen and (max-width:767px) {
	#wrapper .fixedBg {
		background-image: url(../images/top/lead_bg_sp.jpg);
	}
}

/*************************************************

 header head

*************************************************/
#header {
	transform: translateY(-101%);
	transition: 0.3s;
}
@media only screen and (max-width:767px) {
	#header {
		transform: translateY(-150px);
	}
}
.visible #header.on {
	transform: translateY(-0);
}


/*************************************************

 container

*************************************************/

#container {
	position: relative;
	padding-top: 0;
	z-index: 2;
}

#footer,
.commonBeneath {
	position: relative;
	z-index: 2;
}





/*************************************************

 spMenu

*************************************************/
#spMenu {
	position: absolute;
	transition-duration: 0.3s;
	transition-delay: 0.8s;
	transform: translateY(-150px);
}
.open #spMenu {
	position: fixed;
}
.visible #spMenu {
	transform: translateY(0);
}
#spMenu span,
#spMenu:before,
#spMenu:after {
	background-color: #fff;
}
@media only screen and (min-width:768px) {
	#spMenu {
		top: 30px;
		right: 30px;
		display: block;
	}
	#spMenu span,
	#spMenu:before,
	#spMenu:after {
		background-color: #fff;
	}
}


/*************************************************

 spMenu02

*************************************************/
#spMenu02 {
	display: none;
	position: fixed;
	transition-duration: 0.3s;
	transform: translateY(-150px);
}
.visible #spMenu02.on {
	transform: translateY(0);
}
@media only screen and (max-width:767px) {
	#spMenu02 {
		display: block;
	}
}



/*************************************************

 mainVisual

*************************************************/
#mainVisual {
	position: relative;
	width: 100%;
	height: 100vh;
}
#mainVisual:before {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	border: #fff solid 20px;
	z-index: 2;
}
#mainVisual .bg {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	z-index: 1;
}
#mainVisual .bg video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	display: block;
	transform: translate(-50%,-50%);
}
#mainVisual .logo {
	position: absolute;
	top: 45px;
	left: 60px;
	z-index: 3;
}
#mainVisual .title {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	transform: translateY(-50%);
	z-index: 3;
}
#mainVisual .title img {
	width: 80%;
	max-width: 475px;
}

#mainVisual .scroll {
	position: absolute;
	top: 50%;
	right: 30px;
	color: #fff;
	line-height: 1;
	font-size: 12px;
	margin-top: -100px;
	z-index: 4;
}
#mainVisual .scroll .txt {
	transform: rotate(90deg);
}
#mainVisual .scroll .border {
	position: absolute;
	top: 40px;
	left: 50%;
	width: 1px;
	height: 155px;
	display: block;
	content: '';
	background-color: #fff;
	clip:rect(0px,1px,0px,0px);
	animation-name: clipAnime01;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
}
@media only screen and (max-width:767px) {
	#mainVisual:before {
		border-width: 10px;
	}
	#mainVisual .logo {
		top: 20px;
		left: 20px;
	}
	#mainVisual .logo img {
		width: 95px;
	}
	#mainVisual .scroll {
		position: absolute;
		top: auto;
		bottom: 60px;
		right: auto;
		left: 50%;
		font-size: 8px;
		margin-top: 0;
		transform: translateX(-50%);
	}
	#mainVisual .scroll .txt {
		transform: rotate(0);
	}
	#mainVisual .scroll .border {
		top: 15px;
		height: 25px;
		animation-name: clipAnime01_sp;
	}
}

@keyframes clipAnime01 {
	0% {
		clip:rect(0px,1px,0px,0px);
	}
	40% {
		clip:rect(0,1px,155px,0);
	}
	60% {
		clip:rect(0,1px,155px,0);
	}
	100% {
		clip:rect(155px,1px,155px,0);
	}
}
@keyframes clipAnime01_sp {
	0% {
		clip:rect(0px,1px,0px,0px);
	}
	40% {
		clip:rect(0,1px,25px,0);
	}
	60% {
		clip:rect(0,1px,25px,0);
	}
	100% {
		clip:rect(25px,1px,25px,0);
	}
}




/*************************************************

 leadArea

*************************************************/
#leadArea {
	padding: 120px 0 140px;
	border-right: #fff solid 20px;
	border-left: #fff solid 20px;
}
#leadArea .inner {
	display: table;
	margin: 0 auto;
}
#leadArea .title {
	margin-bottom: 35px;
	font-size: 28px;
	font-weight: 700;
}
#leadArea p {
	font-size: 14px;
	line-height: 2.2;
}
#leadArea p + p {
	margin-top: 2.2em;
}
@media only screen and (max-width:767px) {
	#leadArea {
		padding: 70px 0;
		border-width: 10px;
	}
	#leadArea .title {
		margin-bottom: 30px;
		font-size: 17px;
	}
	#leadArea p {
		font-size: 13px;
	}
}



/*************************************************

 solutionArea

*************************************************/
#solutionArea {
	position: relative;
	padding-top: 150px;
	background-color: #fff;
	z-index: 2;
}
#solutionArea:before {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	content: '';
	width: 100%;
	height: 40px;
	background-color: #05569B;
	z-index: 1;
}
#solutionArea .wrap {
	position: relative;
	z-index: 2;
}
#solutionArea .title {
	margin-bottom: 70px;
	padding: 0 70px;
	color: #05569B;
	border-bottom: #E0E0E0 solid 1px;
}
#solutionArea .commonTitle01 {
	position: relative;
	display: table;
	padding-bottom: 30px;
}
#solutionArea .commonTitle01:before {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	content: '';
	width: 100%;
	height: 2px;
	background-color: #05569B;
	transform: translateY(85%);
}
#solutionArea .ttl {
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: 700;
}
#solutionArea p {
	color: #767676;
	font-size: 15px;
}
@media only screen and (max-width:767px) {
	#solutionArea {
		padding-bottom: 20px;
		padding-top: 120px;
	}
	#solutionArea:before {
		display: none;
	}
	#solutionArea .title {
		margin: 0 -12px 40px;
		padding: 0 12px;
	}
	#solutionArea .commonTitle01 {
		padding-bottom: 15px;
	}
	#solutionArea .commonTitle01 img {
		height: 28px;
	}
	#solutionArea .ttl {
		margin-bottom: 15px;
		font-size: 17px;
	}
	#solutionArea p {
		font-size: 14px;
	}
}


/* box01
-------------------------*/
#solutionArea .box01 {
	margin: 0 0 80px 70px;
}
#solutionArea .box01 p {
	margin-bottom: 45px;
}
#solutionArea .box01 .js-animeImage figure {
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-bottom: 240px;
}
#solutionArea .box01 .js-animeImage figure img {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	max-width: none;
	height: 100%;
}
@media only screen and (max-width:767px) {
	#solutionArea .box01 {
		margin: 0 0 50px 0;
	}
	#solutionArea .box01 .js-animeImage {
		margin-right: -20px;
	}
	#solutionArea .box01 .js-animeImage figure {
		padding-bottom: 180px;
	}
	#solutionArea .box01 .js-animeImage figure img {
		left: auto;
		right: 0;
		width: 100%;
		height: auto;
	}
}

/* box02
-------------------------*/
#solutionArea .box02 {
	display: flex;
	justify-content: space-between;
	max-width: 1100px;
}
#solutionArea .box02 .texts {
	width: 36.3636%;
	margin-top: 40px;
	order: 2;
}
#solutionArea .box02 .js-animeImage {
	width: 56.6364%;
	order: 1;
}
#solutionArea .box02 .btn {
	margin-top: 45px;
	max-width: 300px;
}
@media only screen and (max-width:767px) {
	#solutionArea .box02 {
		display: block;
	}
	#solutionArea .box02 .texts {
		width: auto;
		margin: 0 0 50px;
	}
	#solutionArea .box02 .js-animeImage {
		width: auto;
		margin-right: -20px;
	}
	#solutionArea .box02 .btn {
		margin-top: 45px;
		max-width: none;
	}
}



/*************************************************

 developmentArea

*************************************************/
#developmentArea {
	margin-top: -40px;
	padding: 200px 0 100px;
	color: #fff;
	background-color: #05569B;
}
#developmentArea .wrap {
	max-width: 1100px;
}
#developmentArea .title {
	margin-bottom: 60px;
}
#developmentArea a {
	text-decoration: none;
}
#developmentArea .title small {
	/*padding-bottom: 10px;*/
}
#developmentArea .ttl {
	margin-bottom: 15px;
	font-size: 24px;
	font-weight: 700;
}
#developmentArea .list {
	display: flex;
	justify-content: center;
	margin: 55px 0 160px -30px;
}
#developmentArea .list li {
	position: relative;
	box-sizing: border-box;
	width: 33.3333%;
	padding-left: 30px;

    position: relative;

    .btn {
        width: 185px;
        margin: 20px auto 0;
        position: absolute;
        bottom: -80px;
        left: 50%;
        margin-left: -92.5px;

        a {
            background-color: #ffffff;

            & > span {
                transition: 0.3s;
            }

            &:hover {
                background-color: #05569B;
                opacity: 1;

                & > span {
                    border: #ffffff solid 2px;
                }
            }
        }
    }
}
#developmentArea .list li a.link-post {
	box-sizing: border-box;
	height: 100%;
	display: block;
	color: #fff;
	padding-bottom: 20px;
/* 	border-bottom: #fff solid 2px; */
}
#developmentArea .list .js-animeImage {
	margin-bottom: 15px;
}
#developmentArea .list .cat {
	margin-bottom: 5px;
}
#developmentArea .list .cat span {
	display: inline-block;
	padding: 0 15px;
	margin: 0 5px 5px 0;
	font-size: 11px;
	border: #fff solid 1px;
	border-radius: 20px;
}
#developmentArea .list .inTtl {
	font-weight: 700;
	line-height: 1.5;
}
#developmentArea .btn {
	max-width: 350px;
	margin: 80px auto 0;
}
@media only screen and (max-width:767px) {
	#developmentArea {
		margin-top: 0;
		padding: 100px 0 50px;
	}
	#developmentArea .title {
		margin-bottom: 45px;
	}
	#developmentArea .title img {
		height: 35px;
	}
	#developmentArea .title small {
		/*padding-bottom: 6px;*/
	}
	#developmentArea .ttl {
		font-size: 17px;
	}
	#developmentArea .list {
		display: block;
		margin: 50px 0 0;
	}
	#developmentArea .list li {
		width: auto;
		padding-left: 0;
	}
	#developmentArea .list li + li {
		margin-top: 40px;
        margin-top: 120px;
	}
	#developmentArea .list .cat {
		margin-bottom: 2px;
	}
	#developmentArea .btn {
		margin-top: 140px;
	}
}


/*************************************************

 serviceArea

*************************************************/

#serviceArea {
	padding: 150px 0;
	background-color: #fff;
}
#serviceArea .title {
	margin-bottom: 70px;
	padding: 0 70px;
	color: #05569B;
	border-bottom: #E0E0E0 solid 1px;
}
#serviceArea .commonTitle01 {
	position: relative;
	display: table;
	padding-bottom: 30px;
}
#serviceArea .commonTitle01:before {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	content: '';
	width: 100%;
	height: 2px;
	background-color: #05569B;
	transform: translateY(85%);
}
#serviceArea .list {
	display: flex;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
}
#serviceArea .list li {
	width: 48.82%;
	text-align: center;
}
#serviceArea .list .inttl {
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 700;
}
#serviceArea .list p {
	color: #767676;
	font-size: 15px;
}
#serviceArea .list .btn {
	max-width: 185px;
	margin: 40px auto 0;
}
#serviceArea .list li.serviceBox {
	width: 100%;
	display: flex;
}
#serviceArea .list li.serviceBox .serviceBox-text {
	text-align: left;
    padding: 24px 0 0 40px;
}
#serviceArea .list li.serviceBox .serviceBox-text .btn {
	margin: 40px 0;
}


@media only screen and (max-width:767px) {
	#serviceArea {
		padding: 110px 0 70px;
	}
	#serviceArea .title {
		margin: 0 -12px 50px;
		padding: 0 12px;
	}
	#serviceArea .commonTitle01 {
		padding-bottom: 15px;
	}
	#serviceArea .commonTitle01 img {
		height: 28px;
	}
	#serviceArea .list {
		display: block;
	}
	#serviceArea .list li {
		width: auto;
	}
	#serviceArea .list li + li {
		margin-top: 70px;
	}
	#serviceArea .list figure {
		margin-bottom: 5px;
	}
	#serviceArea .list p {
		font-size: 13px;
	}
	#serviceArea .list .btn {
		margin-top: 25px;
	}
	#serviceArea .list li.serviceBox {
		display: block;
	}
	#serviceArea .list li.serviceBox .serviceBox-text {
		text-align: center;
		padding: 0;
	}
	#serviceArea .list li.serviceBox .serviceBox-text .btn {
		margin: 40px auto 16px;
	}
}





/*************************************************

 aboutArea

*************************************************/
#aboutArea {
	padding: 120px 0;
	background-color: #F7F7F7;
}
#aboutArea .wrap {
	max-width: 1100px;
}
#aboutArea .title {
	margin-bottom: 35px;
}
#aboutArea p {
	font-size: 15px;
}
#aboutArea .list {
	margin-top: 75px;
}
#aboutArea .list li + li {
	margin-top: 55px;
}
#aboutArea .list a {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 50px;
	color: #fff;
	text-decoration: none;
	background: no-repeat center center;
	background-size: cover;
	line-height: 1;
}
#aboutArea .list a:before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: rgb(30,45,138);
	background: -moz-linear-gradient(left,  rgba(30,45,138,1) 0%, rgba(0,80,149,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(30,45,138,1) 0%,rgba(0,80,149,1) 100%);
	background: linear-gradient(to right,  rgba(30,45,138,1) 0%,rgba(0,80,149,1) 100%);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.2, 0.05, 1);
	transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.2, 0.05, 1);
	-o-transition: transform 0.4s cubic-bezier(0.4, 0.2, 0.05, 1);
	transition: transform 0.4s cubic-bezier(0.4, 0.2, 0.05, 1);
	transition: transform 0.4s cubic-bezier(0.4, 0.2, 0.05, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0.2, 0.05, 1);
	opacity: 0.8;
}
#aboutArea .list .ttl {
	box-sizing: border-box;
	position: relative;
	max-width: 320px;
	height: 134px;
	margin: 0 auto;
	padding: 13px;
	font-size: 24px;
	font-weight: 700;
	border: #fff solid 2px;
	z-index: 2;
}
#aboutArea .list .ttl:before {
	position: absolute;
	bottom: 15px;
	right: 40px;
	display: block;
	content: 'View More';
	font-size: 14px;
	font-weight: 500;
}
#aboutArea .list .ttl:after {
	position: absolute;
	bottom: 20px;
	right: 18px;
	display: block;
	content: '';
	width: 14px;
	height: 1px;
	background-color: #fff;
}

.noT #aboutArea .list a:hover:before {
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1);
}

#aboutArea .list li:nth-child(1) a { background-image: url(../images/top/about_img01.jpg); }
#aboutArea .list li:nth-child(2) a { background-image: url(../images/top/about_img02.jpg); }
#aboutArea .list li:nth-child(3) a { background-image: url(../images/top/about_img03.jpg); }
#aboutArea .list li:nth-child(4) a { background-image: url(../images/top/about_img04.jpg); }



@media only screen and (max-width:767px) {
	#aboutArea {
		padding: 100px 0 60px;
	}
	#aboutArea .title {
		margin-bottom: 25px;
	}
	#aboutArea p {
		font-size: 13px;
	}
	#aboutArea .commonTitle01 img {
		height: 28px;
	}
	#aboutArea .list {
		margin-top: 35px;
	}
	#aboutArea .list li + li {
		margin-top: 20px;
	}
	#aboutArea .list a {
		padding: 35px;
	}
	#aboutArea .list .ttl {
		max-width: 180px;
		height: 90px;
		padding: 6px;
		font-size: 17px;
	}
	#aboutArea .list .ttl:before {
		bottom: 10px;
		right: 27px;
		font-size: 11px;
	}
	#aboutArea .list .ttl:after {
		bottom: 13px;
		right: 10px;
		width: 10px;
	}
	#aboutArea .list li:nth-child(1) a { background-image: url(../images/top/about_img01_sp.jpg); }
	#aboutArea .list li:nth-child(2) a { background-image: url(../images/top/about_img02_sp.jpg); }
	#aboutArea .list li:nth-child(3) a { background-image: url(../images/top/about_img03_sp.jpg); }
	#aboutArea .list li:nth-child(4) a { background-image: url(../images/top/about_img04_sp.jpg); }
}





/*************************************************

 topicsArea

*************************************************/
#topicsArea {
	position: relative;
	padding: 150px 0;
	background-color: #fff;
}
#topicsArea .title {
	margin-bottom: 70px;
	padding: 0 70px;
	color: #05569B;
	border-bottom: #E0E0E0 solid 1px;
}
#topicsArea .commonTitle01 {
	position: relative;
	display: table;
	padding-bottom: 30px;
}
#topicsArea .commonTitle01:before {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	content: '';
	width: 100%;
	height: 2px;
	background-color: #05569B;
	transform: translateY(85%);
}
#topicsArea .commonTitle01 small {
	padding-bottom: 10px;
}
#topicsArea .inner {
	max-width: 1100px;
	margin: 0 auto;
}
@media only screen and (max-width:767px) {
	#topicsArea {
		padding: 100px 0 90px;
	}
	#topicsArea .title {
		margin: 0 -12px 40px;
		padding: 0 12px;
	}
	#topicsArea .commonTitle01 {
		padding-bottom: 15px;
	}
	#topicsArea .commonTitle01 img {
		height: 35px;
	}
	#topicsArea .commonTitle01 small {
		padding-bottom: 5px;
	}
}


/* list
-------------------------*/
#topicsArea .list {
	float: left;
	width: calc(100% - 350px);
}
#topicsArea .list li {
	border-bottom: #E0E0E0 solid 1px;
}
#topicsArea .list li:first-child a {
	padding-top: 0;
}
#topicsArea .list li a {
	display: block;
	padding: 30px 0;
	color: #333;
	text-decoration: none;
}
#topicsArea .list .meta {
	overflow: hidden;
}
#topicsArea .list .meta > * {
	float: left;
	margin: 0 15px 10px 0;
	line-height: 21px;
}
#topicsArea .list .date {
	color: #767676;
	font-size: 14px;
}
#topicsArea .list .cat {
	width: 130px;
	color: #fff;
	font-size: 12px;
	background-color: #05569B;
	text-align: center;
}
#topicsArea .list .ttl {
	font-size: 15px;
	font-weight: 500;
}
#topicsArea .list .btn {
	max-width: 210px;
	margin-top: 70px;
}
#topicsArea .list .btn .commonBtn02 > span {
	height: 70px;
}
@media only screen and (max-width:767px) {
	#topicsArea .list {
		float: none;
		width: auto;
		margin-bottom: 60px;
	}
	#topicsArea .list li a {
		padding: 25px 0;
	}
	#topicsArea .list .meta > * {
		margin-right: 7px;
		line-height: 18px;
	}
	#topicsArea .list .cat {
		width: 90px;
		font-size: 11px;
	}
	#topicsArea .list .ttl {
		font-size: 13px;
	}
	#topicsArea .list .btn {
		max-width: none;
		margin-top: 60px;
	}
}

/* fbs
-------------------------*/
#topicsArea .fbs {
	position: relative;
	float: right;
	max-width: 300px;
}
@media only screen and (max-width:767px) {
	#topicsArea .fbs {
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (max-width:340px) {
	#topicsArea .fbs {
		height: 470px;
	}
	#topicsArea .fbs iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
}