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

html, body {
	width:100%;
	height:100%;
	
}
body {
	overflow-x: hidden;
}
#IndexLogo {
	width:60px;
	float:right;
	margin-left:60px;
}

#IndexNav {
	width:123px;
	float:right;
	overflow:hidden;
	zoom:1;
}
#IndexNav li {
	float:right;
	width:16px;
	margin-left:14px;
}

#IndexMain {
	width:243px;
	margin:0 0 0 10%;
	padding-top:150px;
}

#IndexFooter {
	background:#000;
	position:absolute;
	width:100%;
	height:100px;
	bottom:-80px;
	bottom:-20px\9;
	left:-20px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
	-o-transform: rotate(-5deg);  /* Opera */
	padding:20px;
	letter-spacing:normal;
}

#IndexFooter_out {
	background:#a8a9a9;
	position:absolute;
	width:100%;
	height:200px;
	bottom:-100px;
	bottom:-10px\9;
	text-align:right;
	color:#FFF;
	left:0;
	left:-30px\9;
	-webkit-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-ms-transform: rotate(-8deg);
	transform: rotate(-8deg);
	-o-transform: rotate(-8deg);  /* Opera */
	padding:0 40px;
	letter-spacing:normal;
	-webkit-box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
	box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
	border-top:1px solid #999;	
}
#IndexFooter_out p {
	display:none;
}

#IndexCopy {
	padding:0 60px 0 0;
	background:url(../img/logo_footer.png) 100% 50% no-repeat; 
	margin: 0 20px 0 0;
	height:55px;
	color:#CCC;
	position: relative;
}
#IndexCopy p {
	position: absolute;
    top: 50%;
	right:65px;
    margin-top:-1.5em;
	margin-top:-1em\9;
	line-height:150%;
	text-align:right;
	letter-spacing:normal;
}
#IndexCopy, #IndexCopy p {
	-webkit-transform: rotate(-5deg)\9;
	-moz-transform: rotate(-5deg)\9;
	-ms-transform: rotate(-5deg)\9;
	transform: rotate(-5deg)\9;
	-o-transform: rotate(-5deg)\9;  /* Opera */
	
}
#IndexMark {
	width:360px;
	height:100px;
	position:absolute;
	right:60px;
	bottom:50%;
	margin-bottom:-100px;
	z-index:10;
}


ul#News {
    position: fixed;
    margin-left: -460px;
    padding: 0px;
    top: 150px;
	left:0;
    list-style: none;
    z-index:1;
	font-size:90%;
}
* html ul#News {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop+150));
}
ul#News li div {
	 width:420px;
	 background-color:#FFF;
	 background-image:url(../img/bg-oshirase.png);
	 background-position:top right;
	 background-repeat:no-repeat;
	 padding:20px 50px 20px 20px;
	 -sand-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	 -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
 ul#News li div:hover {
	 cursor:pointer;
}
ul#News li div li {
	border-bottom:1px dotted #CCC;
	padding:0 0 5px;
	margin: 0 0 5px;
}

ul#News li div ul {
	margin-bottom:10px;
}
#scroll {
	position: absolute;
	width: 360px;
    right: 60px;
    bottom: calc(50% - 140px);
    z-index: 10;
    text-align: center;
}
#scroll a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: #333;
	opacity: 1;
	transition-duration: .3s;
}
#scroll a:hover {
	opacity: .6;
}
#scroll a::after {
	position: absolute;
	bottom:calc(-100% - 12px);
	left: 50%;
	margin-left: -20px;
	content: "";
	display: block;
	 width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 20px solid #333;
  border-bottom: 0;
}