@charset "utf-8";
/* CSS Document */


/* contents==========================

	1.for contents style
	
*/

/* 1.for contents style ==============================================*/


/* ----------------------------------------------------
メディアクエリ設定 All
---------------------------------------------------- */
.vegas-overlay{ opacity: 0.95;}
.vegas-video{ width: auto !important;}
.btn a{
  display: block;
  color: #1c1c1c;
  text-align: center;
  text-decoration: none;
  font-size: 12px;font-size: 1.2rem;
  background: #f9f9f9;
  padding: 30px 0;
}
.btn a:hover{
  background: #a20109;
  color: #fff;
  transition:0.5s;
}
header .logo{ display: none; }
.mainvis{
  max-width: 1200px;
  margin: 0 auto;
	height: 400px;
  color: #fff;
  position: relative;
}
.mainvis .main-txt{
  font-size: 50px;font-size: 5rem;
  margin:30px 0 30px;
  font-weight: bold;
  line-height: 1.3;
	font-style: italic;
}
.mainvis .lead{ line-height: 1.8; }
.mainvis .waf{
	display: flex;
	width: 100%; 
	height: 100%;
	
}
.mainvis .waf p{
	display: flex;
	width: 100%;
	height: 100%;
}
.mainvis .waf p a{
	display: flex;
	width: 100%; 
	height: 100%;
	justify-content: center;
	align-items: flex-start;
}
.mainvis .waf p a img{
	max-width: 600px;
}

.mainvis .cm{
	max-width: 200px;
	margin-top: 30px;
	text-align: center;
	font-size: 1.2rem;
}
.mainvis .cm .btn a{
	background: none;
	border: 1px solid #fff;
	margin-top: 10px;
	color: #fff;
	padding: 12px 0;
	position: relative;
	transition: .3s;
}
.mainvis .cm .btn a::before{
	content: "";
	position: absolute;
	display: block;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 6px; height: 6px;
	top: 0; bottom: 0; right: 10px;
	margin: auto;
	transform: rotate(45deg);
}
.mainvis .cm .btn a:hover{
	background: rgba(255,255,255,0.3);
}
/*.mainvis .down{
  position: absolute;
  bottom: 0; right: 0;
  padding-bottom: 70px;
}
.mainvis .down::before{
  content: "";
  bottom: 0;
  right: 3px;
  background: rgba(255,255,255,0.1);
  width: 1px;
  height: 64px;
  display: block;
  position: absolute;
}
.mainvis .down::after{
  content: "";
  bottom: 0;
  right: 3px;
  background:#fff;
  width: 1px; height: 42px;
  display: block;
  position: absolute;
}*/
.content{ max-width: 1200px; margin: 0 auto; }
.content > section{
  overflow: hidden;
  padding: 60px calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
}
.content h2{
  font-size: 22px;font-size: 2.2rem;
  opacity: 0;
  -webkit-transform: translate(0, 30px);
  transform: translate(0, 30px);
  transition: .8s;
}
section.pickup{
  background: rgba(255,255,255,1);
  text-align: center;
  padding: 40px 0 30px !important;
}
.pickup h2{ margin-bottom: 30px; }

.pickup figure{ padding: 0 15px 30px; }
.pickup figure img{
  position:relative;
  width: 100%;
  /*max-width:560px;*/
  margin: 0 auto;
  box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
}
.pickup a{ color: #333; text-decoration: none; }
.pickup a:hover{ opacity: .7; transition:0.2s; }
.pickup p{ padding: 0 15px; line-height: 1.5;}
.pickup .slider{
  width: 90%;
  margin: 0 auto;
}
/*.pickup .slick-slider{
  margin-bottom: 0;
}*/
.pickup .slick-dots{
  top: 5px;
  bottom: auto;
}
.pickup .slick-dots li button::before{
  content: "■";
  font-size: 10px;font-size: 1.0rem;
  color: #d0d0d0;
  opacity: 1;
}
.pickup .slick-dots li{
  margin: 0 5px;
  width: 10px; height: 10px;
}
.slick-dots li.slick-active button::before{
  color: #a20109; opacity: 1;
}
/*.pickup .slick-slide{ opacity: .3; }
.pickup .slick-center{ opacity:1; }*/
section.update{
  padding:50px 0;
  margin: 0 calc(50% - 50vw);
  background: rgba(245,245,245,0.8);
  display: flex;
}
.update-tit{
  width: 200px;
  margin: 0 20px 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.update-tit h2{
  margin: 0 0 10px;
  display: inline-block;
  background: url(/common/img/arrow_red.png) right 25px center / 6px auto no-repeat;
  padding: 0 55px 0 0;
  width: 100%;
  font-size: 30px;font-size: 3.0rem;
	font-weight: 100;
}
.update-tit .btn a{
  padding: 10px 0;
  margin: 10px 25px 0 0;
  font-size: 16px;font-size: 1.6rem;
  background: none;
  border: 1px solid #333;
  color: #333;
}
.update-tit .btn a:hover{
  background: #fff;
  border-color: transparent;
  position: relative;
  z-index: 100;
  box-shadow:0px 0px 12px 5px rgba(0, 0, 0, 0.1) ;
}
.news-area{ max-width: 1200px; width: 100%; }
.news-area a{
  display: block;
  text-decoration: none;
  color: #333;
  padding: 0 20px;
  margin: 0 -20px;
  transition:0.3s;
}
.news-area a:hover{
  background: #fff;
  box-sizing: content-box;
  box-shadow:0px 0px 12px 5px rgba(0, 0, 0, 0.1) ;
  position: relative;
  z-index: 100;
}
.news-area dl{
  overflow: hidden;
  font-size: 14px;font-size: 1.4rem;
  padding: 10px 0;
  line-height: 2;
  border-top: 1px solid #c0c5cc;
}
.news-area a:last-of-type dl{ border-bottom: 1px solid #c0c5cc; }
.news-area a:hover dl,.news-area a:hover + a dl{
  border-color: transparent;
}
.news-area a:hover + a:last-of-type dl{ border-bottom: 1px solid #c0c5cc; }
.news-area dt{
  float: left;
  position: relative;
  width: 8em;
}
.news-area dd{
  color: #1b1b1b;
  text-decoration: none;
  background: url(/common/img/arrow_red.png) right center / 6px auto no-repeat;
  padding-right: 20px;
  padding-left: 8em;
}


.about{
  overflow: hidden;
  padding: 0;
  margin: 0 calc(50% - 50vw);
  display: flex;
	background: #fff;
}
.about a{
  display: flex;
	flex-direction: column;
	justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 2vw;
  text-align: center;
  width: 100%; height: 100%;
  position: relative;
}
.about a span{ font-size: 1.1vw; margin-top: 20px; }
.about a:hover{
  background: rgba(255,255,255,0.2);
}
.about a::before{
  content: "";
  position: absolute;
  display: block;
  width: 13px; height: 13px;
  right: 10%; top: 0; bottom: 0;
  margin: auto;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}
.about ul li::before{
  content: "";
  display: block;
  height: 101%;
  width: 101%;
  position: absolute;
  top: 0;
  left: 0;
 will-change: transform;
  transition:.3s;
}
.about ul li:hover::before{
  transform: scale(1.02);
}
.about{ height: 800px;}
.about ul{
  width: 100%;
  display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	overflow: hidden;
	align-items: flex-start;

}
.about ul li {
  width: 50%;
  position: relative;
  overflow: hidden;
}
.about .work::before{ background: url(/img/bg_work.jpg) center center / cover no-repeat; }
.about .case::before{ background: url(/img/bg_case.jpg) center center / cover no-repeat; }
.about .data::before{ background: url(/img/bg_data.jpg) center center / cover  no-repeat; }
.about .challenge::before{ background: url(/img/bg_challenge.jpg) center top / cover  no-repeat; }
.about .wep::before{ background: url(/img/bg_wep.jpg) center center / cover  no-repeat; }
.about .de::before{ background: url(/img/bg_de.jpg) center center / cover  no-repeat; }
.about .case{
	height: 50%;
}
.about .challenge,.about .wep{
		height: 25%;
}
.about .data a{ font-size: 2.5vw;}
.about .data{
	height: 75%;
	align-self: flex-start;
}
.about .de{
	height: 25%;
	align-self: flex-start;
}

.product{ background: #f4f4f4; }
.product-menu{ float: left; width: calc(270/1200*100%); }
.product-menu h2{
  margin:80px 0 80px;
  background: url(/common/img/arrow_red.png) 180px 8px / 6px auto no-repeat;
}
.product-menu button{
  border: none;
  background: none;
  cursor: pointer;
	font-family: '游ゴシック Medium','Yu Gothic Medium','YuGothic M','游ゴシック','Yu Gothic','游ゴシック体',YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "M+ 1p", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #1b1b1b;
  width: 100%;
  font-size: 14px;font-size: 1.4rem;
  text-align: left;
  padding: 15px 15px 15px calc(59/270*100%);
}
@media all and (-ms-high-contrast:none) {
	.product-menu button{
  font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, YuGothic, YuGothicM, sans-serif;
	}
}
.product-menu li{ margin-bottom: 10px; }
.product-menu .all button{ background: url(/img/ico_all_off.png) 20px center no-repeat; }
.product-menu .all button.mixitup-control-active{ background: url(/img/ico_all_on.png) 20px center no-repeat; }
.product-menu .select-form button{ background: url(/img/ico_pro_form.png) 20px center no-repeat; }
.product-menu .select-form button.mixitup-control-active{ background: url(/img/ico_pro_form_on.png) 20px center no-repeat; }
.product-menu .select-bi button{ background: url(/img/ico_pro_bi.png) 15px center no-repeat; }
.product-menu .select-bi button.mixitup-control-active{ background: url(/img/ico_pro_bi_on.png) 15px center no-repeat; }
.product-menu .select-cloud button{ background: url(/img/ico_pro_cloud.png) 18px center no-repeat; }
.product-menu .select-cloud button.mixitup-control-active{ background: url(/img/ico_pro_cloud_on.png) 18px center no-repeat; }
.product-menu .sf button{ background: url(/img/ico_product_off.png) 15px center no-repeat; }
.product-menu .sf button.mixitup-control-active{ background: url(/img/ico_product_on.png) 15px center no-repeat; }
.product-menu button.mixitup-control-active{
  color: #af010b;
  font-weight: bold;
  background-color: rgba(255,255,255,0.5) !important;
}
.product-menu button:hover{
  background-color: rgba(255,255,255,0.5);
  transition:0.5s;
}
.product-list {
  float: right;
  width: calc(900/1200*100%);
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
}
.product-list:after {
  content: '';
  display: inline-block;
  width: 100%;
}
.mix,.gap {
  display: inline-block;
  vertical-align: top;
  width: calc(100%/3);
  font-size: 12px;font-size: 1.2rem;
}
.mix {
  background: #fff;
  position: relative;
  border-left: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}
.mix a{
  display: block;
  text-align: center;
  height: 100%;
  padding:80px 0 60px;
  color: #1b1b1b;
  text-decoration: none;
}
.mix a:hover{
  box-shadow:0px 0px 12px 5px #dddddd;
  position: relative;
  z-index: 100;
  transition:0.5s;
}
.mix figure{ padding: 0px 0 30px; }
.mix figure+p{
  font-size: 14px;font-size: 1.4rem;
  background: url(/common/img/arrow_red.png) right center / 6px auto no-repeat;
  display: inline-block;
  padding-right: 18px;
  line-height: 1.5;
}
.media{ 
  background: #fff;
  padding: 60px calc(50vw - 50%) 120px;
  margin: 0 calc(50% - 50vw);
}
/*.media h2{ text-align: center; margin-bottom: 10px; }*/
.media > p {
  text-align: center;
	display: flex;
	justify-content: center;
  
}
.media > p a{
	display: flex;
	justify-content: center;
	align-items: center;
  margin-bottom: 50px;
}
.media > p img{	margin-right: 30px; flex-shrink: 0; width: 231px; }
.media > p span{
	font-weight: bold;
	font-size: 22px;font-size: 2.2rem;
	margin-top: 15px;
  text-align: left;
}
.media p a{ text-decoration: none; color: #333;}
.media ul{ display: flex; justify-content: space-between; }
.media ul li{ width: 32%; line-height: 1.5; text-align: left; }
.media ul li a{ text-decoration: none; color: #333; }
.media ul li a:hover{ opacity: .7; transition: .3s; }
.media ul li figure{
  position: relative;
  width: 100%;
  padding-top: 58.5% ;
  overflow: hidden;
  margin: 0 auto 10px;
}
.media ul li figure img{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.media ul li p{ text-align: left;}
/*All END*/


/* ----------------------------------------------------
メディアクエリ設定 (PC) 1000px～ 
---------------------------------------------------- */
@media screen and (min-width: 1000px) {
header h1{
  height: 200px;
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center;
  position: relative;
}
header h1 img{ opacity: 1; transition:all 0.3s; }
header h1::before{
  content: "";
  background:url(/common/img/logo_sub.png) left center / 123px auto no-repeat;
  display: block;
  position: absolute;
  width: 123px;
  height: 46px;
  top: 10px;
  left: calc(50% - 61px);
  opacity: 0;
  transition:all 0.3s;
}
header h1.on{
  position: relative;
  height: 67px;
  transition-delay: 0.3s;
  margin-bottom: 133px;
}
header h1.on img{ opacity: 0; }
header h1.on::before{ opacity: 1; transition-delay: 0.3s; }
.drawer-nav a{ color: #fff; }
.gnavi > li > a::before{
  content: "";
  width: 1px;
  height: 15px;
  display: block;
  background: #fff;
  position: absolute;
  right: 0;
  top: 25px;
}
.subnavi > li > a:hover span{
  background: rgba(255,255,255,0.3);
  transition:0.5s;
}
/*アイコン設定*/
.nav-form a span:before{ content: url(/img/ico_form.png); }
.nav-bi a span:before{ content: url(/img/ico_bi.png); }
.nav-cloud a span:before{ content: url(/img/ico_cloud.png); }
.nav-sol a span:before{ content: url(/img/ico_solution.png); }	
.nav-data a span:before{ content: url(/img/ico_data.png); }	
.nav-search a{ background:url(/img/ico_search.png) no-repeat center 15px; }
.fixed{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
}
.fixed .h-wrapper{
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  background: #fff;
}
.fixed h1{ height: 67px; }
.fixed h1.on{ margin-bottom: 0 !important; }  
.fixed h1::before{ opacity: 1; }
.fixed h1 img{ display: none; }
.fixed a{ color: #333 !important; }
.fixed .gnavi > li > a{
  border-right: 1px solid #e5e5e5;
  padding-top: 25px;
  height: 67px;
}
.fixed .subnavi a:hover span{ background: #ededed; }
.fixed .subnavi ul li a:hover{ color: #b40100 !important;}
.fixed .othernavi > li > a{ padding: 40px 0 16px; }
.othernavi > li > a::after{ background: #e5e5e5 !important; }
.fixed .nav-search > li > a{ background-position: center 15px !important; }
.fixed .nav-lang > a{ background-position: center 15px !important; }
.fixed .othernavi > li > a::after{ background: #e5e5e5; }
.fixed .drawer-dropdown.active .drawer-dropdown-menu{ top: 68px; }
.fixed .othernavi .drawer-dropdown.active .drawer-dropdown-menu{
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}
.fixed .gnavi-info a{ color: #fff !important; }
/*アイコン設定*/
.fixed .nav-form a span:before{ content: url(/common/img/ico_form_on.png); }
.fixed .nav-bi a span:before{ content: url(/common/img/ico_bi_on.png); }
.fixed .nav-cloud a span:before{ content: url(/common/img/ico_cloud_on.png); }
.fixed .nav-data a span:before{ content: url(/common/img/ico_data_on.png); }	
.fixed .nav-sol a span:before{ content: url(/common/img/ico_solution_on.png); }	
.fixed .nav-search a{ background:url(/common/img/ico_search_on.png) no-repeat center 15px; }

	
/* (PC) 961px～  END*/
}

 /* ----------------------------------------------------
メディアクエリ設定 (tablet and PC) 769px～ 
---------------------------------------------------- */
@media only screen and (min-width: 769px){

/*(tablet and PC) 769px～  END*/
}

 /* ----------------------------------------------------
メディアクエリ設定 (tablet　only)  769～960px
---------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 960px) {

.mix,.gap { width: calc(100%/2); }
.about ul li a{ padding: 80px 0; }

/*769～960px*/
}

 /* ----------------------------------------------------
メディアクエリ設定 (smartPhone only)   0～960px
---------------------------------------------------- */
@media screen and (max-width: 1000px) {
	section.pickup{ padding: 50px 0 !important; }
  .pickup .slick-dots{
  top: auto;
  right: auto;
  bottom: -30px;
  width: 100%;
  }
		.mainvis .waf p a{ align-items: center;}

}

 /* ----------------------------------------------------
メディアクエリ設定 (smartPhone only)   0～768px
---------------------------------------------------- */
@media screen and (max-width: 768px) {
	.btn a{
		width: 80%;
		margin: 0 auto;
		background: #3a3a3a;
		font-size: 14px;font-size: 1.4rem;
		color: #fff;
		padding: 20px 0;
	}
	.mainvis{
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.mainvis .main-txt{ font-size: 30px;font-size: 3rem; margin: 0 0 15px; }
	.mainvis .cm{ margin: 20px auto 0; width: 100%;}
	
	.mainvis .waf p a{
		padding: 0 30px;
	}
	.mainvis .waf p a img{
		max-width: none;
		width: 95%;
	}
	/*.vegas-slide-inner{
		background-position: center top !important;
		background-size: 200% auto !important;
	}*/
	.content > section{ padding: 50px 20px; }
	.content h2{
		margin:0 0 30px;
		text-align: center;
		background: none;
		line-height: 1.5;
	}
  .pickup .slider{ width: 100%;}
  .pickup .slick-slide{ opacity: .3; }
  .pickup .slick-center{ opacity:1; }
	.pickup figure{ padding: 0 15px 20px; }
	.pickup a{ font-size: 12px;font-size: 1.2rem; }
	.about{ height: auto; }
	.about a{
		padding: 30px 15px !important;
		;font-size: 1.8rem !important;
		text-align: center;
		line-height: 1.2;
	}
  .about a::before{
    right: 15px;
    width: 8px; height: 8px;
}
	.about a span{
		font-size: 12px;font-size: 1.2rem;
		line-height: 1.2;
		display: inline-block;
		margin-top: 10px;
	}
	.about ul{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}
	.about ul li{
		width: 50%;
		display: flex;
		align-items: center;
		height: auto !important;
	}
	.about .data{
		align-self: stretch;
	}
	.about .de{ width: 100%;}
	/*.about .data{ display: block; width: 100%; }
	.about .data a{ padding: 50px 15px !important; line-height: 1.2; }
  .about .data span{
    padding: 0;
    line-height: 1.5;
  }
  .about .data div{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  top: auto;
  left: auto;
  transform: translate(0%, 0%);
}*/
	.product-menu{ width: 100%; float: none; }
	.sp-select{
		width: 100%;
		padding: 20px 0;
		font-size: 14px;font-size: 1.4rem;
		font-weight: bold;
		background: #fff;
		text-align: center;
		margin-bottom: 20px;
		position: relative;
	}
	.sp-select::before{
		content: "";
		background: url(/common/img/arrow_red.png) left center / contain no-repeat;
		width: 8px; height: 12px;
		display: block;
		transform: rotate(90deg);
		position: absolute;
		right: 15px;
		top: calc(50% - 5px);
	}
	.select-box {
		width: 100%;
		margin: -20px 0 20px;
		background: #fff;
	}
	.product-menu button{
		background: none !important;
		padding:10px 15px;
		margin-bottom: 0;
		width: 100%;
		text-align: left;
	}
	.product-list{ justify-content: space-between; width: 100%; }
	.mix,.gap { width: calc(100%/2 - 0.5rem); }
	.mix{
		background: none;
		border: none;
		margin-bottom: 20px;
	}
	.mix a{ padding: 0; }
	.mix a:hover{ box-shadow: none; z-index: 1; }
	.mix figure{
		background: #fff;
		padding: 30px 5px;
		margin-bottom: 10px;
	}
	.mix figure+p{
		padding-right: 0;
		text-align: left;
		display:inherit;
		background: none;
		font-size: 12px;font-size: 1.2rem;
	}
	section.update{ display: block; }
	.update-tit{
		width: 100%;
		margin: 0;
		flex-direction: row;
	}
	.update-tit h2{
		margin: 0 0 30px;
		padding: 0;
		display: inherit;
	}
	.update-tit .btn a{
		margin: 0;
		font-size: 14px;font-size: 1.4rem;
		display: block;
		padding: 10px 20px;
		width: 100%;
	}
	.news-area dl{
		margin: 0 -20px;
		padding: 20px;
		position: relative;
		line-height: 1.6;
	}
	.news-area dt{
		float: none;
		width: 150px;
		color: #b40200;
		font-weight: bold;
		font-size: 12px;font: 1.2rem;
		margin-bottom: 5px;
	}
	.news-area dd{
		float: none; width: 100%;
		padding-left: 0; 
	}
	.news-area dd a{
		display: block;
		background: none;
		padding-right: 0;
	}
	.news-area dd a:hover{ text-decoration: none; }
  .media{ padding-bottom: 60px; }
	.media > p{ display: block; margin-bottom: 30px; text-align: center; }
  .media > p a{ display: block;}
	.media > p img{ margin: 0 0 30px;}
	.media > p span{ 
    font-size: 16px; font-size: 1.6rem;
    display: block;
    margin-top: 0;
    text-align: center;
  }
	.media ul{ display: block; }
	.media ul li{
		width: 100%;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #EBEBEB;
	}
	.media ul li a{
		text-decoration: none;
		color: #333;
		display: flex;
    padding: 0 10px;
    align-items: center;
	}
	.media ul li a:hover{ opacity: 1; transition: 0s; }
	.media ul li figure{
    margin:0 10px 0;
    width: 30%; flex-shrink:0;
    padding-top: 0; }
  .media ul li figure img{
    position: relative;
    max-width: none;
    width: 100%;
    height: auto;
    top:auto; left:auto;
    transform: translate(0%, 0%);
}
	.media ul li p{ flex: 1; }
/*smartPhone END*/
}