﻿@charset "UTF-8"

/*55th.png*/
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}

/*piano*/
@keyframes slide2 {
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}

/*音楽の世界*/
@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

/*画像ブロック*/
#container {
	clear: center;
	width: 80%;
	height: auto;
	position: relative;
	
}

/*３枚画像の共通設定*/
.slide1,.slide2,.slide3 {
	-webkit-animation-duration: 10s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 10s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
}

/*55th*/
.slide1 {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: relative;
	left: 250px;
	width: 80%;
	height: auto;
}

/*piano*/
.slide2 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left:250px;
	width: 80%;
	height: auto;
}

/*音楽の世界*/
.slide3 {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	left:250px;
	width: 80%;
	height: auto;
}

.article p {font-size:150%;
            text-align:center;	
	    margin:60px;
}

h2{display: block;
}

h2 img{ border-bottom:1px solid #6A5ACD;
}

#schedule .concert{list-style:none;
          text-decoration:none;
          margin-bottom:50px;
          display:block;
          
}

#schedule .concert img{width:500px;
                       float:left;
                       margin-right:40px;
		       
}

#schedule .square_btn {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #6A5ACD;
    border: solid 2px #6A5ACD;
    border-radius: 3px;
    transition: .4s;
}

#schedule .square_btn:hover {
    background: #6A5ACD;
    color: white;
}

#schedule .page {text-align:right;
}

