@CHARSET "UTF-8";
* {
    font-family: "Helvetica Neue", Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.6em;
	letter-spacing: 0.05em;
	border: none;
	outline: none;
	zoom: 1;
}
:focus {
	outline: 0;
}

/* default setting */
/* ------------------------------------------------------------- */
body {
    font-size: 0.8em;
    color: #333;
}
h1 {
	font-size: 1.6em;
}
h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1.2em;
}
h4,h5,h6 {
	font-size: 1em;
}
p {
	margin: 0 0 0.8em 0;
}
img {
	border: none;
}
a {
	font-style: normal;
	text-decoration: none;
}
    a:focus, a:hover {
	   outline:none;
	}
    a:focus img, a:hover img {
    	opacity: 0.8;
    }
ul, ol {
	list-style: none;
}
strong, em {
	text-decoration: none;
	font-style: normal;
	font-weight: bold;
}
address {
	text-decoration: none;
	font-style: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* structure setting */
/* ------------------------------------------------------------- */
html {
	height: 100%;
	width: 100%;
}
body {
	background: #000;
	height: 100%;
	width: 100%;
}
#page {
	background: url("img/bg.png") center top repeat;
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
	display: none;
}
#header {
	background: url("img/bg_header.png") center bottom repeat-x;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	z-index: 99;
	text-align: center;
}
#ieerror {
	background: #000;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 20px 0;
	text-align: center;
	color: #fff;
	z-index: 9999;
}
	#close {
		background: #ccc;
		color: #000;
		border-radius: 50%;
		height: 1.5em;
		width: 1.5em;
		display: inline-block;
		position: absolute;
		top: 20px;
		right: 20px;
	}
#loading {
	width: 100%;
	height: 100%;
	text-align: center;
	display: table;
}
	#inner { display: table-cell; vertical-align: middle; }
/*	#loading img { width: 100%; max-width: 400px; max-height: 300px; margin: auto;	}*/
	#loading img { width: 128px; max-width: 128px; max-height: 41px; margin: auto;	}
#contents {
	overflow: hidden;
	height: auto;
	width: 100%;
}
	#content {
		max-width: 2000px;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
	}

	#memory {
		background: #040200 url("img/bg_memory_content.png") center top repeat-x;
		height: 100%;
	}
		#memheader {
			background: url("img/bg_memory_header.png") center top repeat-x;
			height: 90px;
			width: 100%;
			position: relative;
			overflow: hidden;
		}
			#memtitle {
				line-height: 150px;
				text-align: center;
			}
			#sitetop {
				position: absolute;
				top: 27px;
				left: 40px;
			}
			#corptop {
				position: absolute;
				top: 32px;
/*				right: 140px;*/
				right: 40px;
			}
			#annivers {
				position: absolute;
				top: 34px;
				right: 40px;
			}
		#memcontnet {
			background: #040200 url("img/bg_memory_content.png") center bottom repeat-x;
			height: auto;
			width: 100%;
			overflow: hidden;
		}
			#memslider {
				overflow: visible !important;
				vertical-align: middle;
				width: 95%;
				height: auto;
				position: relative;
				margin: 0 auto;
				padding: 40px 0;
			}
			#effects {
				width: 100%;
				overflow: hidden;
				margin: 0 auto;
			}
		#memfooter {
			background: url("img/bg_memory_footer.png") center top repeat-x;
			height: 114px;
			width: 100%;
			position: relative;
		}
			#slidetitle {
				background: url("img/bg_memory_title.png") center center no-repeat;
				text-align: center;
				width: 100%;
				height: 80px;
				line-height: 80px;
				color: #fff;
				font-size: 20px;
				margin: 0 auto;
			}
			#first { position: absolute; top: 18px; left: 110px; z-index: 99; }
			#prev { position: absolute; top: 18px; left: 180px; z-index: 99; }
			#next { position: absolute; top: 18px; right: 180px; z-index: 99; }
			#last { position: absolute; top: 18px; right: 109px; z-index: 99; }
			#slidelogo { position: absolute; top: 18px; right: 25px; display: none; }
		
#footer {
	background: url("img/bg_footer.png") center top repeat-x;
	position: relative;
	width: 100%;
	height: 20px;
	text-align: center;
}


/* Frame setting */
/* ------------------------------------------------------------- */
.frame {
	height: 100%;
	line-height: 100%;
	overflow: hidden;
	padding: 0;
}
	.frame ul {
		list-style: none;
		margin: 0;
		padding: 0;
		height: 100%;
	}
	.frame ul li {
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.frame ul li a { display: block; }
	.frame ul li a:hover img { opacity: 1; z-index: 99; }
	.frame ul li a img { width: 100%; height: 100%; vertical-align: bottom; }

.effects {
}
	.effects ul {
	}
	.effects ul li {
		margin: 0 -20px;
		overflow: hidden;
		position: relative;
	}
	.effects ul li.active {
		z-index: 9999;
	}
	.effects ul li a {
		-webkit-perspective: 800px;
		-ms-perspective: 800px;
		perspective: 800px;
		-webkit-perspective-origin: 50% 50%;
		-ms-perspective-origin: 50% 50%;
		perspective-origin: 50% 50%;
	}
	.effects ul li a img {
		position: relative;
		-webkit-transform: rotateY(30deg) scale(0.8);
		-ms-transform: rotateY(30deg) scale(0.8);
		transform: rotateY(30deg) scale(0.8);
		-webkit-transition: -webkit-transform 300ms ease-out;
		transition: transform 300ms ease-out;
	}
	.effects ul li.active a img {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
	.effects ul li.active ~ li a img {
		-webkit-transform: rotateY(-30deg) scale(0.8);
		-ms-transform: rotateY(-30deg) scale(0.8);
		transform: rotateY(-30deg) scale(0.8);
	}


/* Memnote setting */
/* ------------------------------------------------------------- */
#memnote {
	position: absolute;
	top: 24%;
	right: 3%;
	z-index: 9999;
}
	#memnote:after {
		content: "";
		position: absolute;
		top: 50%; left: -25px;
		margin-top: -25px;
		display: block;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 20px 25px 20px 0;
		border-color: transparent rgba(0,0,0,0.8) transparent transparent;
	}
	#note {
		height: 100%;
		overflow: hidden;
		filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#90000000,endcolorstr=#90000000, gradienttype=0); /* IE8 */
		background: rgba(0,0,0,0.8);
		padding: 20px;
		width: 300px;
		color: #fff;
	}
	#notetitle {
		border-bottom: solid 1px #fff;
		line-height: 1.2em;
		margin-bottom: 0.8em;
		padding-bottom: 0.6em;
	}
	#note:hover #noteclose, #noteclose:hover {
		opacity: 1;
	}
	#noteclose {
		position: absolute;
		top: 10px;
		right: 10px;
		opacity: 0.3;
	}
	#notecontent {
		height: auto;
		margin-bottom: 1.5em;
	}
	#notereview {
		float: left;
		height: 20px;
		line-height: 1.0;
		margin-bottom: 6px;
		vertical-align: bottom;
	}
	#historytopics {
		clear: both;
		height: 20px;
		line-height: 1.0;
		margin-top: 0;
		padding: 0;
		vertical-align: bottom;
	}
	#notegood {
		float: right;
		display: none;
	}

/* MemReview setting */
/* ------------------------------------------------------------- */
#memreview {
	position: absolute;
	bottom: 0px;
	width: 100%;
}
	#reviewopen {
		position: relative;
		top: 0;
		left: 23%;
		width: 210px;
		height: 70px;
		display: block;
		z-index: 9999;
	}
	#review {
		background: url("img/bg_memory_review.png") center -14px no-repeat;
		background-size: cover;
		padding: 60px 80px;
		margin: -15px auto 0 auto;
		width: 70%;
		min-height: 607px;
		max-width: 920px;
		z-index: 9999;
		position: relative;
		display: none;
	}
	#reviewclose {
		position: absolute;
		top: 24px;
		right: 35px;
	}
	#imgbox {
		float: left;
		width: 25%;
		overflow: hidden;
		margin-bottom: 1em;
	}
		#reviewimg {
			background: #fff;
			border: solid 1px #c8c8c8;
			padding: 9px;
			vertical-align: bottom;
			margin-bottom: 1em;
		}
		#reviewimg img { width: 100%; vertical-align: bottom; }
		#reviewtitle {
			text-align: center;
			font-size: 1.4em;
			font-weight: bold;
			margin-bottom: 0;
		}
		#reviewno {
			text-align: center;
			font-size: 0.8em;
			font-weight: bold;
		}
	#listbox {
		float: right;
		width: 70%;
		overflow: hidden;
		margin-bottom: 1em;
	}
		#reviewlist {
			overflow: hidden;
		}
		#reviewlist li {
			margin-bottom: 20px;
		}
			#reviewlist li .name {
				font-weight: bold;
				color: #845e2a;
				padding-bottom: 0.2em;
				margin-bottom: 0.2em;
				border-bottom: solid 1px #000;
				overflow: hidden;
			}
			#reviewlist li .date {
				color: #646464;
				text-align: right;
				float: right;
			}
			#reviewlist li .comment {
				overflow: hidden;
			}
	#recommendbox {
		background: #f0f0f0;
		border-radius: 1em;
		clear: both;
		width: 100%;
		overflow: hidden;
	}
		#recommendtitle {
			padding: 1.5em;
		}
		#recommendlist {
			overflow: hidden;
			margin: 0 -2em -2em 0;
			padding: 0 2em 2em 2em;
		}
			#recommendlist li {
				float: left;
				width: 110px;
				margin: 0 2em 2em 0;
				overflow: hidden;
			}
			#recommendlist li img {
				width: 100%;
				vertical-align: bottom;
			}

/* Responsive setting */
/* ------------------------------------------------------------- */
@media (min-width:1021px) {
	#page { overflow: scroll; -webkit-overflow-scrolling: touch; }
}
@media (min-width:768px) and (max-width:1020px) {
	#page { overflow: scroll; -webkit-overflow-scrolling: touch; min-width: 500px; }
	#memslider { overflow: visible !important; }
	#effects { overflow: visible !important; }
	#sitetop { left: 15px; }
	#corptop { right: 10px; }
	#annivers { display: none; }
	#imgbox { clear: both; width: 100%; }
	#listbox { clear: both; width: 100%; }
	#memfooter { height: 150px; }
	#slidetitle { background: url("img/bg_memory_title_s.png") center center no-repeat; }
	#first { top: 92px; left: 15px; }
	#prev { top: 92px; left: 85px; }
	#next { top: 92px; right: 88px; }
	#last { top: 92px; right: 17px; }
	#slidelogo { position: relative; top: 0; right: 0; text-align: center; margin: 10px 0; display: block; }
	#review { background: url("img/bg_memory_review_s.png") center -10px no-repeat; background-size: cover; max-width: 613px; }
	#memnote { position: relative; top: 0; right: 0; padding: 5%; background: url("img/bg_memory_note.png") center top repeat-x; min-height: 360px; }
	#memnote:after { display: none; }
	#note { width: 90%; padding: 5%; }
	#memreview { position: relative; bottom: 0; }
	#review { display: none; }
	#footer { display: none; }
}
@media (max-width : 767px) { /*Mobile Portrait*/
	#page { overflow: scroll; -webkit-overflow-scrolling: touch; min-width: 500px; }
	#memslider { overflow: visible !important; }
	#effects { overflow: visible !important; }
	#sitetop { left: 15px; }
	#corptop { right: 10px; }
	#annivers { display: none; }
	#imgbox { clear: both; width: 100%; }
	#listbox { clear: both; width: 100%; }
	#memfooter { height: 150px; }
	#slidetitle { background: url("img/bg_memory_title_s.png") center center no-repeat; }
	#first { top: 92px; left: 15px; }
	#prev { top: 92px; left: 85px; }
	#next { top: 92px; right: 88px; }
	#last { top: 92px; right: 17px; }
	#slidelogo { position: relative; top: 0; right: 0; text-align: center; margin: 10px 0; display: block; }
	#review { background: url("img/bg_memory_review_s.png") center -10px no-repeat; background-size: cover; max-width: 613px; }
	#memnote { position: relative; top: 0; right: 0; padding: 5%; background: url("img/bg_memory_note.png") center top repeat-x; min-height: 360px; }
	#memnote:after { display: none; }
	#note { width: 90%; padding: 5%; }
	#memreview { position: relative; bottom: 0; }
	#review { display: none; }
	#footer { display: none; }
}