@charset "utf-8";
/* Copyright 2020 FSFIELD All Rights Reserved. */

@keyframes main_scroll{
	0%{transform: scale(1, 0);transform-origin: 0 0;}
	50%{transform: scale(1, 1);transform-origin: 0 0;}
	50.1%{transform: scale(1, 1);transform-origin: 0 100%;}
	100%{transform: scale(1, 0);transform-origin: 0 100%;}
}

@keyframes ttl_business_system{
	0%{transform: translate3d(0,0,0);}
	100%{transform: translate3d(-100%,0,0);}
}

@keyframes ttl_business_infra{
	0%{transform: translate3d(0,0,0);}
	100%{transform: translate3d(-657px,0,0);}
}


@media print, screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

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

	トップページ

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

	/* グローバルナビアクティブ
	---------------------------------------------- */
	#wrap_top{color: #FFF;}

	#header{
		width: 100%;
		min-width: 1200px;
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
	}

	.nav_global ul li a{color: #FFF;}

	.nav_global ul li.g06 a{
		color: #01a6de;
		background: #FFF;
	}

	.nav_global ul li.g06 a:hover{
		color: #FFF;
		background: #01a6de;
		opacity: 1;
	}

	/* メインビジュアル
	---------------------------------------------- */
	.main{
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 500px;
		height: 100vh;
		max-height: 1000px;
		background: url("../img/home/pc/img_main01.jpg") no-repeat center;
		background-size: cover;
		position: relative;
	}

	.main_inner{
		width: 100%;
		max-width: 1520px;
		color: #FFF;
		font-size: 1.8rem;
		font-weight: bold;
		padding-left: 70px;
		margin: 0 auto;
		z-index: 1;
	}

	.txt_main{
		width: 966px;
		height: 65px;
		background: url(../img/home/pc/txt_main01.svg) no-repeat center;
		margin-bottom: 17px;
    filter: drop-shadow(2px 4px 6px rgba(22, 91, 115, 0.3));
	}

	.txt_main span{display: none;}

	.scroll{
		margin-right: -36px;
		position: absolute;
		right: 50%;
		bottom: 30px;
	}

	.scroll a{
		display: inline-block;
		color: #FFF;
		font-size: 1.2rem;
		font-family: 'Josefin Sans';
		line-height: 1;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		padding: 8px 6px 65px;
		overflow: hidden;
		z-index: 2;
	}

	.scroll a::after{
		content: '';
		width: 1px;
		height: 60px;
		background: #FFF;
		position: absolute;
		bottom: 0;
		left: 50%;
	}

	.scroll a::after{animation: main_scroll 1.5s cubic-bezier(1, 0, 0, 1) infinite;}

	/* ビジネスドメイン
	---------------------------------------------- */
	.business{
		position: relative;
		padding-bottom: 160px;
	}
	
	.business .wrap_stripe{z-index: -1;}

	.business::before{
		content: "";
		display: block;
		width: 674px;
		height: 1153px;
		background: url(../img/home/pc/bg_decoration01.png) no-repeat center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
    pointer-events: none;
	}

	.business::after{
		content: "";
		display: block;
		width: 654px;
		height: 1133px;
		background: url(../img/home/pc/bg_decoration02.png) no-repeat center;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 1;
    pointer-events: none;
	}

	.business .heading01{
		color: #FFF;
		text-align: left;
		position: absolute;
		top: 115px;
		left: 50px;
	}

	.business .heading01 span{
		color: #0093db;
		margin-bottom: 20px;
		opacity: 1;
	}

	.wrap_scroll{display: none;}
	
	.business_inner{
		display: flex;
		position: relative;
		z-index: 2;
		padding: 0 10%;
    justify-content: center;
    gap: 32px;
	}
	
	.business_inner .inner{
    width: 25%;
    border-radius: 100%;
    overflow: hidden;
  }
	
	.business_inner .inner .b_inner{
		padding-top: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		font-size: 2rem;
		font-weight: bold;
		position: relative;
	}
	
	.business_inner .inner .b_inner div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.business_inner .inner .b_inner div img{
    width: calc(100% / 288 * 120);
		margin-bottom: 10px;
	}

  .business_inner .inner .b_inner div span{
    line-height: normal;
    text-align: center;
  }
	
	.txt_business{
		max-width: 960px;
		margin: 0 auto;
		font-size: 1.7rem;
		text-align: center;
		letter-spacing: 0.1em;
	}
	
	.txt_business p span{
		background: rgba(255,255,255,0.5);
		position: relative;
		z-index: 1;
	}

  .sec-morejapan{
    margin-top: 100px;
  }
  .sec-morejapan__logo{
    width: 520px;
    margin: 0 auto;
  }
  .sec-morejapan__logo img{
    width: 100%;
  }
  .sec-morejapan__txt{
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
    text-align: center;
  }
  .sec-morejapan__btn{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 40px;
  }
  .sec-morejapan__btn a{
    display: inline-block;
    font-size: 0;
    padding: 9px 24px;
    background-color: #FFF;
    border: 1px solid #00A6DE;
    border-radius: 44px;
  }
  .sec-morejapan__btn a .label{
    color: #00A6DE;
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    padding-right: 4px;
  }
  .sec-morejapan__btn a .icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -4px;
  }
  .sec-morejapan__btn a .icon svg{
    width: 100%;
    stroke: #00A6DE;
  }
  .sec-morejapan__btn a:hover{
    background-color: #00A6DE;
  }
  .sec-morejapan__btn a:hover .label{
    color: #FFF;
  }
  .sec-morejapan__btn a:hover .icon svg{
    stroke: #FFF;
  }
	
	/*--ウェブシステム開発--*/
	.sec_system{padding: 140px 0 0;}
	
	.sec_system .heading02{
		text-align: right;
		padding: 0 10%;
		margin-bottom: 45px;
		position: relative;
		z-index: 2;
	}
	
	.sec_system .heading02 span{
		font-size: 10.5vw;
		margin-right: -3px;
	}
	
	.sec_system .business_inner{margin-bottom: 35px;}
	
	.sec_system .b_inner.system01{background-image: url(../img/home/bg_system01.jpg);}
	.sec_system .b_inner.system02{background-image: url(../img/home/bg_system02.jpg);}
	.sec_system .b_inner.system03{background-image: url(../img/home/bg_system03.jpg);}
	.sec_system .b_inner.system04{background-image: url(../img/home/bg_system04.jpg);}
	
	/*--ITインフラ--*/
  .sec_infra{
    padding-top: 120px;
  }
	.sec_infra .heading02{
		padding: 0 10%;
		margin-bottom: 45px;
		position: relative;
		z-index: 2;
	}
	
	.sec_infra .heading02 span{
		font-size: 10.5vw;
		margin-left: -10px;
	}
	
	.sec_infra .b_inner{
		width: 100%;
		padding-top: 100%;
	}
	
	.sec_infra .b_inner.infra01{background-image: url(../img/home/bg_infra01.jpg);}
	.sec_infra .b_inner.infra02{background-image: url(../img/home/bg_infra02.jpg);}
	.sec_infra .b_inner.infra03{
		background-image: url(../img/home/bg_infra03.jpg);
		background-position: right 8% center;
	}
	
	.sec_infra .b_inner + p{
		padding-right: 20px;
		font-size: 1.7rem;
	}

	/* 会社概要
	---------------------------------------------- */
	.company{
		position: relative;
		background: #002a4c;
    padding-bottom: 40px;
	}
	
	.company_inner{
		height: 100%;
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.company_inner .heading01{
		width: 30%;
		padding-right: 10%;
		color: #FFF;
		text-align: right;
		margin-top: 263px;
	}
	
	.company_inner .heading01 span{
		font-size: 7.2rem;
		opacity: 0.2;
	}

	.c_inner{
		width: 70%;
		background: #EEE;
		padding: 160px 0 180px;
		margin-top: -40px;
		z-index: 1;
	}

	.c_inner .type01{
		min-width: 700px;
		width: 71.5%;
		margin: 0 auto;
	}
	
	.c .wrap_stripe .stripe .stripe_inner span{
		background: #333333;
		opacity: 1;
	}

	/* アクセス
	---------------------------------------------- */
	.access{
		position: relative;
		z-index: 1;
	}

	.access_inner{
		display: flex;
		justify-content: center;
		padding: 90px 10% 50px;
	}

	.access_inner .heading01{
    text-align: center;
		width: 25%
	}

	.a_inner{
		width: 75%;
		font-size: 1.7rem;
	}

	.a_inner p{padding-left: 45px;}
	
	.a_inner p.car{
		background: url(../img/ico_car01.png) no-repeat 0 center;
		background-size: 32px;
		margin-bottom: 30px;
	}

	.a_inner p.train{
		background: url(../img/ico_train01.png) no-repeat 4px center;
		background-size: 24px;
	}
	
	.access iframe{
		display: block;
		width: 100%;
		height: 640px;
	}
	
	.access .wrap_stripe{z-index: -1;}
	
	.map{
		width: 100%;
		padding-top: 33.33%;
		position: relative;
	}
	
	.map iframe{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	/* 採用情報・お問い合わせ
	---------------------------------------------- */
	.wrap_home02{
		background: #F7F7F7;
		position: relative;
	}
	
	.inner_type01{
		width: 1100px;
		background: #FFF;
		box-shadow: 5px 5px 15px 10px rgba(0,0,0,0.1);
		margin: 0 auto;
		z-index: 1;
	}

  .table-recruit ul>li>ul>li{
    line-height: normal;
    font-size: 16px;
    padding-left: 16px;
  }
	
	/* 採用情報
	---------------------------------------------- */
	.recruit{
		padding: 90px 0 45px;
		position: relative;
		z-index: 1;
	}

	.recruit .inner_type01{padding: 80px 165px 60px;}

	.ttl_recruit{
		color: #888;
		font-size: 3.6rem;
		font-weight: bold;
		font-family: 'Oswald';
		text-align: center;
		letter-spacing: 0.015em;
		border-bottom: 2px solid #DDD;
		padding-bottom: 10px;
		margin-bottom: 40px;
	}

	.ttl_recruit::after{
		content: "";
		display: block;
		width: 10px;
		height: 16px;
		background: url(../img/ico_decoration01.png) no-repeat center;
		margin: 0 auto;
	}

	.wrap_recruit01{margin-bottom: 55px;}
	
	.wrap_recruit02{
		background: #F5F5F5 url(../img/home/pc/bg_recruit01.jpg) no-repeat right center;
		background-size: contain;
		padding: 32px 35px;
	}

	.recruit_inner{display: flex;}

	.recruit_inner:first-child{margin-bottom: 7px;}

	.recruit_inner .txt{
		width: 130px;
		font-weight: bold;
		text-align: center;
		margin-right: 35px;
	}
	
	.type02 th{width: 140px;}

	/* お問い合わせ
	---------------------------------------------- */
	.contact{
		padding: 45px 0 140px;
		position: relative;
		z-index: 1;
	}

	.contact .inner_type01{padding: 65px 165px 80px;}

	/*--個人情報保護方針--*/
	#privacy{
		width: 100%;
		font-size: 1.4rem;
		height: 200px;
		border: 1px solid #DDDDDD;
		margin-bottom: 50px;
		overflow: hidden;
	}

	#privacy p{margin-bottom: 15px;}

	#privacy p:last-of-type{margin-bottom: 0;}

	.txt_privacy{
		font-size: 1.6rem;
		margin: 30px 0 3px;
	}

	.btn_form{text-align: center;}


}/*--@media--*/


@media only screen and (min-width:768px) and (max-width:1200px){ /* 表示領域が768px以上1200px以下の場合に適用するスタイル */

	/* ビジネスドメイン
	---------------------------------------------- */
	/*--ウェブシステム開発--*/
	.sec_system .heading02 span,
	.sec_infra .heading02 span{font-size: 12.5rem;}
	

}/*--@media--*/



@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

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

	トップページ

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

	/* グローバルナビアクティブ
	---------------------------------------------- */
	#wrap_top{color: #FFF;}

	#header{
		width: 100%;
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
	}

	/* メインビジュアル
	---------------------------------------------- */
	.main{
		position: relative;
		width: 100%;
		padding-top: 133.4%;
		background: url("../img/home/sp/img_main01.jpg") no-repeat center;
		background-size: cover;
	}

	.main_inner{
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		color: #FFF;
		font-size: 1.4rem;
		font-weight: bold;
		padding: 0 20px;
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
	}

	.txt_main{
    width: calc(100vw/375*332);
    padding-top: calc(100vw/375*85);
		background: url(../img/home/sp/txt_main01.svg) no-repeat center;
    background-size: contain;
		margin-bottom: 10px;
    filter: drop-shadow(0 2.3px 2.3px rgba(22, 91, 115, 0.3));
	}

	.txt_main span{display: none;}

	.scroll{display: none;}

	/* ビジネスドメイン
	---------------------------------------------- */
	.business{
		position: relative;
		padding: 130px 20px 80px;
	}
	
	.business .wrap_stripe{z-index: -1;}
	
	.business::before{
		content: "";
		display: block;
		width: 63.2%;
		padding-top: 96.27%;
		background: url(../img/home/sp/bg_decoration01.png) no-repeat center;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.business::after{
		content: "";
		display: block;
		width: 60.2%;
		padding-top: 90.94%;
		background: url(../img/home/sp/bg_decoration02.png) no-repeat center;
		background-size: cover;
		background-size: 100%;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: -1;
	}
	
	.business .heading01{
		max-width: 42%;
		color: #FFF;
		font-size: 1.8rem;
		letter-spacing: 0.075em;
		text-align: left;
		margin-bottom: 0;
		position: absolute;
		top: 25px;
		left: 20px;
	}

	.business .heading01 span{
		font-size: 3.2rem;
		color: #0093db;
		margin-bottom: 10px;
		opacity: 1;
	}
	
	.wrap_scroll{
		position: relative;
		height: 80px;
		margin-bottom: 10px;
		z-index: 2;
    font-size: 0;
	}

	.wrap_scroll .list_scroll{
		white-space: nowrap;
		position: absolute;
	}

	.wrap_scroll .list_scroll li{
		display: inline-block;
		color: #000;
		font-size: 8rem;
		font-weight: bold;
		font-family: 'Oswald';
		letter-spacing: 0.015em;
		white-space: nowrap;
		line-height: 1;
		opacity: 0.05;
    padding-left: 30px;
	}
	
	.business .heading02 span{display: none;}
	
	.business_inner .inner .b_inner{
		position: relative;
		font-size: 1.5rem;
		font-weight: bold;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	.business_inner .inner .b_inner div{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.business_inner .inner .b_inner div img{
		width: calc(100% / 160 * 72);
	}

  .business_inner .inner .b_inner div span{
    line-height: normal;
    text-align: center;
    font-size: calc(100vw/375*13);
  }
	
	.txt_business{
		letter-spacing: 0.1em;
		padding: 0 5px;
		margin-bottom: 60px;
	}
	
	.txt_business p br{display: none;}

  .sec-morejapan{
    
  }
  .sec-morejapan__logo{
    width: 86vw;
    margin: 0 auto;
  }
  .sec-morejapan__logo img{
    width: 100%;
  }
  .sec-morejapan__txt{
    font-size: calc(100vw/375*13);
    font-weight: bold;
    line-height: normal;
    text-align: center;
  }
  .sec-morejapan__btn{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: calc(100vw/375*30);
  }
  .sec-morejapan__btn a{
    display: inline-block;
    font-size: 0;
    padding:  calc(100vw/375*8) calc(100vw/375*21);
    background-color: #FFF;
    border: 1px solid #00A6DE;
    border-radius: 44px;
  }
  .sec-morejapan__btn a .label{
    color: #00A6DE;
    font-size: calc(100vw/375*13);
    font-weight: bold;
    line-height: normal;
    padding-right: 4px;
  }
  .sec-morejapan__btn a .icon{
    display: inline-block;
    width: calc(100vw/375*18);
    height: calc(100vw/375*18);
    vertical-align: calc(100vw/375*-4);
  }
  .sec-morejapan__btn a .icon svg{
    width: 100%;
    stroke: #00A6DE;
  }

	
	/*--ウェブシステム開発--*/
	.sec_system .list_scroll li{
		animation: ttl_business_system 20s linear infinite;
	}
	
	.sec_system .heading02{text-align: right;}
	
	.sec_system .business_inner{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
    gap: 0 16px;
		margin-bottom: 30px;
	}
	
	.sec_system .business_inner .inner{
    width: calc((100% - 16px) / 2);
    border-radius: 100%;
    overflow: hidden;
  }
	
	.sec_system .business_inner .inner .b_inner{padding-top: 100%;}
	
	.sec_system .b_inner.system01{background-image: url(../img/home/bg_system01.jpg);}
	.sec_system .b_inner.system02{background-image: url(../img/home/bg_system02.jpg);}
	.sec_system .b_inner.system03{background-image: url(../img/home/bg_system03.jpg);}
	.sec_system .b_inner.system04{background-image: url(../img/home/bg_system04.jpg);}
	
	/*--ITインフラ--*/
  .sec_infra{
    padding-top: 60px;
  }
	.sec_infra .list_scroll li{
    animation: ttl_business_system 16s linear infinite;
	}
  .sec_infra .business_inner{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
    gap: 0 16px;
  }
	
	.sec_infra .business_inner .inner{
    width: calc((100% - 16px) / 2);
    border-radius: 100%;
    overflow: hidden;
  }
	
	.sec_infra .business_inner .inner .b_inner{
		padding-top: 100%;
	}
	
	.sec_infra .b_inner.infra01{background-image: url(../img/home/bg_infra01.jpg);}
	.sec_infra .b_inner.infra02{background-image: url(../img/home/bg_infra02.jpg);}
	.sec_infra .b_inner.infra03{background-image: url(../img/home/bg_infra03.jpg);}

	/* 会社概要
	---------------------------------------------- */
	.company{
		position: relative;
		background: #002a4c;
		padding: 50px 20px 0 0;
	}

	.company::after{
		content: "";
		display: block;
		width: 19px;
		height: 30px;
		background: #FFF;
		border-left: 1px solid #F0F0F0;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.company .heading01{
		color: #FFF;
		text-align: right;
	}

	.c_inner{
		position: relative;
		width: 100%;
		background: #EEE;
		padding: 40px 20px;
		z-index: 2;
	}
	
	.company .wrap_stripe .stripe .stripe_inner span{
		border-right: 1px solid #fff;
		opacity: 0.07;
	}
	
	/* アクセス
	---------------------------------------------- */
	.access{
		position: relative;
		z-index: 1;
		padding-top: 50px;
	}

	.access_inner{
		padding: 0 20px;
		margin-bottom: 50px;
	}

	.access_inner .heading01{text-align: left;}

	.a_inner p{padding-left: 40px;}

	.a_inner p.car{
		background: url(../img/ico_car01.png) no-repeat 0 0;
		background-size: 32px;
		margin-bottom: 15px;
	}

	.a_inner p.train{
		background: url(../img/ico_train01.png) no-repeat 5px 0;
		background-size: 23px;
	}
	
	.map{
		width: 100%;
		padding-top: 100%;
		position: relative;
	}
	
	.map iframe{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.access .wrap_stripe{z-index: -1;}
	
	/* 採用情報・お問い合わせ
	---------------------------------------------- */
	.wrap_home02{
		background: #F7F7F7;
		position: relative;
	}
	
	.inner_type01{
		background: #FFF;
		box-shadow: 3px 3px 7px 5px rgba(0,0,0,0.1);
	}
	
	/* 採用情報
	---------------------------------------------- */
	.recruit{
		position: relative;
		z-index: 1;
		padding: 50px 20px 25px;
	}

	.recruit .heading01 span{font-size: 4.7rem;}

	.ttl_recruit{
		color: #888;
		font-size: 3rem;
		font-weight: bold;
		font-family: 'Oswald';
		text-align: center;
		letter-spacing: 0.015em;
		border-bottom: 2px solid #DDD;
		padding-bottom: 10px;
		margin-bottom: 15px;
	}

	.ttl_recruit::after{
		content: "";
		display: block;
		width: 5px;
		height: 8px;
		background: url(../img/ico_decoration01.png) no-repeat center;
		background-size: 100%;
		margin: 0 auto;
	}

	.wrap_recruit01{padding: 40px 20px 15px;}

	.wrap_recruit02{
		background: #F5F5F5;
		padding: 20px;
	}

	.recruit_inner:first-child{margin-bottom: 10px;}

	.recruit_inner .txt{font-weight: bold;}

	.type02 th{width: 85px;}

	/* お問い合わせ
	---------------------------------------------- */
	.contact{
		position: relative;
		z-index: 1;
		padding: 25px 20px 80px;
	}

	.contact .inner_type01{padding: 40px 20px;}

	/*--個人情報保護方針--*/
	#privacy{
		width: 100%;
        font-size: 1.3rem;
		height: 125px;
		border: 1px solid #DDDDDD;
		margin-bottom: 40px;
		overflow: hidden;
	}

	#privacy p{margin-bottom: 15px;}

	#privacy p:last-of-type{margin-bottom: 0;}

	.txt_privacy{margin: 25px 0 5px;}

	.btn_form{text-align: center;}


}/*--@media--*/