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

/*
 mv  styles
-------------  */

.mv{
	position: relative;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { 
	display: block !important;
	width: 80%;

}
.sp { display: none !important; }

.animation{
	margin: auto;
	position: absolute;
	top: 50%;
	left: 20%;
	z-index: 100;
}


#animation {
	animation: zoomIn 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;

  /*animation: fade-in 5s;
  animation-fill-mode: forwards;*/
}

@keyframes zoomIn {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
		/*from {
		opacity: 0;
	  }
	  to {
		opacity: 1;
	  }*/
}


/* 複数画像切り替え---------------------------------------------- */
.slider-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slideimg {
  position: absolute;
  inset: 0;/*親要素内にフルサイズで配置*/
  opacity: 0;
  background-size: cover;/* 画像をスライド全体にカバー */
  animation: slideAnime 25s infinite; /* 15秒で1サイクル */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1){
  background-image: url('../img/mv01.jpg');
  animation-delay: 0s;
  background-position:100%;
}

.slideimg:nth-of-type(2) {
  background-image: url('../img/mv02.jpg');
  animation-delay: 5s;
  background-position:10%;
}

.slideimg:nth-of-type(3) {
  background-image: url('../img/mv03.jpg');
  animation-delay: 10s;
  background-position:0%;
}

.slideimg:nth-of-type(4) {
  background-image: url('../img/mv04.jpg');
  animation-delay: 15s;
  background-position:60%;
}

.slideimg:nth-of-type(5) {
  background-image: url('../img/mv05.jpg');
  animation-delay: 20s;
  background-position:90%;
}

@keyframes slideAnime {
  0%, 30%, 100% { opacity: 0; }/* スライドの非表示タイミング */
  10%, 20% { opacity: 1; }/* スライドの表示タイミング */
}

/*NEWS*/
.newslist{
	width: 100%;
	max-height: 300px;
	overflow-y: scroll;
	scrollber-color: #eeeeee;
	scrollbar-width: thin;
	
}

.newslist-item{
	position: relative;
	border-bottom: dotted 1px rgba(106,106,106,1.00);
		
}

.newslist-item:hover{
	background-color:rgba(243,243,243,1.00);
}

.newslist-item a{
	display: flex;
	color: #000000;
	padding: 16px 10px;

}


.newslist-item:first-child{
	padding-top: 0;
}


.newslist-card-wrap{
	width: 15%;
	
}

span.newslist-card-cat{
	display: inline-block;
	padding: 0 5px;
	margin: 0 0 2px 6px;
	vertical-align: middle;
	font-size: 1.1rem;
	text-align: center;
	color: rgba(190,40,42,1.00);
	border: solid 1px  rgba(190,40,42,1.00);
}


.newslist-card-text{
	width: 76%;
	margin: 0 10px;
	text-align: justify;
	line-height: normal;
	
}



/*COMPANY*/
.block li {
	position: relative;
}

dl {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 40px 24px;
	color: white;
	background-color:rgba(50,106,164,0.58);
}

.type1 {
	overflow: hidden;
}

.type1 dl {
	opacity: 0;
	transform: translateY(100%);
	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.type1:hover dl {
	opacity: 1;
	transform: none;
}

.type1 dl {
	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.type1:not(:hover) dl {
	opacity: 0;
	transform: translateY(100%);
}

.type1 dl{
	font-size: 2.4rem;
	flex-direction: column;
}

.company dt{
	width: 60%;
}

.type1 dd{
	text-align: center;
	width: 36%;
	border: solid 1px #FFFFFF;
	padding: 16px;
	margin-top: 30px;
}

/*SERVICE*/
.service .item{
	background-color:  #223893;
	padding: 16px;
	border-radius: 5px;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.45);
	
}

.img_wrap{
  width: 280px;
  height: 224px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
	/*マウスオーバーでにゅんってなるけど、画像の位置を任意で決めたい*/
}

.img_wrap img{
	transition-duration: 0.5s;
	width: 100%;
}

.img_wrap:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}

.service .block{
	display: flex;
	text-align: center;
	justify-content: space-between;
}



/*ブラウザ幅が1024px以下になったら{}内のCSSにしてね*/
@media screen and (max-width: 1024px) {
	

	/* 複数画像切り替え---------------------------------------------- */


	/* 画像各種*/
	.slideimg:nth-of-type(1){
	  background-image: url('../img/mv01-tablet.jpg');
	}

	.slideimg:nth-of-type(2) {
	  background-image: url('../img/mv02-tablet.jpg');

	}

	.slideimg:nth-of-type(3) {
	  background-image: url('../img/mv03-tablet.jpg');

	}

	.slideimg:nth-of-type(4) {
	  background-image: url('../img/mv04-tablet.jpg');

	}

	.slideimg:nth-of-type(5) {
	  background-image: url('../img/mv05-tablet.JPG');
	}
	
	.animation{
		top: 40%;
		left: 20%;
		z-index: 100;
	}
	
	/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
    .pc { display: none !important; }
    .sp {
		display: block !important;
		width: 80%;
	}

	
	/*NEWS*/

	.newslist-item a{
		padding: 8px 8px;

	}

	.newslist-card-wrap{
		width: 25%;
	}
	
	span.newslist-card-cat{
		font-size: 1rem;
	}

	.newslist-card-text{
		width: 75%;
		margin: 0 15px;


	}

	
	.company-btn img{
		width: 100%;
	}
	
	
	
	.service .item{
		margin: 0 auto;
		width: 500px;
		border-radius: 15px;
		padding: 26px;
	}
	
	.img_wrap{
		margin: 0 auto;
		width: 100%;
		height: 100%;
	}
	
	.service .block{
		display: block;
	}
	
	.service .item{
		margin-bottom: 30px;
		
	}
}




/*ブラウザ幅が480px以下になったら{}内のCSSにしてね*/
@media screen and (max-width: 480px) {
	
	/*NEWS*/
	
	.news{
		font-size: 1rem;
	}

	.newslist-item a{
		padding: 8px 8px;

	}

	.newslist-card-wrap{
		width: 25%;
	}

	span.newslist-card-cat{
		margin: 0;
		font-size: 0.8rem;
	}

	.newslist-card-text{
		width: 75%;
		margin: 0 15px;
		line-height: 16px;
	}
	
	.img_wrap{
		width: 100%;
		height: 100%;
	}
	
	dl {
		padding: 18px;;
	}

	
	.type1 dl{
		font-size: 1.1rem;
	}

	.type1 dd{
		width: 40%;
		padding: 6px;
		margin-top: 0;
	}
	
	
	.service .item{
		margin: 0 auto 30px;
		width: 300px;
		border-radius: 10px;
		padding: 20px;
	}
	
	.img_wrap{
		margin: 0 auto;
		width: 100%;
		height: 100%;
	}
	
	
}
	
}