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

/* ----------------------　//HOME ----------------------　*/
.slideshow_wrap{
position: relative;
}

.swiper-container01{
height: 100vh;
}

@media only screen and (max-width:480px){
.swiper-container01{
height: 310px;
}
}

.swiper-slide{
width: 100%;
overflow: hidden;
}
.swiper-slide img{
width: 100%;
}

@keyframes zoomUp {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1.3);/*transform: scale(1.15);*/
  }
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}

/*imgタグだと下に隙間ができるのでblockに。*/
.slide-img img{
  display: block;
}


.swiper-button-next, .swiper-button-prev{
color: #fff!important;
top:50%!important;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
font-size: 25px!important;
}

/*矢印 × アニメーション #2
.slideshow_wrap{
	position:relative;
}
.scanime{
}
.scanime a{
	width:90px;
	height:30px;
  padding-top: 70px;
	position:absolute;
	bottom:10px;
	left:48%;
	z-index:9;
	color:#fff;
	font-size:1.3em;
	text-align:center;
}
.scanime a span {
  position: absolute;
  top: -15px;
  left: 35%;
  width: 50px;
  height: 50px;
  margin-left: -12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}


@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
.ar-txt,
.ar-anime p a,
.al-anime p a{
	position:absolute;
	bottom:45%;
	z-index:11;
	color:#fff;
	line-height:1.1em;
	font-size:1.3em;
	text-align:center;
}
.al-anime p a{
	left:4%;
}
.ar-anime p a{
	right:4%;
}
.ar-txt{
	right:4%;
	bottom:5%;
	text-align:right;
}
.ar-txt p img{
	width:80%;
}

.cl_arrow{
	display:block;
	margin-left:-200px;
  animation: clarrow 4s infinite;
}
.cr_arrow{
	display:block;
	margin-right:-200px;
  animation: crarrow 4s infinite;
}


@keyframes clarrow {
  50% {
    transform: translate(60px,0)
  }
}

@keyframes crarrow {
  50% {
    transform: translate(-60px,0)
  }
}
@media screen and (max-width: 1024px) {
.al-anime p a img{
	width:80%;
}
.ar-anime p a img{
	width:83%;
}
}

@media screen and (max-width: 890px) {
.cl_arrow,
.cr_arrow,
.scanime a{
	display:none;
}
.ar-txt,
.al-anime p a,
.ar-anime p a{
	width:20%;
}
.cl_arrow img,
.cr_arrow img,
.scanime a img,
.ar-txt,
.al-anime p a img{
	width:90%;
}
.ar-anime p a img{
	width:93%;
}

.scanime a{
	height: auto;
	left:38%;
	font-size:1em;
}
.scanime a span {
  position: absolute;
  top: -15px;
  left: 35%;
}

.al-anime p a{
  top: 17%;
}
.ar-anime p a{
  top: 19%;
}
.ar-txt{
	width:50%!important;
	bottom:15%;
}
}
*/


/*横スクロール防止*/
.home{
overflow-x:hidden;
}

/*-- 中間のカラム-------------------------------------*/

.top_flex{
width:795px;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
padding: 20px;
}
.top_flex a{
margin:3px; 
box-sizing: border-box;
background: #ccc;
display: table;
overflow: hidden;
color: #fff;
}
/*
.top_flex a:nth-child(1),
.top_flex a:nth-child(2){
width: calc( 50% - 6px ) ;
}
.top_flex a:nth-child(n+3){
width: calc( 33.3% - 6px ) ;
}/*3番目以降*/

.top_flex.clm02 a{
width: calc( 50% - 6px ) ;
}


.top_flex a{
width: calc( 33.3% - 6px ) ;
}
.top_flex a div{
background-color: #000;
display: table-cell;
height: 250px;
vertical-align: middle;
text-align: center;
transition: background-image 0.3s ease; /* 滑らかな変化 */
/*背景の処理*/
position: relative; /* 親要素を相対位置に設定 */
overflow: hidden; /* はみ出した部分を隠す */
}
/*
.top_flex a div.product{
background: url("ind_imgs/c_product.png") no-repeat top center;
background-size: 100% auto;
}
*/

.top_flex a div::before {
content: ''; /* 擬似要素のための空のコンテンツ */
background-size: 100% auto;
position: absolute; /* 絶対位置に設定 */
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1; /* 透過度を設定 */
z-index: 0; /* 背景として配置 */
}
.top_flex a:hover div::before {
opacity: 0.8; /* 透過度を設定 */
}
.top_flex a div.product h3 {
		position: relative; /* テキストを相対位置に設定 */
		z-index: 1; /* テキストを前面に表示 */
}
.top_flex a div.product::before {
background: url("ind_imgs/c_product.png") no-repeat  top center;
background-size: 140% auto;
}

.top_flex a div.proposal::before{
background: url("ind_imgs/c_proposal.png") no-repeat top center;
background-size: 104% auto;
}
.top_flex a div.products::before{
background: url("ind_imgs/c_prodduct.png") no-repeat center center;
background-size: 104% auto;
}
.top_flex a div.trend::before{
background: url("ind_imgs/c_trend.png") no-repeat center center;
background-size: 104% auto;
}
.top_flex a div.function::before{
background: url("ind_imgs/c_function.png") no-repeat center center;
background-size: 104% auto;
}
.top_flex a div.fastclean::before{
background: url("ind_imgs/c_fastclean.png") no-repeat center center;
background-size: 104% auto;
}
.top_flex a div.outline::before{
background: url("ind_imgs/c_outline.png") no-repeat center center;
background-size: 104% auto;
}
.top_flex a div.recruit::before{
background: url("ind_imgs/c_recruit.png") no-repeat center center;
background-size: 104% auto;
}

.top_flex a div.sale::before{
background: url("ind_imgs/c_sale.png") no-repeat center center;
background-size: 104% auto;
}


@media only screen and (max-width:840px){
.top_flex{
width: 90%;
}
/*
.top_flex a:nth-child(n+3){/*3番目以降
width: calc( 50% - 6px ) ;
}*/

.top_flex a div{
height: 200px;
}
}
@media only screen and (max-width:480px){
.top_flex{
width: 90%;
display: block;
}
/*
.top_flex a:nth-child(1),
.top_flex a:nth-child(2),
.top_flex a:nth-child(n+3){番目以降*/
.top_flex.clm02 a,
.top_flex a{
width: 100%;
margin:  15px auto;
}
}
/* ----------------------　whatnew ----------------------　*/

.whatnew{
width:930px;
margin:80px auto;
}

.whatnew ul{
	margin:30px auto;
}


.whatnew ul li{
	margin:10px;
	padding-bottom:10px;
	border-bottom: dotted 1px #ccc;
}
.whatnew ul li a{
	text-decoration:none;
	color:#333;
}
.whatnew ul li a span{
	display:inline-block;
	padding-right:1em;
}
.whatnew ul li a:hover{
	text-decoration: underline;
	color:#00B3FF;
}
.btn_more{
text-align:center;
}
.btn_more a {
margin:auto;
	text-decoration: none;
	cursor: pointer;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	background: #666;
	border: 1px solid #666;
	border-radius: 1px;
	color: #fff;
	display: block;
	max-width: 6em;
	padding: 10px 40px;
	text-align: center;
}
.btn_more a {
	background: #fff;
	color: #666;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.btn_more a::after {
	background: #666;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
}
.btn_more a:hover {
	color: #fff;
}
.btn_more a:hover::after {
	transform: scale(1, 1);
}

@media screen and (max-width: 1024px) {
.whatnew{
width:90%;
}
.whatnew ul li a span{
	display:block;
	margin-bottom:5px;
}
}



@media only screen and (max-width:480px){
.f150.bold.bt20{
	font-size:110%;
}
}