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

nav#fixedBox li:first-child {
	box-shadow:0px 0px 10px 2px #000000 inset;
	-moz-box-shadow:0px 0px 10px 2px #000000 inset;
	-webkit-box-shadow:0px 0px 10px 2px #000000 inset;
}

#weekly a {
	display: block;
	width: 300px;
	margin: 10px auto;
	padding: 20px 0;
	border-radius: 5px;
	color: #000;
	font-size: 120%;
	background: rgb(201,162,82);
	background: -moz-linear-gradient(top, rgba(201,162,82,1) 0%, rgba(242,217,143,1) 20%, rgba(248,241,226,1) 40%, rgba(199,139,34,1) 75%, rgba(230,188,110,1) 100%);
	background: -webkit-linear-gradient(top, rgba(201,162,82,1) 0%,rgba(242,217,143,1) 20%,rgba(248,241,226,1) 40%,rgba(199,139,34,1) 75%,rgba(230,188,110,1) 100%);
	background: linear-gradient(to bottom, rgba(201,162,82,1) 0%,rgba(242,217,143,1) 20%,rgba(248,241,226,1) 40%,rgba(199,139,34,1) 75%,rgba(230,188,110,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9a252', endColorstr='#e6bc6e',GradientType=0 );
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
}

#weekly a:hover {
	box-shadow:0px 0px 10px 2px #000000 inset;
	-moz-box-shadow:0px 0px 10px 2px #000000 inset;
	-webkit-box-shadow:0px 0px 10px 2px #000000 inset;
}

.modal {
	position:fixed;
	display:none;
	z-index:9999;
	top:30%;
	left:5%;
	width:90%;
	height:100%;
	margin:0;
	padding:50px 0 0 0;
	text-align:center;
	font-size:21px;
}

.modal p {
	margin-bottom:6px;
	color: #F00;
	font-size: 16px;
	text-align:center;
	line-height: 21px;
}

.modal a {
	cursor:pointer;
	color: #fff;
	text-decoration:underline;
	line-height: 350%;
	font-size: 200%;
	display: block;
	background: #333;
	border-radius: 5px;
	width: 70%;
	margin: 0 auto;
}

.modal img {
	max-width: 410px;
	width: 100%;
}

#newsletter {
	color: #fff;
	padding: 15px 0;
	background: #000;
}

#newsletter form {
	margin-top: 5px;
}

#newsletter span {
	color: #e14c3d;
	font-size: 70%;
}

input[type="text"] {
   border: 1px solid #c9b7a2;
   background: #eedfc6;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   color: #2f507e;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   padding:8px;
   width:280px;
   }
input[type="text"]:focus {
   background: #fff;
   color: #000000;
}

input[type="submit"] {
   border-radius: 5px;
  background: rgb(201,162,82);
	background: -moz-linear-gradient(top, rgba(201,162,82,1) 0%, rgba(242,217,143,1) 20%, rgba(248,241,226,1) 40%, rgba(199,139,34,1) 75%, rgba(230,188,110,1) 100%);
	background: -webkit-linear-gradient(top, rgba(201,162,82,1) 0%,rgba(242,217,143,1) 20%,rgba(248,241,226,1) 40%,rgba(199,139,34,1) 75%,rgba(230,188,110,1) 100%);
	background: linear-gradient(to bottom, rgba(201,162,82,1) 0%,rgba(242,217,143,1) 20%,rgba(248,241,226,1) 40%,rgba(199,139,34,1) 75%,rgba(230,188,110,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9a252', endColorstr='#e6bc6e',GradientType=0 );
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
   padding: 7px 18px;
   font-size: 14px;
   text-decoration: none;
   vertical-align: middle;
   border: none;
   }
input[type="submit"]:hover {
   box-shadow:0px 0px 10px 2px #000000 inset;
	-moz-box-shadow:0px 0px 10px 2px #000000 inset;
	-webkit-box-shadow:0px 0px 10px 2px #000000 inset;
   }

#from {
	color: #fff;
	margin: 0;
	background: #000;
}

#from h3 {
	padding-top: 10px;
}

.timestamp {
	font-size: 70%;
	text-align: right;
}

#from img {
	max-width: 100%;
}

.isotope {
	margin-top: 10px;
}

#tumblist {
	margin: 0 auto;
	width: 100%;
	height: 100px;
	position: relative;
	overflow: hidden;
	color: #fff;
}

#tumblist ol {
	height: 100px;
	min-width: 100%;
}

#tumblist ol li {
	width: 100px;
	height: 100px;
	display: inline;
	overflow: hidden;
}

#tumblist ol li img {
	height: 100px;
}

.marquee {
  overflow: hidden; /* スクロールバーが出ないように */
  position: relative; /* マーキーの内容部分の位置の基準になるように */
}
 /* マーキーの内容部分の高さ確保 */
.marquee::after {
  content: "";
  white-space: nowrap;
  display: inline-block;
}
/* マーキーさせたい部分(内側) */
.marquee > .marquee-inner {
  position: absolute;
  top: 0;
  white-space: nowrap;
  animation-name: marquee;
  animation-timing-function: linear;
  animation-duration: 60s;
  animation-iteration-count: infinite;
}
/* マウスオーバーでマーキーストップ */
.marquee > .marquee-inner:hover {
  animation-play-state: paused;
  cursor: default;
}
/** マーキーアニメーション */
@keyframes marquee {
    0% { left: 100%; transform: translate(0); }
  100% { left: 0; transform: translate(-100%); }
}

/* sideNavi
------------------------- */
.wideslider {
	width: 100%;
	height: 400px;
	text-align: left;
	position: relative;
	overflow: hidden;
	background: #000;
}

.wideslider ul,
.wideslider ul li {
    float: left;
    display: inline;
    overflow: hidden;
}
 
.wideslider_base {
    top: 0;
    position: absolute;
}
.wideslider_wrap {
    top: 0;
    position: absolute;
    overflow: hidden;
 
}
.slider_prev,
.slider_next {
    top: 0;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    cursor: pointer;
} 
.pagination {
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 15px;
    text-align: center;
    position: absolute;
    z-index: 200;
}
 
.pagination a {
    margin: 0 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
    overflow: hidden;
    background: #333;
}
.pagination a.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
 
/* =======================================
    ClearFixElements
======================================= */
.wideslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.wideslider ul {
    display: inline-block;
    overflow: hidden;
}

.wideslider img {
	width: 100%;
	max-width: 600px;
}

#schedule {
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
	-webkit-justify-content: space-around; /* Safari */
	justify-content: space-around;
}

@media screen and (min-width: 1024px){
	#topbanner {
		margin-top: 141px;
	}
	
	.viewer img {
		width: 100%;
		overflow: hidden;
	}
}

@media screen and (max-width: 1023px){
	.drawer-menu li:first-child {
		background: #e14c3d;
	}
	
}

@media screen and (max-width:750px){
	/* マーキーさせたい部分(内側) */
.marquee > .marquee-inner {
  position: absolute;
  top: 0;
  white-space: nowrap;
  animation-name: marquee;
  animation-timing-function: linear;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

.modal {
	position:fixed;
	display:none;
	z-index:9999;
	top:0;
	left:5%;
	width:90%;
	height:100%;
	margin:0;
	padding:50px 0 0 0;
	text-align:center;
	font-size:21px;
}
}