/*
メインCSS
*/

    	body {
    		background-color: #fff;
    	}
    	.menu-title {
    		background-color: #2D2D2D;
			color: #fff;
    	}
    	.formlabel {
    		padding-right: 0px;
    		padding-left: 15px;
    	}
    	.formbutton {
    		padding-left: 15px;
    	}
    	.frame-box {
    		padding: 15px;
    	}
    	.waku {
    		border: solid 2px #333;
    		padding: 5px;
    		margin: 5px;
    	}
    	h1 {
    		padding: 15px;
    		margin: 0px;
    	}
    	h4 {
    		padding: 15px;
    		margin: 0;
    	}
    	.indexmenu {
    		margin-right: -5px;
    		margin-left: 5px;
    	}
    	.button {
    		display: inline-block;
    		width: 100px;
    		height: 50px;
    		text-align: center;
    		line-height: 48px;
    		outline: none;
    	}
    	.button::before,
    	.button::after {
    		position: absolute;
    		z-index: -1;
    		display: block;
    		content: '';
    	}
    	.button,
    	.button::before,
    	.button::after {
    		-webkit-box-sizing: border-box;
    		-moz-box-sizing: border-box;
    		box-sizing: border-box;
    		-webkit-transition: all .3s;
    		transition: all .3s;
    	}
    	.button {
    		background-color: #333;
    		border: 2px solid #333;
    		color: #fff;
    		line-height: 48px;
    	}
    	.button:hover {
    		background-color: #fff;
    		border-color: #333;
    		color: #333;;
    	}


/* ナビバー */

.navbar-brand {
	font-size: 25px;
}
.navbar-inverse .navbar-brand {
	color: #DDD;
}
.navbar-inverse .navbar-brand:hover {
	color: #3797FF;
}
.navbar-inverse .navbar-nav>li>a {
color: #DDD;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #3797FF;
}

.navbar-inverse{
border-radius: 0;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	position: fixed;
	z-index: 9;
	width: 100%;
}
.navbar-header {
	width: 100%;
}
.navbar-header .container{
	width:100%;
}

/* フッター */
.footdata{
	margin-top:20px;
	background-color:#111111;
	color:#FFFFFF;
	padding:10px;
	position:absolute;
	bottom:0;
	position: fixed;
	z-index: 9;
	width: 100%;
	}
.copyright{
	text-align:center;
	}
html,body{
	height:100%;
	}
.main{
	position:relative;
	height:auto !important; /*IE6対策*/
    height: 100%; /*IE6対策*/
    min-height: 100%;
	padding-bottom:50px;
	background-image:url(../img/1ldk-background.jpg);
	background-size:100%;
	}
.main > .container {
margin-bottom: 20px;
padding-top: 90px;
}

/* index */
.mask{
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	}
.follow_us{
	padding: 1px 15px;
	background-color: rgba(255, 30, 237, 0.75);
	color: #fff;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	margin: 0 0 20px;
	}
.news_us{
	padding: 1px 15px;
	background-color: rgba(0, 85, 255, 0.9);
	color: #fff;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	margin: 0 0 20px;
	}
.frame-box h1{
	color:#fff;
	}
.frame-box, .mask{
	background-color: rgba(255,255,255,0.5);
	overflow:hidden;
}
.news_body {
	overflow: auto;
	height: 480px;
	margin-bottom: 20px;
}
.whats_new {
	overflow: hidden;
	padding: 40px;
	padding-left: 0px;
}
.whats_new dt {
	border-bottom: 1px solid #fff;
	margin-bottom:5px;
}
.whats_new dd {
	width: 70%;
	float: left;
}
.whats_new dd p{
	font-size: 20px;
}
.whats_new img {
	float: right;
}

/* スケジュール */
.schedule-frame{
	width:100%;
	padding:0 15px;
	}
.schedule-frame iframe{
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	}

/* About us */
.aboutus-content h1 {
	background-color: #FF4040;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	margin-bottom: 10px;
}
.aboutus-content > ul{
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
color: #fff;
padding: 5px;
width: 48%;
float: left;
height: 150px;
margin: 1%;
	}
.aboutus-content > ul:nth-of-type(1){
	background-color: rgba(54, 19, 253, 0.7);;
	}
.aboutus-content > ul:nth-of-type(2){
	background-color: rgba(184, 0, 255, 0.7);
	width: 23%;
	}
.aboutus-content > ul:nth-of-type(3){
	background-color: rgba(0, 157, 255, 0.7);
	width: 23%;
	}
.aboutus-content > ul:nth-of-type(4){
	background-color: rgba(0, 206, 96, 0.7);
	}
.aboutus-content > ul:nth-of-type(5){
	background-color: rgba(255, 0, 166, 0.7);
	overflow: hidden;
	height: 320px;
	float:right;
	}
	.aboutus-content ol li:nth-of-type(2){
		padding: 10px;
		}
.aboutus-content > ul:nth-of-type(6){
	background-color: rgba(255, 152, 0, 0.7);
	}
.aboutus-content ol{
	padding:0;
	width: 48%;
	float: left;
	margin: 1%;
	height: 220px;
	}
.aboutus-content ol:nth-of-type(1){
	background-color: rgba(0, 255, 197, 0.7);
	}
.aboutus-content ol:nth-of-type(2){
	background-color: rgba(66, 255, 0, 0.7);
	font-size: 12px;
	}

/* EVENT */
.event-content h1 {
	background-color: #2DAD36;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	margin-bottom: 10px;
}
.party-content{
	height:500px;
	background-image:url(../img/party.jpg);
	background-size:100%;
	color:#7200AF;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	}
.live-content{
	height:500px;
	background-image:url(../img/live.jpg);
	background-size:100%;
	color:#7200AF;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	}
body .event-content .party-content:hover{
	opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
	color:#FF033A;
	}
body .event-content .live-content:hover{
	opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
	color:#FF033A;
	}
.click{
	width:200px;
	height:200px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin:auto;
	background-color:rgba(255, 255, 255, 0.7);
	text-align:center;
	}
.click p{
	margin-top:60px;
	font-size:25px;
	}
/* Music Event */
.musicevent-content h1 {
	background-color: #C944FF;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	margin-bottom: 10px;
}
.musicevent-content p {
	background-color: #fafafa;
	padding: 10px;
	font-size: 22px;

}

/* Party Event */
.partyevent-content h1 {
	background-color: #F4AA38;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	margin-bottom: 10px;
}
.partyevent-content p {
	background-color: #fafafa;
	padding: 10px;
	font-size: 22px;
}



/* Act */
.act-content h1 {
	background-color: #255AFF;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	margin-bottom: 10px;
}
.perfomer-content{
	height:500px;
	background-image:url(../img/perfomer.jpg);
	background-size:100%;
	color:#7200AF;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	}
.band-content{
	height:500px;
	background-image:url(../img/band.jpg);
	background-size:100%;
	color:#7200AF;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	}
body .act-content .perfomer-content:hover{
	opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
	color:#FF033A;
	}
body .act-content .band-content:hover{
	opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
	color:#FF033A;
	}
.click{
	width:200px;
	height:200px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin:auto;
	background-color:rgba(255, 255, 255, 0.7);
	text-align:center;
	}
.click p{
	margin-top:60px;
	font-size:25px;
	}

/* Band / Musician */
.bandmusician-content h1 {
	background-color: #FF442C;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	margin-bottom: 10px;
}


/* Perfomer / Entertainer */
.performerentertainer-content h1 {
	background-color: #5044FF;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	margin-bottom: 10px;
}

/* Gallery */
.gallery-content h1 {
	background-color: #bf00df;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	margin-bottom: 10px;
}

/* Contact */
.contact-content h1 {
	background-color: #ff8c00;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	margin-bottom: 10px;
}

/* ポップアップ */
.band {
	background-color: rgba(0,0,0,0.5);
	}
.band .container{
	padding: 15px;
	margin: auto;
}
.band .info {
	background-color: #ffffff;
	margin: 5px;
	padding: 15px;
	height: auto;
	}
.band .top{
	height: 330px;
	}
.band-img{
	padding:5px;
	}
.band-img img{
	height: 100%;
	padding-bottom: 5px;
	}
.main-info{
	background-color:#FFFFFF;
	margin: 20px 5px 5px 5px;
	padding:15px;
	}



/*
スライドショー
*/

.henka #complete .mask #complete ul #complete li {
	width: 1100px;
height: 350px;
	}
@media (max-width: 350px){
	.aboutus-content ol {
    width: 98%;
}
.aboutus-content > ul:nth-of-type(5) {
    height: inherit;
}
}
@media (max-width: 768px){
.henka, #complete .mask, #complete ul, #complete li {
width: 0px;
height: 0px;
}
.aboutus-content > ul{
	width: 100%;
	}
.aboutus-content > ul:nth-of-type(2) {
    width: 48%;
}
.aboutus-content > ul:nth-of-type(3) {
    width: 48%;
}
.aboutus-content > ul:nth-of-type(5) {
    float: left;
}
}
@media (min-width: 768px){
.henka, #complete .mask, #complete ul, #complete li{
width: 690px;
height: 224px;
}
}
@media (min-width: 992px){
.henka, #complete .mask, #complete ul, #complete li{
width: 910px;
height: 290px;
}
}
@media (min-width: 1200px){
.henka, #complete .mask, #complete ul, #complete li{
width: 1100px;
height: 350px;
}
}
.anime .mask ul {
position: relative;
}
.slide ul {
list-style: none;
}
.sample ul, .sample p, .sample li, .sample ol, .sample h1, .sample h2, .sample a, .sample img, .sample dl {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
 z-index: 0;
}
ul, menu, dir {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.slide ul{
  list-style:none;
}

.slide ul li h2{
position:absolute;
padding:0.5em 1em;
background:rgba(0,0,0,0.5);
color:#fff;
top:0;
left:-160px;
}
.slide ul li:hover h2 {
left:0px;
}
.slide.transit ul li h2{
/*
transitionの秒数を0.5秒に指定。その他の指定はdefaultに任せました。
-moz-はFirefox用のベンダープレフィックスで、
-webkit-がSafariとChrome用のベンダープレフィックスです。
*/
-moz-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
/*フワッと表示される様に不透明度も設定*/
opacity:0;
}
.slide.transit ul li:hover h2 {
/*不透明度が0%から100%になるように*/
opacity:1;
}
#sampleAnime {
    /* この記事を書いている時点ではベンダープレフィックスが必要 */
    -moz-animation:hogehoge 5s infinite;
    -webkit-animation:hogehoge 5s infinite;
    animation:hogehoge 5s infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; }
	16% { top:0px; opacity:1; z-index:0; }
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	16% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; }
	36% { top:0px; opacity:1; z-index:0; }
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	36% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; }
	56% { top:0px; opacity:1; }
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	56% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	76% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; }
	16% { top:0px; opacity:1; z-index:0; }
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; }
	50% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	16% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; }
	36% { top:0px; opacity:1; z-index:0; }
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	36% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; }
	56% { top:0px; opacity:1; z-index:0; }
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	56% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	76% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}

/*以下が@keyframes*/
@-webkit-keyframes slide {
0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
10% {left:0%;opacity:1;}                /*(a)全体の1/10秒でフレームイン終了*/
33.3% {left:0%;opacity:1;z-index:-10;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
43.3% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
50% {left:-100%;top:100%;}                /* 分かりやすい様に、見えないエリアで迂回させています */
70% {left:100%;top:100%;}
80% {left:100%;top:0%;}
}
.anime.loop.paused .mask:hover li{
animation-play-state:paused;
}
.progress .progress-bar {
background:rgba(0,0,0,1);
height:5px;
width:100%;
position:absolute;
z-index:100;
bottom:0;
left:0;
-moz-animation:bar 12s linear infinite;
-webkit-animation:bar 12s linear infinite;
animation:bar 12s linear infinite;
}
@-webkit-keyframes bar {
0%,43.3%,76.6% {width:0;opacity:0;}    /*スライドのフレームイン中は表示しない */
10%,53.3%,86.6% {width:10%;opacity:0.5;}/*フレームイン終了。ここからbarがのびる */
30%,63.3%,96.6% {opacity:1;}        /*barがのびきる前にopacityを1にするとおしゃれ */
33.3%,66.6%,99.9% {width:100%;opacity:0.1;}/*ここまではbarがのびる */
34%,67%,100% {width:100%;opacity:0;}    /*barを消す */
}
.progress .mask:hover .progress-bar{
animation-play-state:paused;
bottom:-10px;
}
#complete .mask {
    margin:0 auto 40px;
    position:relative;
    cursor:pointer;
    overflow:hidden;
}

#complete ul{
    list-style:none;

    margin: 0;
    padding: 0;
    position:relative;
}

#complete li {
    margin:0;
    padding: 0;
    top:0;
    left:100%;
    position:absolute;
    overflow:hidden;
    -moz-animation:slide 28s 0s infinite;
    -webkit-animation:slide 28s 0s infinite;
    animation:slide 28s 0s infinite;
    -moz-animation-play-state:running;
    -webkit-animation-play-state:running;
    animation-play-state:running;
}

#complete li:nth-of-type(1) {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay:0s;/* 1番目のスライドはすぐにスタート */
}
#complete li:nth-of-type(2) {
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
animation-delay:4s;/* 2番目のスライドは4秒後にスタート */
}
#complete li:nth-of-type(3) {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay:8s;/* 3番目のスライドは8秒後にスタート */
}
#complete li:nth-of-type(4) {
-moz-animation-delay: 12s;
-webkit-animation-delay: 12s;
animation-delay:12s;/* 1番目のスライドはすぐにスタート */
}
#complete li:nth-of-type(5) {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay:16s;/* 2番目のスライドは4秒後にスタート */
}
#complete li:nth-of-type(6) {
-moz-animation-delay: 20s;
-webkit-animation-delay: 20s;
animation-delay:20s;/* 3番目のスライドは8秒後にスタート */
}
#complete li:nth-of-type(7) {
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay:24s;/* 1番目のスライドはすぐにスタート */
}
#complete li:nth-of-type(8) {
-moz-animation-delay: 28s;
-webkit-animation-delay: 28s;
animation-delay:28s;/* 1番目のスライドはすぐにスタート */
}
#complete a {


width: 1100px;
height: 350px;
    display:block;
}
#complete h2 {
    position:absolute;
    padding:0.5em 1em;
    background:rgba(0,0,0,0.5);
    color:#fff;
    top:0;
    left:-110%;
    opacity:0;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
}
#complete .mask:hover h2 {
    left:0;
    opacity:1;
}

/*
マウスオーバーで停止
*/

/*
#complete .mask:hover .progress-bar,
#complete .mask:hover li{
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}
*/

#complete .progress-bar {
    background:rgba(0,0,0,1);
    height:5px;
    width:100%;
    position:absolute;
    z-index:100;
    bottom:0;
    left:0;
    -moz-animation:bar 12s linear infinite;
    -webkit-animation:bar 12s linear infinite;
    animation:bar 12s linear infinite;
}
/* keyframes for slide */
@-moz-keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
    10% {left:0%;opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
    33.3% {left:0%;opacity:1;z-index:-10;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    43.3% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}        /* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}
@-webkit-keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
    10% {left:0%;opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
    33.3% {left:0%;opacity:1;z-index:-10;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    43.3% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}        /* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}
@keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
    10% {left:0%;opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
    33.3% {left:0%;opacity:1;z-index:-10;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    43.3% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}        /* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}
/* keyframes for progress-bar */
@-moz-keyframes bar {
    0%,43.3%,76.6% {width:0;opacity:0;}
    10%,53.3%,86.6% {width:10%;opacity:0.5;}
    30%,63.3%,96.6% {opacity:1;}
    33.3%,66.6%,99.9% {width:100%;opacity:0.1;}
    34%,67%,100% {width:100%;opacity:0;}
}
@-webkit-keyframes bar {
    0%,43.3%,76.6% {width:0;opacity:0;}
    10%,53.3%,86.6% {width:10%;opacity:0.5;}
    30%,63.3%,96.6% {opacity:1;}
    33.3%,66.6%,99.9% {width:100%;opacity:0.1;}
    34%,67%,100% {width:100%;opacity:0;}
}
@keyframes bar {
    0%,43.3%,76.6% {width:0;opacity:0;}    /*スライドのフレームイン中は表示しない */
    10%,53.3%,86.6% {width:10%;opacity:0.5;}/*フレームイン終了。ここからbarがのびる */
    30%,63.3%,96.6% {opacity:1;}        /*barがのびきる前にopacityを1にするとおしゃれ */
    33.3%,66.6%,99.9% {width:100%;opacity:0.1;}/*ここまではbarがのびる */
    34%,67%,100% {width:100%;opacity:0;}    /*barを消す */
}


/*
ボタンのマウスオーバーイベント
*/
ul, ol {
list-style: none;
}
.side-follow ul {
padding: 0px ;
}
.side-follow ul .twitter a {
background-color: #00aced;
border: 2px solid #00aced;
}
.twitter {
padding: 0px 0px 10px 0px ;
}
.side-follow .facebook a {
background-color: #3c5a98;
border: 2px solid #3c5a98;
}
.side-follow ul li a {
display: block;
height: 54px;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
color: #fff;
font-family: inherit;
font-weight: 400;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.side-follow ul .twitter a::before {
top: -6px;
content: 't';
}
.side-follow .facebook a::before {
top: 0;
content: 'f';
margin-bottom: -10px;
font-size: 25px;
}
.side-follow ul .twitter a:hover {
background-color: #fff;
border-color: #00aced;
color: #00aced;
}
.side-follow .facebook a:hover {
background-color: #fff;
border-color: #3c5a98;
color: #3c5a98;
}
.side-follow ul .twitter a::before:hover {
color: #00aced;
}
.side-follow .facebook a::before:hover {
color: #3c5a98;
}
.side-follow ul li a::before {
position: relative;
top: -3px;
display: block;
-webkit-transition: .15s ease-in-out;
transition: .15s ease-in-out;
margin-bottom: -17px;
color: #fff;
font-family: 'fontello';
font-size: 26px;
}

/* ロールオーバーでメニュー表示 */
#dropmenu{
  position: relative;
  list-style-type: none;
}
#dropmenu li{
  float: left;
  height: 50px;
  margin: 0;
  padding: 0;
  text-align: center;
   z-index: 1;
}
#dropmenu li a{
  display: block;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li ul li{
  overflow: hidden;
  width: 150px;
  height: 0;
  color: #fff;
  background-color: rgba(0,0,0,0.8);
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li:hover ul li{
  overflow: visible;
  height: 38px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
#dropmenu li:hover ul li:first-child{
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{
  border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}