@charset "utf-8" ;

#index {
	background-color: #333;
}

#index #contents {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 955px;
  height: 680px;
  /*height: 666px;*/
  border: none;
}

.dgrayBox {
	background-color: #333;
	box-shadow: 0px 0px 15px rgba(0,0,0,1) inset;
}

.lgrayBox {
	background-color: #606060;
	box-shadow: 0px 0px 15px rgba(0,0,0,1) inset;
  animation-name: opa;
  animation-duration: 1s;
}
/* ロード時に透過 */
@keyframes opa {
  0% {opacity: 0.1;	background-color: #333333;}
  100% {opacity: 1;	background-color: #606060;}
}

/* ========== シャッター ========== */

/* hover したら動く */
.shutterHover {
	transition-property: transform;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
	position: absolute;
	top: 0;
	z-index: 5;
}

/* ロード時に動く */
.shutterLoad1 {
  animation-name: show1;
  animation-duration: 1s; /* スピード */
  /*animation-delay: 0.25s; 開始時間 */
  animation-timing-function: ease;
	position: absolute;
	top: 0;
	left: 472px;
	z-index: 5;
}
@keyframes show1 {
  0% {transform: translate(-100%, 0px);}
  100% {transform: translate(0%, 0px);}
}

.shutterLoad2 {
  animation-name: show2;
  animation-duration: 2s;
  animation-timing-function: ease;
	position: absolute;
	top: 0;
	left: 472px;
	z-index: 5;
}
@keyframes show2 {
  0% {transform: translate(-100%, 0px);}
  100% {transform: translate(0%, 0px);}
}

.shutterLoad3 {
  animation-name: show3;
  animation-duration: 2s;
  animation-timing-function: ease;
	position: absolute;
	top: 0;
	right: 472px;
	z-index: 5;
}
@keyframes show3 {
  0% {transform: translate(100%, 0px);}
  100% {transform: translate(0%, 0px);}
}

.shutterLoad4 {
  animation-name: show4;
  animation-duration: 2.5s;
  animation-timing-function: ease;
	position: absolute;
	top: 0;
	right: 472px;
	z-index: 5;
}
@keyframes show4 {
  0% {transform: translate(100%, 0px);}
  100% {transform: translate(0%, 0px);}
}

#index #header{
	width:472px;
	height:51px;
	margin:30px 0 0 0;
	background-image:url(../images/header_bg.jpg);
  overflow: hidden;
}

/* ========== mainVisual ========== */
.mainVisualWrap {
	position: relative;
	width:472px;
	height: 463px;
	margin: 30px 0 4px 0;
  overflow: hidden;
	z-index: 1;
}
.mainVisualWrap:hover .shutterHover {
  transform: translate(-478px,0);
}

.mainVisualWrap #slideshow {
	margin-top: 0;
	z-index: 3;
}
.mainVisualWrap ul#slideshow li {
	padding: 10px 9px;
}

.topWorks {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
}

/* ========== infoWrap ========== */
.infoWrap {
	position: relative;
	width:472px;
	height: 125px;
	margin: 4px 0 0 0;
  overflow: hidden;
}

.infoCon {
	padding: 12px 4px 12px 12px;
}

.infoBox {
	/*overflow: auto;*/
	width: 213px;
	height: 80px;
	margin-top: 5px;
	overflow: hidden;
}
.infoBox::-webkit-scrollbar {
  display: none;
}

.infoBox iframe {
	width: 214px;
	border: none;
	background-color: #333;
}

/* ========== news.html / anounce.html ========== */
.iframeWrap {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴPro W3", "メイリオ", "MS　UIゴシック", sans-serif;
	background-color: #333;
	margin: 0;
	padding: 0;
}

.iframeArea {
	font-size: 10px;
	color: #fff;
	line-height: 140%;
	margin: 0;
	padding: 0;
	border: none;
}

.iframeArea dt {
	text-align: left;
	margin: 0;
	padding: 0;
}

.iframeArea dd {
	text-align: left;
	margin: 0 0 10px 0;
	padding: 0;
}
.iframeArea dd a {
	color: #999;
	text-decoration: underline;
}
.iframeArea dd a:hover {
	color: #ccc;
	text-decoration: underline;
}

/* ========== headUnder ========== */
.headUnder {
	width: 472px;
	height: 25px;
	margin: 5px 0 0 0;
	overflow: hidden;
	position: relative;
}

.headUnder p {
	font-size: 9px;
	color: #999;
	text-align: right;
	line-height: 26px;
	display: block;
	padding-right: 10px
}

.headUnder2 {
	width: 472px;
	height: 25px;
	margin: 5px 0 0 0;
	overflow: hidden;
	position: relative;
}

.headUnder2 p {
	display: inline-block;
	color: #999;
	line-height: 26px;
}

.headUnderContents{
	float: left;
	display:flex;
	font-size: 10px;
	line-height: 26px;
	padding-left: 1.5em;
	color:#999;
}

.headUnderContents a:hover{
	text-decoration: none;
}

.count {
	color: #999;
}


/* ========== topRightCon ========== */
.topRightWrap {
	position: relative;
	height: 546px;
	font-size: 11px;
	color: #fff;
	line-height: 150%;
	margin: 5px 0 0 0;
	overflow: hidden;
	z-index: 1;
}

.topRightCon {
	padding: 12px 4px 12px 12px;
}

.topReport {
	width: 245px;
	float: left;
}
.topReport:hover .shutterHover {
  transform: translate(245px,0);
}

.topColumn {
	width: 223px;
	float: right;
}
.topColumn:hover .shutterHover {
  transform: translate(223px,0);
}

.topDataBox {
	overflow: auto;
	height: 490px;
}

.ttl {
	color: #fc6;
	margin-bottom: 15px;
}

.day {
	font-size: 10px; /* 10px以下chrome対策 */
	-moz-transform: scale(0.9);
	-webkit-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	color: #fc6;
	text-align: right;
	float: right;
	margin-bottom: 15px;
}

.txt {
	clear: both;
}

.topReport .txt img {
	width: 50%;
	height: auto;
	float: right;
	margin: 0;
	padding: 8px;
}

.topReport .txt img.aligncenter {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 8px 5px 8px 0;
	display: block;
}

.moreBtn {
	display: inline-block;
	position: relative;
	float: right;
	margin-right: 5px;
	margin-bottom: 20px;
}

.moreBtn a {
	font-size: 10px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding: 1px 15px 1px 20px;
	background: linear-gradient(#666, #444);
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444));
	background: -moz-linear-gradient(top, #666, #444);
	background: -o-linear-gradient(top, #666, #444);
	background: -ms-linear-gradient(top, #666, #444);
	box-shadow:  1px 1px 1px rgba(0,0,0,0.4);
	-webkit-box-shadow:  1px 1px 1px rgba(0,0,0,0.4);
	-moz-box-shadow:  1px 1px 1px rgba(0,0,0,0.4);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.moreBtn::before {
  position: absolute;
  top: 50%;
  left: 7px;
  content: '';
  margin-top: -3px;
  border: 5px solid transparent;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-color: #999;
  transition: all .3s;
}
.moreBtn a:hover {
	background: linear-gradient(#444, #666);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#666));
	background: -moz-linear-gradient(top, #444, #666);
	background: -o-linear-gradient(top, #444, #666);
	background: -ms-linear-gradient(top, #444, #666);
}

/* ========== footer ========== */

#footer {
	margin-top: 8px;
}

/*.counter {
	display: inline-block;
	text-align: left;
}*/

small {
	font-size: 9px;
	color: #999;
	line-height: 26px;
	padding-left: 8px;
	float: left;
}

ul.sns {
	float: right;
}

ul.sns li {
	display: inline-block;
	margin-right: 2px;
}

ul.sns a:hover img {
  opacity: 0.9;
}