@charset "UTF-8";

html,body{
    hight: 100%;    /*高さを100％に設定*/
}



.fade3{
  animation-name:fade-in3;
  animation-duration:2s;
  animation-timing-function: ease-in-out;
  animation-delay:0.5s;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode: forwards;
}

@keyframes fade-in3 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


.fade{
  animation-name:fade-in;
  animation-duration:2s;
  animation-timing-function: ease-in-out;
  animation-delay:1s;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  0% {opacity: 0; transform: translate3d(0,10px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}


.fade2{
  animation-name:fade-in2;
  animation-duration:2s;
  animation-timing-function: ease-in-out;
  animation-delay:3s;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode: forwards;
}

@keyframes fade-in2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


.backstretch{
	position:relative !important;
}


	@keyframes arrGif {
		0% {
			bottom: 70px;
		}
		10% {
			bottom: 65px;
		}
		20% {
			bottom: 70px;
		}
	}
	@-webkit-keyframes arrGif {
		0% {
			bottom: 70px;
		}
		10% {
			bottom: 65px;
		}
		20% {
			bottom: 70px;
		}
	}
	@-ms-keyframes arrGif {
		0% {
			bottom: 70px;
		}
		10% {
			bottom: 65px;
		}
		20% {
			bottom: 70px;
		}
	}
	
	@keyframes animationZoom {
	100%{ transform:scale(1.2); }         
	}

/*pc*/
@media print, screen and (min-width: 769px) { 
.smt{
	display:none;
  }


	.centerMiddle{
    margin: -140px 0 0 -230px;  /*縦横半分をネガティブマージンでずらす*/
    position: absolute;     /*body要素に対して絶対配置*/
    top: 50%;       /*上端を中央に*/
    left: 50%;      /*左端を中央に*/
    width: 460px;   /*横幅*/
    height: 280px;  /*縦幅*/
    z-index:5;
    opacity: 0;
	}

	.topscroll{
		margin: -36px 0 0 -40px;  /*縦横半分をネガティブマージンでずらす*/
		position: absolute;     /*body要素に対して絶対配置*/
    bottom: 5%;       /*上端を中央に*/
    left: 50%;      /*左端を中央に*/
		width: 80px;   /*横幅*/
    height: 72px;  /*縦幅*/
		transition: 0.4s;
		animation: arrGif 3s ease -2s infinite alternate;
		-webkit-animation: arrGif 3s ease -2s infinite alternate;
		-ms-animation: arrGif 3s ease -2s infinite alternate;
		z-index: 10;
	}
	
	.backstretch-item img{
		animation: animationZoom 20s ease-in-out 0s infinite normal;
	}
	


 /* スライダー */
.slider{
	margin-top:100px;
}

.slider li img{
	width:100%;
}

.slider .slick-prev {
    width: 28px;
    height: 46px;
    background: url(../images/slider_arrow_left.png) left center no-repeat;
    background-size: 28px 46px;
    left: 15px;
    z-index: 2;
}
.slider .slick-prev:hover{
    width: 28px;
    height: 46px;
    background: url(../images/slider_arrow_left_hv.png) left center no-repeat;
    background-size: 28px 46px;
    left: 15px;
    z-index: 2;
}

.slider .slick-next {
    width: 28px;
    height: 46px;
    background: url(../images/slider_arrow_right.png) left center no-repeat;
    background-size: 28px 46px;
    right: 15px;
    z-index: 2;
}
.slider .slick-next:hover{
    width: 28px;
    height: 46px;
    background: url(../images/slider_arrow_right_hv.png) left center no-repeat;
    background-size: 28px 46px;
    right: 15px;
    z-index: 2;
}
.slider .slick-prev:before,
.slider .slick-next:before {
    content: '';
}

 /* TOPIC */
.main .topicarea{
}

.main .block .topic{
	width:720px;
	margin:0 auto;
	margin-top:50px;
	
}

.main .block .topic p{
	font-size:20px;
	padding-bottom:10px;
}

.main .block .topic .article{
	border-top:1px solid #FFF;
	border-bottom:1px solid #FFF;

}

.main .block .topic .article dl{
	height:150px;
	overflow:scroll;
	padding:10px;
	margin: 10px 0;
}

.main .block .topic .article dl::-webkit-scrollbar{
  width: 5px;
	height:0;
}
.main .block .topic .article dl::-webkit-scrollbar-track{
  background: #000;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}
.main .block .topic .article dl::-webkit-scrollbar-thumb{
  background: #fff;
  border-radius: 10px;
  box-shadow: none;
}

.main .block .topic .article dl{
	scrollbar-track-color#000;
	scrollbar-base-color:#000;
	scrollbar-face-color:#000;
	scrollbar-arrow-color:000;
	overflow-x: hidden;
}

.main .block .topic .article dl dt{
	float:left;
	width:100px;
}
.main .block .topic .article dl dd{
	margin-left:100px;
	margin-bottom:10px;
}

.main .block .topic .title a{
	color:#FFF;
	text-decoration:underline;
}
.main .block .topic .title a:hover{
	color:#c8a928;
}
.main .block .topic .article dl dd .newMark{
	color:#c8a928;
}

}/*pc*/



 /* スマホ・タブレット */
@media print, screen and (max-width: 768px) { 

body{
    min-height: 600px;    /*高さを100％に設定*/
}
.pc{
	display:none;
}

	.centerMiddle{
		text-align:center;
    position: absolute;     /*body要素に対して絶対配置*/
    top: 25%;       /*上端を中央に*/
    width: 100%;   /*横幅*/
    height: 100%;  /*縦幅*/
    z-index:5;
    opacity: 0;
	}

	.centerMiddle img{
		width:100%;
		}
		
	.topscroll{
		margin: -36px 0 0 -40px;  /*縦横半分をネガティブマージンでずらす*/
		position: absolute;     /*body要素に対して絶対配置*/
    bottom: 5%;       /*上端を中央に*/
    left: 50%;      /*左端を中央に*/
		width: 80px;   /*横幅*/
    height: 72px;  /*縦幅*/
		transition: 0.4s;
		animation: arrGif 3s ease -2s infinite alternate;
		z-index: 10;
	}
	
	.backstretch-item img{
		animation: animationZoom 20s ease-in-out 0s infinite normal;
	}

 /* スライダー */
	.slider{
		margin-top:30px;
	}
	
	.slider li img{
		width:100%;
	}
	
	.slider .slick-prev {
			width: 28px;
			height: 46px;
			background: url(../images/slider_arrow_left.png) left center no-repeat;
			background-size: 28px 46px;
			left: 15px;
			z-index: 2;
	}
	.slider .slick-prev:hover{
			width: 28px;
			height: 46px;
			background: url(../images/slider_arrow_left_hv.png) left center no-repeat;
			background-size: 28px 46px;
			left: 15px;
			z-index: 2;
	}
	
	.slider .slick-next {
			width: 28px;
			height: 46px;
			background: url(../images/slider_arrow_right.png) left center no-repeat;
			background-size: 28px 46px;
			right: 15px;
			z-index: 2;
	}
	.slider .slick-next:hover{
			width: 28px;
			height: 46px;
			background: url(../images/slider_arrow_right_hv.png) left center no-repeat;
			background-size: 28px 46px;
			right: 15px;
			z-index: 2;
	}
	.slider .slick-prev:before,
	.slider .slick-next:before {
			content: '';
	}
	
 /* TOPIC */
.main .topicarea{
	width: 90% !important;
	margin: 0 auto !important;
}

.main .block .topic{
	width:100%;
	margin:0 auto;
	margin-top:50px;
	
}

.main .block .topic p{
	font-size:20px;
	padding-bottom:10px;
}

.main .block .topic .article{
	border-top:1px solid #FFF;
	border-bottom:1px solid #FFF;

}

.main .block .topic .article dl{
	height:150px;
	overflow:scroll;
	padding:10px;
	margin: 10px 0;
}

.main .block .topic .article dl::-webkit-scrollbar{
  width: 5px;
	height:0;
}
.main .block .topic .article dl::-webkit-scrollbar-track{
  background: #000;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}
.main .block .topic .article dl::-webkit-scrollbar-thumb{
  background: #fff;
  border-radius: 10px;
  box-shadow: none;
}

.main .block .topic .article dl{
	scrollbar-track-color#000;
	scrollbar-base-color:#000;
	scrollbar-face-color:#000;
	scrollbar-arrow-color:000;
	overflow-x: hidden;
}

.main .block .topic .article dl dt{
	float:left;
	width:100px;
}
.main .block .topic .article dl dd{
	margin-left:100px;
	margin-bottom:10px;
}

.main .block .topic .title a{
	color:#FFF;
	text-decoration:underline;
}
.main .block .topic .title a:hover{
	color:#c8a928;
}
.main .block .topic .article dl dd .newMark{
	color:#c8a928;
}


}/* スマホ・タブレット */