/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */


html,
button,
input,
select,
textarea {
    color: #222;
	font-family: "Lato", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",'Meiryo', sans-serif;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {

}

a {
	outline: none !important;
}

a:link {
	color: #8f6707;
	text-decoration: none;
}

a:visited {
	color: #8f6707;
	text-decoration: none;
}

a:hover {
	color: #af7e12;
	text-decoration: none;
}

a:action {
	color: #8f6707;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, li {
	margin: 0;
	padding: 0;
}

ol, ul {
	list-style-type: none;
}

a.anim img {
	transition: all 0.2s ease-in-out;
}

a.anim:hover img {
	opacity: 0.6;
}

.clearfix li.last {
	margin-right: 0 !important;
}

.redd {
	color: red !important;
}

.acenter {
	text-align: center !important;
}

/* ==========================================================================
   Common Style
   ========================================================================== */

.overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	background-color: white;
	opacity: 1;
	top: 0;
	left: 0;	
}

body {
	background: url(../img/wild_oliva.png);
}

.content p {
	font-size: 13px;
	line-height: 1.8em;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.wrapper {
	width: 100%;
	height: auto;
}

.viewport {
	font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho Pro","Hiragino Mincho ProN",Lato,"Malgun Gothic","Meiryo",sans-serif	;
	position: relative;
	width: 1180px;
	height: 748px;
	margin: 0 auto;
	opacity: 1;
	border: 10px solid rgba(0,0,0,0.3);
}

a:hover img {
	opacity: 0.8;
}

.viewport .slides {
	width: 1180px;
	height: 748px;
	overflow: hidden;
}

.viewport .slides figure {
	padding: 0;
	margin: 0;
	width: 1180px;
	height: 748px;
	display: block;
	position: relative;
}

.viewport .slides figure img {
	width: 100%;
}

.top-nav {
	position: absolute;
	width: 377px;
	top: 314px;
	left: 50%;
	margin-left: -188px;
	z-index: 1001;
}

.top-nav a {
	display: block;
	margin-bottom: 18px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.chap-top-nav {
	position: absolute;
	width: 502px;
	height: 186px;
	top: 50%;
	left: 50%;
	margin: -93px 0 0 -251px;
	z-index: 1001;	
}

.chap-top-nav .chap1,
.chap-top-nav .chap2,
.chap-top-nav .chap3 {
	width: 502px;
	height: 186px;
	position: relative;
}

.nav {
	background-color: #222;
	color: #eee;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	padding: 4px 0;
	letter-spacing: 0.1em;
	font-size: 85%;
}

.nav a {
	color: #ababab;
}

.nav a:hover,
.nav a.current {
	color: #eee;
}

.chap-inner-nav {
	position: absolute;
	top: 4%;
	right: 3%;
	z-index: 1001;	
}

.chap-inner-nav .nav {
	width: auto;
	position: static;
	left: auto;
	bottom: auto;
	background-color: transparent;
	color: #222;
}

.chap-inner-title {
	width: 237px;
	height: 64px;
	position: absolute;
	top: 4%;
	left: 3%;
	z-index: 1001;	
}

.into,
.next,
.prev {
	position: absolute;
	z-index: 1001;
}

.into {
	left: 50%;
	bottom: 2%;
	margin-left: -28px;
}

.prev {
	left: 2%;
	top: 50%;
	margin-top: -28px;
}

.next {
	right: 2%;
	top: 50%;
	margin-top: -28px;
}

.ui-hidden {
	display: none;
}

.into2,
.into3 {
	z-index: 1001;
	bottom: 2%;
	left: 50%;
	position: absolute;
	margin-left: -101px;
}