@charset "UTF-8";
/* Reset
============================================ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display: block;
}
nav ul {
	list-style: none;
}
li {
	list-style-type: none;
}
ol li {
	list-style-type: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted #000;
	cursor: help;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}
input, select {
	vertical-align: middle;
}

/* Default
============================================ */
html, body {
	width: 100%;
	height: 100%;
}
body {
	color: #000;
	font-size: 14px;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	line-height: 1.7;
	background: #000800;
}
html>/**/body {
	font-size: 14px;
}
a{
	color: #000;
	text-decoration: none;
}
a:link{
	color: #000;
	text-decoration: none;
}
a:visited{
	color: #000;
	text-decoration: none;
}
a:hover{
	color: #000;
	text-decoration: none;
}
a:focus {
	color: #000;
}
::selection {
	background: #fa0;
}

/* Module
============================================ */
.cf {
	zoom: 1;
}
.cf:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
.noPc { display: none; }
.noSp { display: block; }
@media screen and (max-width: 768px) {
	.noPc { display: block; }
	.noSp { display: none; }
}

/* Layout
============================================ */
.movie {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #000;
}
.skip {
	width: 55px;
	height: 55px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	cursor: pointer;
}
.skip img {
	width: 56px;
	height: 37px;
}
.intro {
	width: 100%;
	height: 100%;
	background: url(../img/bg.jpg);
	background-size: 100% auto;
	position: fixed;
	top: 0;
	left: 0;
	display: table;
	color: #fff;
	z-index: 10000;
}
.intro .inner {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.intro a {
	color: #fff;
	cursor: pointer;
}
.bgmOn,
.bgmOff {
	width: 55px;
	height: 55px;
	display: inline-block;
	overflow: hidden;
	position: relative;
	top: 10px;
	left: -10px;
}
.video {
	position: relative;
	z-index: 9999;
}
.playToggle {
	width: 55px;
	height: 55px;
	display: inline-block;
	overflow: hidden;
	position: fixed;
	top: 20px;
	right: 20px;
	cursor: pointer;
	z-index: 9999;
}
.bgmOn img,
.bgmOff img,
.playToggle img {
	width: 55px;
	height: 110px;
	position: absolute;
	left: 0;
}
.bgmOn img,
.playToggle.on img {
	top: 0;
}
.bgmOff img,
.playToggle.off img {
	bottom: 0;
}
.bgmControl {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9999;
}
header h1 {
	position: absolute;
	top: 27px;
	left: 20px;
	width: 100px;
	height: auto;
	z-index: 9999;
}
header h1 img {
	width: 100%;
	height: auto;
}
header h2 {
	position: absolute;
	top: 20px;
	left: 127px;
	width: 100px;
	height: auto;
}
header h2 img {
	width: 100%;
	height: auto;
}
.bg {
	width: 100%;
	height: 100%;
	background: url(../img/bg.jpg) repeat-x center center;
	background-size: cover;
}
.bgInner {
	/*height: 750px;*/
	height: 100%;
	background: url(../img/lake.png) no-repeat center bottom;
	background-size: 100% auto;
}
.wrapper {
	margin: 0 auto;
	width: 598px;
	height: 674px;
	position: relative;
	z-index: 100;
}
.clock {
	width: 598px;
	height: 674px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/clock.png) no-repeat;
	transition: 1s;
	-webkit-transition: 1s;
}
.alfa {
	opacity: .5;
}
.poa { position: absolute; }
.digital02 {
	top: 231px;
	left: 194px;
	transform: rotate(-45deg) scale(.8, .8);
	-webkit-transform: rotate(-45deg) scale(.8, .8);
	transition: 1s;
}
.digital02.show {
	transform: rotate(0) scale(1, 1);
	-webkit-transform: rotate(0) scale(1, 1);
}
.ornament {
	top: 471px;
	left: 173px;
	z-index: 1;
}
.marquee {
	width: 96px;
	height: 25px;
	top: 566px;
	left: 251px;
	overflow: hidden;
}
.stonePos {
	cursor: pointer;
	z-index: 1;
}
.stone01 { top: 158px; left: 321px; }
.stone02 { top: 175px; left: 358px; }
.stone03 { top: 198px; left: 390px; }
.stone04 { top: 230px; left: 414px; }
.stone05 { top: 267px; left: 431px; }
.stone06 { top: 304px; left: 438px; }
.stone07 { top: 347px; left: 432px; }
.stone08 { top: 452px; left: 358px; }
.stone09 { top: 473px; left: 278px; }
.stone10 { top: 397px; left: 139px; }
.stone11 { top: 235px; left: 135px; }
@keyframes zi {
	0% { z-index: 1; }
	50% { z-index: 10; }
	100% { z-index: 1; }
}
@keyframes hvef {
	50% {
		opacity: 1;
		transform: rotate(45deg) scale(1, 1);
		-webkit-transform: rotate(45deg) scale(1, 1);
	}
	100% {
		opacity: 0;
		transform: rotate(45deg) scale(0, 0);
		-webkit-transform: rotate(45deg) scale(0, 0);
	}
}
.stonePos:after {
	content: "";
	width: 130px;
	height: 132px;
	display: block;
	position: absolute;
	top: -42px;
	left: -43px;
	opacity: 0;
	transform: rotate(0deg) scale(0, 0);
	-webkit-transform: rotate(0deg) scale(0, 0);
	transition: 3s;
	-webkit-transition: 3s;
	background-repeat: no-repeat;
}
.stone01:after { background: url(../img/effects01.png); }
.stone02:after { background: url(../img/effects02.png); }
.stone03:after { background: url(../img/effects03.png); }
.stone04:after { background: url(../img/effects04.png); }
.stone05:after { background: url(../img/effects05.png); }
.stone06:after { background: url(../img/effects06.png); }
.stone07:after { background: url(../img/effects07.png); }
.stone08:after { background: url(../img/effects08.png); }
.stone09:after { background: url(../img/effects09.png); }
.stone10:after { background: url(../img/effects10.png); }
.stone11:after { background: url(../img/effects11.png); }
.stonePos:hover {
	animation: zi 2s;
}
.stonePos:hover:after {
	animation: hvef 2s;
}
.face {
	width: 40px;
	height: 40px;
	top: 218px;
	left: 278px;
}
.face img {
	width: 40px;
	height: 40px;
}
.effect {
	top: 233px;
	left: 193px;
	opacity: 0;
	transform: rotate(0deg) scale(.8);
	transition: .5s;
	-webkit-transition: .5s;
}
.effect.show {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}
.needle01 {
	top: 241px;
	left: 284px;
	transform: rotate(0);
	-webkit-transform: rotate(0);
	transform-origin: 14px 94px;
	-webkit-transform-origin: 14px 94px;
	transition: 1s;
	-webkit-transition: 1s;
}
.needle02 {
	top: 203px;
	left: 287px;
	transform: rotate(0);
	-webkit-transform: rotate(0);
	transform-origin: 10px 131px;
	-webkit-transform-origin: 10px 131px;
	transition: 1s;
	-webkit-transition: 1s;
}
.needlePos01 {
	transform: rotate(377deg) !important;
	-webkit-transform: rotate(377deg) !important;
}
.needlePos02 {
	transform: rotate(392deg) !important;
	-webkit-transform: rotate(392deg) !important;
}
.needlePos03 {
	transform: rotate(407deg) !important;
	-webkit-transform: rotate(407deg) !important;
}
.needlePos04 {
	transform: rotate(420deg) !important;
	-webkit-transform: rotate(420deg) !important;
}
.needlePos05 {
	transform: rotate(434deg) !important;
	-webkit-transform: rotate(434deg) !important;
}
.needlePos06 {
	transform: rotate(448deg) !important;
	-webkit-transform: rotate(448deg) !important;
}
.needlePos07 {
	transform: rotate(463deg) !important;
	-webkit-transform: rotate(463deg) !important;
}
.needlePos08 {
	transform: rotate(509deg) !important;
	-webkit-transform: rotate(509deg) !important;
}
.needlePos09 {
	transform: rotate(538deg) !important;
	-webkit-transform: rotate(538deg) !important;
}
.needlePos10 {
	transform: rotate(598deg) !important;
	-webkit-transform: rotate(598deg) !important;
}
.needlePos11 {
	transform: rotate(658deg) !important;
	-webkit-transform: rotate(658deg) !important;
}
.faceList {
	top: 660px;
}
.faceList .above {
	margin: auto;
	width: 564px;
}
.faceList .below {
	margin: auto;
	width: 470px;
}
.faceList li {
	margin: 5px 10px;
	width: 70px;
	display: inline-block;
}
.faceList li img {
	width: 100%;
}
.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	opacity: 0;
	transition: 1s;
	-webkit-transition: 1s;
	z-index: 1;
}
.overlay.show {
	cursor: pointer;
	opacity: 1;
	z-index: 500;
}
.overlay .inner {
	padding-top: 10px;
	width: 598px;
	height: 674px;
	margin: auto;
	position: relative;
}
.prof {
	padding: 0 161px;
	width: 786px;
	height: 176px;
	font-size: 16px;
	position: absolute;
	left: 50%;
	bottom: -107px;
	display: table;
	line-height: 1.3;
	background-repeat: no-repeat;
	background-position: 0 0;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	box-sizing: border-box;
}
.prof.bg01 { background-image: url(../img/prof01.png); }
.prof.bg02 { background-image: url(../img/prof02.png); }
.prof.bg03 { background-image: url(../img/prof03.png); }
.prof.bg04 { background-image: url(../img/prof04.png); }
.prof.bg05 { background-image: url(../img/prof05.png); }
.prof.bg06 { background-image: url(../img/prof06.png); }
.prof.bg07 { background-image: url(../img/prof07.png); }
.prof.bg08 { background-image: url(../img/prof08.png); }
.prof.bg09 { background-image: url(../img/prof09.png); }
.prof.bg10 { background-image: url(../img/prof10.png); }
.prof.bg11 { background-image: url(../img/prof11.png); }
.prof a {
	display: table-cell;
	vertical-align: middle;
}
.copy {
	font-size: 16px;
}
.close {
	position: absolute;
	top: 20px;
	right: 0;
	transition: .5s;
	-webkit-transition: .5s;
	border-radius: 50%;
	box-shadow: 0 0 15px rgba(255, 255, 255, .35);
	cursor: pointer;
}
.close:hover {
	box-shadow: 0 0 20px rgba(255, 255, 255, .7);
}
.close img {
	vertical-align: text-top;
}
@media screen and (min-width: 960px) {
	.faceList {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	header h2 {
		top: 80px;
		left: 20px;
	}
	.prof {
		padding: 30px 120px 5px;
		width: 100%;
		font-size: 14px;
		line-height: 1.1;
		background-size: contain;
	}
	.prof a {
		height: 74px;
		display: block;
	}
	.prof .copy {
		font-size: 14px;
	}
	.intro {
		display: none;
	}
/*	.playToggle {
		width: 110px;
		height: 110px;
	}
	.playToggle img {
		width: 110px;
		height: 220px;
	}*/
}