@charset "utf-8";

.fontSize_common{
	font-size:1.2em;
}
/*-----メインフォント指定-----*/
@font-face {
  font-family: "myfont";
  src: url("../../font/h_w4.otf") format("opentype");
}
/*-----英語フォント指定-----*/

/*--太め---*/
@font-face {
  font-family: "myfont_eng";
  src: url("../../font/Oswald-Bold.ttf") format("opentype");
}

/*--細め--*/
@font-face {
  font-family: "myfont_eng_light";
  src: url("../../font/Oswald-Medium.ttf") format("opentype");
}

/*-----ボールドフォント指定-----*/
@font-face {
  font-family: "myfont_bold";
  src: url("../../font/h_w6.otf") format("opentype");
}
body {
	font-family: "myfont", sans-serif;
}

.SPbreak{
	display:none;
}
.PCbreak{
	display:block;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.SPbreak{
	display:block;
}
.PCbreak{
	display:none;
}

}
.base_color{
color:#231815;
}
.eng_font{
	font-family: "myfont_bold", sans-serif;
}
.blue_color{
	color:#281C7A;
}
/*----------------------------------------------------

ヘッダ-

------------------------------------------------------*/
.headerNav{
	background:#E3DBFF;
	position:relative;
	
}

.headerNav h1 img{
	max-width:11%;
}
.headerNav h1{
	padding:50px 50px;
}

@media all and (min-width: 320px) and (max-width: 880px) {
.headerNav{
	padding:10px 0;
	}
.headerNav h1{
	padding:0 20px;
	}
.headerNav h1 img{
	max-width:40px;
	}
/*---メニュー内---*/	
.pcimgnone{
	padding:10px 20px;
	}
.pcimgnone img{
	max-width:40px;
	}
}

@media all and (min-width: 881px) and (max-width: 120em) {
.pcimgnone{
	display:none;
	}
}



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

フッター

------------------------------------------------------*/
#footer{
	max-width:85%;
	margin: 0 auto;
	background:#fff;
	padding:40px 0 ;
	color:#231815;
	font-family: "myfont_eng_light", sans-serif;
}
@media all and (min-width: 320px) and (max-width: 880px) {
#footer{
	max-width:90%;
	position:relative;
	}
}

.footer_list{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footer_list{
	display:block;
	justify-content:center;
	}
}
.footer_list p img{
	max-width:200px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footer_list p{
		text-align:left;
		margin: 0 auto 30px;
	}
.footer_list p img{
	max-width:150px;
	}
}

.footer_list ul{
	display:flex;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footer_list ul{
	justify-content:space-between;
	}
}

.footer_list ul li{
	margin: 0 30px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footer_list ul li{
	margin: 0 0px 0;
	}
}

.footer_list ul li a{
	font-size:1.35em;
	text-decoration:none;
	color:#595757;
}
.footer_list ul li a:hover{
	transition:all 0.3s;
	opacity:.6;
}

@media all and (min-width: 320px) and (max-width: 880px) {
.footer_list ul li a{
	display:block;
	padding:0 0px;
	}
}

.footer_list ul li:last-child{
	margin: 0 0px 0 30px;
}
.footer_list ul li:nth-child(3){
	margin-top: 4px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footer_list ul li:last-child{
	margin: 0 0px 0 0px;
	}
}

/*-----アクセス------*/
.footer_access{
	margin:40px 0 0;
}
.footer_access dl{
	display:flex;
	margin:0 0 0 20px;
	line-height:1.8;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight:bold;
}

.footer_access a{
	color:#333;
}

@media all and (min-width: 320px) and (max-width: 880px) {
.footer_access dl{
	margin:0 0 0 0px;
	}
}

.footer_access dt{
	margin:0 20px 0 0;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footer_access dt{
	margin:0 0px 0 0;
	width:25%;
	display:none;
	}
}

@media all and (min-width: 320px) and (max-width: 880px) {
.footer_access dt{
	margin:0 20px 0 0;
	}
}
.footer_access dd{

}
.footer_access span{
	display:inline-block;
	margin:0 0px 0 20px;
	padding:0 0px 0 10px;
	background:url(../../cmn/images/map.png) no-repeat 0 35% ;
	background-size:8px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footer_access span{
	margin:0 10px;
	padding:0 0px 0 10px;
	}
}

/*-----アイコン------*/
.icon{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	margin:80px 0px 30px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.icon{
	margin:30px 0px 30px;
	position:absolute;
	right:0;
	top:30px;
	}
}

.icon li:nth-child(1) img{
	max-width:45px;
}

.icon li{
	margin:0 10px 0 20px;
	line-height:1.2;
}
.icon li:last-child{
	margin:0 0px 0 0px;
}
.icon li a:hover{
	transition:all 0.3s;
	opacity:.6;
}

/*-----外部------*/
.footer_link{
	display:flex;
	justify-content:space-between;
	align-items:center;
	color:#231815;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footer_link{
	display:block;
	flex-wrap:wrap;
	}
}

.footer_link ul{
	display:flex;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footer_link ul{
	display:block;
	flex-wrap:wrap;
	justify-content:center;
	margin:20px 0 0;

	}
}

.footer_link ul li{
	margin: 0 20px;
}
.footer_link ul li img{
	max-width:100px;
}

@media all and (min-width: 320px) and (max-width: 880px) {
.footer_link ul li{
	margin: 3px 0px;
	}
}
.footer_link a{
	text-decoration:none;
	color:#595757;
}
.footer_link a:hover{
	transition:all 0.3s;
	opacity:.6;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.copyright{
	text-align:center;
	margin:30px 0 -20px;
	}

}
.copyright img{
	max-width:180px;
}

/*========= ページトップのためのCSS ===============*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
/*	background:#fff;
	border:1px solid #A373FF;
	border-radius: 0px;
	width: 70px;
	height: 70px;*/
	color: #A373FF;
	text-align: center;
	text-decoration: none;
	font-size:1rem;
	transition:all 0.3s;
}
#page-top img{
	max-width:90px;
}

@media all and (min-width: 320px) and (max-width: 880px) {
#page-top a{
	width: 60px;
	height: 60px;
	}
#page-top img{
	max-width:60px;
	}
}
#page-top a:hover{
	background: #A373FF;
	color:#fff;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 7%;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}
@media all and (min-width: 320px) and (max-width: 880px) {
#page-top {
	right: 26px;
	}
}
/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}


/*== ボタン共通設定 */

.more{
	margin:50px 0 0 ;
	font-family: "myfont_eng_light", sans-serif;
	letter-spacing:2px;
}
.more img{
	max-width:165px;
}

.more a:hover{
	transition:all 0.3s;
	opacity:.6;
}

.centerIn{
	text-align:center;
}
@media all and (min-width: 320px) and (max-width: 880px) {
	.centerIn_sp{
		text-align:center;
		margin: 60px auto 20px;
	}
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
   padding: 15px 50px;
	}
}

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

スクロール促す

------------------------------------------------*/
.scroll {
    position  : absolute;
    font-size : 13px;
    writing-mode : vertical-rl;
    bottom : -250px!important;
    left : 2%;
   transform: rotate(180deg);
   z-index:2;
   color:#333;
}
@media all and (min-width: 881px) and (max-width: 120em) {
.scroll {
	bottom : 0%;
	}
}

.scroll::after {
    content : '';
    display : inline-block;
    position : absolute;
    background-color: #333;
    right : 50%;
    bottom : -160px;
    transform : translateX(-50%);
    width : 1px;
    height : 150px;
    animation: scroll 1.5s infinite;
}
@media all and (min-width: 320px) and (max-width: 880px) {

.scroll::after {
    content : '';
    display : inline-block;
    position : absolute;
    background-color: #333;
    right : 50%;
    bottom : -60px;
    transform : translateX(-50%);
    width : 1px;
    height : 50px;
    animation: scroll 1.5s infinite;
	}
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 0%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 0%;
  }
}
@media all and (min-width: 320px) and (max-width: 880px) {
.footerSP_list{
	display:none;
	}
}

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

パンくずナビ

----------------------------------------*/
.maincopy_div ol{
/*	display:flex;
	justify-content:flex-end;
	margin:0px 0 0;
	max-width:95%;
	background:none;
	color:#231815;
	font-family: "Arial", "メイリオ";
	*/
	display:flex;
	position:absolute;
	right:95px;
	top:220px;
	font-family: "Arial", "メイリオ";
}
@media all and (min-width: 320px) and (max-width: 880px) {
.maincopy_div ol{
	right:5px;
	top:120px;
	}
}

.maincopy_div ol li{
	margin: 0 7px 0 0;
	font-size:1.1em;
	letter-spacing:2px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.maincopy_div ol li{
	font-size:.8em;
	}
}

.maincopy_div ol li:first-child::after{
	content:">";
	margin:0 0px 0 7px;
}

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

共通メインビジュアル周辺

---------------------------------------------*/
.maincopy_div{
	background: linear-gradient(180deg, #fff 0%, #fff 160px, #E8E6FF 160px, #E8E6FF 160px);
	padding:60px 0 ;
	position:relative;
}


@media all and (min-width: 320px) and (max-width: 880px) {
.maincopy_div{
	background: linear-gradient(180deg, #fff 0%, #fff 56%, #E8E6FF 56%, #E8E6FF 100%);
	padding:60px 0 50px;
	}
}
.maincopy_detail{
	margin:40px auto 10px;
	max-width:900px;
	position:relative;

}
@media all and (min-width: 320px) and (max-width: 880px) {
.maincopy_detail{
	margin:0px auto 0px;
	max-width:90%;
	position:relative;
	}
}
.maincopy_detail img{
	zoom:0.80;
	-moz-transform: scale(0.85);
	min-height: 100px;
	}
@media all and (min-width: 320px) and (max-width: 880px) {
.maincopy_detail img{
	zoom:0.35;
	-moz-transform: scale(0.35);
	min-height: 0px;
	}
}


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

共通タイトル

---------------------------------------------*/
.sub_title_div{
	max-width:980px;
	margin: 0 auto;
	text-align:center;
}
/*----TOPページのみ---*/
.topver{
	padding:40px 0 160px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.topver img{
	max-width:70%;
	}
.topver{
	padding:40px 0 60px;
	}
}
/*----サービスページのみ---*/
.servicever{
	padding:160px 0 80px;
}
/*----Cloud integration----*/
.servicever img{
	max-width: 70%;
	max-height: 360px;
	object-fit: cover;
}

.servicever dl , .servicever_it dl{
	margin: 0 0 25px;
	font-weight:700;
	letter-spacing:2px;
}
/*----IT consulting----*/
.servicever_it{
	padding:160px 0 80px;
}
.servicever_it img{
	max-width: 55%;
	max-height: 360px;
	object-fit: cover;
}
/*----service and volue----*/
.servicever_v{
	padding:80px 0 160px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.servicever_v{
	padding:80px 0 80px;
	}
	
}
.servicever_v img{
	max-width: 47%;
	max-height: 360px;
	object-fit: cover;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.servicever_v img{
	max-width: 60%;
	max-height: 360px;
	object-fit: cover;
	}
}

/*----case----*/
.casever{
	padding:80px 0 110px;
}
.casever img{
	max-width: 25%;
	max-height: 360px;
	object-fit: cover;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.casever img{
	max-width: 35%;
	max-height: 360px;
	object-fit: cover;
}

}
/*----カンパニーページのみ---*/
.companyver{
	padding:80px 0 50px;

}
.companyver img{
	max-width: 30%;
	max-height: 360px;
	object-fit: cover;
}

@media all and (min-width: 320px) and (max-width: 880px) {
.companyver{
	padding:0px 0 50px;
}
.companyver img{
	max-width:150px;

}

}