﻿body{
background-image:url();
background-size:cover;
}

.word{
font-family:"メイリオ",sans-serif;
font-size:11pt;
color:black;
}

.word-2{
font-family:"メイリオ",sans-serif;
font-size:10pt;
color:black;
line-height:60%;
}

.word-3{
font-family:"メイリオ",sans-serif;
font-size:10pt;
color:black;
line-height:150%;
}

.word-4{
font-family:"メイリオ",sans-serif;
font-size:10pt;
color:black;
line-height:180%;
}

.word-5{
font-family:"游明朝",sans-serif;
font-size:28pt;
color:white;
line-height:40%;
}

.table-css{
border-collapse: collapse;
}



@keyframes slide1 {
	0% {opacity: 0;}
	5% {opacity: 1;}
	15% {opacity: 1;}
	20% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide2 {
	0% {opacity: 0;}
	20% {opacity: 0;}
	25% {opacity: 1;}
	35% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide3 {
	0% {opacity: 0;}
	40% {opacity: 0;}
	45% {opacity: 1;}
	55% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide4 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	65% {opacity: 1;}
	75% {opacity: 1;}
	80% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide5 {
	0% {opacity: 0;}
	80% {opacity: 0;}
	85% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}



/*画像ブロック*/
#mainimg {
	clear: left;
	width: 100%;
	height: auto;
	position: relative;
}

/*5枚画像の共通設定*/
#slide1,

#slide1 {
	-webkit-animation-name: slide1;
	animation-name: slide1;
	position: relative;
	width: 780px;
	height: 320px;
}

#slide2 {
	-webkit-animation-name: slide2;
	animation-name: slide2;
	position: absolute;
	left:10px;
	top:0px;
	width: 780px;
	height: 320px;
}

#slide3 {
	-webkit-animation-name: slide3;
	animation-name: slide3;	
	position: absolute;
	left:10px;
	top:0px;
	width: 780px;
	height: 320px;
}

#slide4 {
	-webkit-animation-name: slide4;
	animation-name: slide4;	
	position: absolute;
	left:10px;
	top:0px;
	width: 780px;
	height: 320px;
}

#slide5 {
	-webkit-animation-name: slide5;
	animation-name: slide5;	
	position: absolute;
	left:10px;
	top:0px;
	width: 780px;
	height: 320px;
}

.pad{
padding:0 10px 0 0;
}

.pad-2{
padding:0 0 0 10px;
}

.under{
background: linear-gradient(transparent 50%, rgba(238, 238, 238, .5));
}

.under-2{
background: linear-gradient(transparent 50%, rgba(255, 255, 0, .5));
}

@media screen and (max-width:600px) {
}



.marquee {
  font-family:"ＤＨＰ平成明朝体W7",sans-serif;
  font-size  : 22px;
  color: #ffffff;
  height: 50px;
  text-align : center;
  line-height: 210%;
  overflow: hidden;
  width: 800px; /*marqueeブロックのサイズ*/
}
.marquee span {
  animation: 20s linear infinite marquee_effect;
  display: inline-block;
  padding-left: 100%; /* ブロックの外に出るようにpaddingを設定 */
  white-space:nowrap;
}
@keyframes marquee_effect {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
