@charset "UTF-8";

/* 基本設定 */

/*--------------------------------------------------------------
Normalize
--------------------------------------------------------------*/
/* HTML5 display definitions */
article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
	display: block;
}
[hidden] {
	display: none;
}

/* Base */
html {
	font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	-ms-text-size-adjust: 100%; /* 2 */
}
html,
button,
input,
select,
textarea {
	font-family: sans-serif;
}
body {
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Links */
a:focus {
	outline: thin dotted;
}
a:active,
a:hover {
	outline: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-size: 100%;
}
strong {
	font-weight: bold;
}
p {
	margin: 0;
}
small {
	font-size: 80%;
}
#copyright small {
	font-size: 100%;
}

/* Lists */
dl,
ul,
ol,
dt,
dd {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
}

/* Embedded content */
img {
	border: 0; /* 1 */
	line-height: 0;
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic; /* 2 */
}

/* Figures */
figure {
	margin: 0;
}

/* Forms */
form {
	margin: 0;
}
button,
input,
select,
textarea {
	margin: 0; /* 2 */
	font-size: 100%; /* 1 */
	vertical-align: baseline; /* 3 */
}
button,
input {
	line-height: normal;
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
	cursor: pointer; /* 3 */
	-webkit-appearance: button; /* 2 */
}
button[disabled],
input[disabled] {
	cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
	padding: 0; /* 2 */
	box-sizing: border-box; /* 1 */
}
textarea {
	overflow: auto; /* 1 */
	vertical-align: top; /* 2 */
}

/* Tables */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*--------------------------------------------------------------
Common Styles
--------------------------------------------------------------*/
html {
	overflow-y: scroll; /* Firefox */
}
body {
	background: url(https://static.yama96.jp/images/pc/bg.jpg) center top repeat;
	color: #CCC;
	font: 77%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing: normal;
	text-align: center;
}
a {
	color: #DCDCDC;
	text-decoration: underline;
}
a:hover,
a:active {
	text-decoration: none;
}
a img, input[type="image"] {
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-o-transition: opacity .3s;
	-ms-transition: opacity .3s;
	transition: opacity .3s;
}
a:hover img, a:active img, input[type="image"]:hover { filter: alpha(opacity=80); opacity: .8; }
.nohover a img, .nohover input[type="image"] { filter: alpha(opacity=100); opacity: 1; }

/* clearfix */
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}

/* 位置調整 */
.left { float: left; }
.right { float: right; }
.textL { text-align: left !important; }
.textC { text-align: center !important; }
.textR { text-align: right !important; }

/* margin */
.mt10 { margin-top: 10px !important; }
.mt1em { margin-top: 1em !important; }
.mb10 { margin-bottom: 10px !important; }
.mb1em { margin-bottom: 1em !important; }

/* テキスト */
.fontB { font-weight: bold; }
.indent { padding-left: 1em;text-indent: -1em; }

/* Color */
.brown { color: #785028; }

/*--------------------------------------------------------------
Wrapper
--------------------------------------------------------------*/
#wrapper {
	position: relative;
	width: 100%;
	min-width: 1012px;
	overflow: hidden;
	background: url(https://static.yama96.jp/images/pc/bg2.jpg) center top repeat-y;
}
.wrap, header {
	position: relative;
	width: 1012px;
	margin: 0 auto;
	text-align: left;
}

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
header { z-index: 10; }
#hdBox {
	position: absolute;
	top: 0;
	left: -100%;
	right: -100%;
	padding: 9px 100%;
	background-color: #000;
	border-bottom: 1px solid #666;
	font-size: 0;
	text-align: right;
}
#hdBox img {
	margin-right: 27px;
}

h1 {
	position: absolute;
	top: 0;
	left: 10px;
}
header nav {
	position: absolute;
	top: 52px;
	right: 0;
}
header nav li {
	float: left;
}

/*--------------------------------------------------------------
Content
--------------------------------------------------------------*/
#storyPage, #qa, #movie, #page { padding-top: 179px; }

/* Main Image */
#main-image {
	position: absolute;
	top: 37px;
	left: 50%;
	right: 0;
	width: 1202px;
	height: 512px;
	overflow: hidden;
	margin-left: -601px;
	text-align: center;
}

/* Box */
.box955 {
	position: relative;
	width: 955px;
	min-height: 430px;
	margin: 8px auto 72px;
	background: url(https://static.yama96.jp/images/pc/box955_bg.png) center top repeat-y;
	text-align: center;
}
.box955:before, .box955:after {
	content: "";
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 72px;
}
.box955:before {
	top: -24px;
	background: url(https://static.yama96.jp/images/pc/box955_h.png) center top no-repeat;
}
.box955:after {
	bottom: -23px;
	background: url(https://static.yama96.jp/images/pc/box955_f.png) center bottom no-repeat;
}
.box955 .box {
	position: relative;
	z-index: 10;
}

/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/
footer {
	padding: 0 0 26px;
	background-color: #000;
}
footer:before {
	content: "";
	display: block;
	width: 100%;
	height: 12px;
	margin-bottom: 40px;
	background: url(https://static.yama96.jp/images/pc/bg3.jpg) center top repeat-x;
}
footer a { color: #CCC; }

footer.top { padding-top: 40px; }
footer.top:before { display: none; }

footer .about {
	width: 722px;
	margin: 0 auto;
	font-size: 90%;
	text-align: left;
}
footer .about .left, footer .about .right { width: 360px; }
footer .about .left div, footer .about .right div {
	display: table;
	width: 100%;
	margin-top: 2px;
	padding: 4px 0;
	background: url(https://static.yama96.jp/images/pc/bg_dot.gif) repeat;
}
footer .about .right div:last-child { padding: 9px 0; }
footer .about span {
	display: table-cell;
	padding: 0 8px;
}
footer .about span.brown {
	width: 1%;
	padding-right: 2px;
	white-space: nowrap;
}

footer ul { padding: 24px 0 6px; }
footer li { display: inline; }
footer li:before {
	content: "|";
	color: #666;
	font-weight: bold;
}
footer li:first-child:before { content: ""; }
footer li a { margin-left: 5px; }

footer small { color: #AAA; }
footer small span { text-decoration: underline; }
