@charset "utf-8";
/* #870B35 */

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	color: #333;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}

body {
	overflow-x:hidden;
	font-family: 'Open Sans', sans-serif;
	font-family: 'Kodchasan', sans-serif;
}

h1, #logo h3, .book .content h2, .book .content .delivery-info span, .legal h2 {
	font-family: 'Sawarabi Mincho', sans-serif;	
}

h1 {
	font-size: 70px;	
}

.start-overlay {
	float: left;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 6;	
	background-color: rgba(255,255,255,1.0);
	opacity: 1.0;
}

.top, .down {
	width: 100%;
	height: 50%;
	background-color: rgba(43,64,73,1.0);	
	position: absolute;
	z-index: 7;
}

.top {
	top: 0%;
	left: 0%;
}

.down {
	top: 50%;
	left: 0%;
}

.welcome-title h1, .welcome-title span {
	width: 100%;
	text-align: center;
	z-index: 8;
	color: #FFF;	
	letter-spacing: 0.1em;
}

.welcome-title h1 {
	position: absolute;	
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0;
	text-shadow: 5px 5px 10px rgba(255,255,255,0.3);
}

.welcome-title span {
	font-size: 36px;	
	font-weight: 300;
	position: absolute;	
	top: 40%;
	margin: 0;
}

.nav-points {
	position:fixed;
	z-index: 5;
	right: 15px;
	top: 50%;	
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.nav-point-info {
	position: absolute;
	z-index: 4;
	top: 42%;
	right: 5px;
	background-color: rgba(255,255,255,0.8);	
	padding: 5px;
	border-radius: 5px;
	color: rgba(48,69,59,1.0);
	font-size: 12px;
	font-weight: 700;
	opacity: 0.0;
}

.nav-point {
	width: 15px;
	height: 15px;
	border-radius: 25px;
	border: solid 1px #FFF;	
	margin: 15px;
	cursor: pointer;
}

.nav-point:hover {
	background-color: #FFF;
}

.nav-point.active {
	background-color: #FFF;
}

#new-book:hover #new-book-info {
	opacity: 1.0;
}

#second-book:hover ~ #second-book-info {
	opacity: 1.0;
}

#logo {
	position: absolute;
	top: 15px;
	right: 20px;
	z-index: 4;	
}

#logo h3 {
	font-size: 30px;
	margin: 0;
	color: rgba(255,255,255,0.7);
	text-shadow: 5px 5px 10px rgba(255,255,255,0.3);
}

.book {
	float: left;
	width: 100%;
	height: auto;
	position: static;
	top: 0;
	left: 0;	
	background-color: rgba(48,69,59,1.0);
	padding: 100px;
	box-sizing: border-box;
}

#segantini-bg {
	position: absolute;
	opacity: 0.06;
	z-index: 3;	
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

@media all and (max-width: 1020px) {
	#segantini-bg {
		display: none !important;
	}	
}

.book article {
	float: left;
	width: 100%;
	height: auto;	
	z-index: 4;
	position: relative;
}

.book article img {
	float: left;
	width: 25%;
	height: auto;	
}

.book article .content {
	float: left;
	width: 75%;
	height: auto;	
	padding-left: 50px;
	color: rgba(255,255,255,1.0);
}

.book .content h5 {
	font-size: 20px;
	font-weight:300;
	margin-bottom: 15px;
}

.book .content h2 {
	font-size: 36px;
}

.book .content h4 {
	font-size: 18px;
	margin-bottom: 40px;
}

.book .content p {
	font-size: 16px;
	line-height: 30px;
}

.book .content .delivery-info {
	float: left;
	margin-top: 35px;
	border-left: solid 2px #FFF;	
	padding: 15px;
}

.book .content .delivery-info span {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 15px;
}

.book .content .delivery-info a {
	font-weight: 700;
	color: rgba(255,255,255,0.8);
	letter-spacing: 0.1em;
	padding-left: 5px;
	padding-right: 5px;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.book .content .delivery-info a:hover {
	letter-spacing: 0.12em;
	color: rgba(255,255,255,1.0);
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}


.second-book {
	float: left;
	width: 100%;
	height: auto;
	position: static;
	background-image: url(../img/second-book-bg.jpg);
	background-repeat: repeat-y;
}

.second-book article img {
	float: left;
	width: 15%;
	height: auto;	
}

.second-book article .content {
	float: left;
	width: 80%;
	height: auto;	
	padding-left: 50px;
	color: rgba(255,255,255,1.0);
}

footer {
	float: left;
	width: 100%;
	height: auto;
	position: static;
	text-align: right;
	padding: 10px;
	background-color: #2b4049;
	color: #FFF;
	font-size: 15px;
}

footer a {
	font-size: 14px;
	color: #FFF;
	font-weight: 400;
	text-decoration: none;
	margin-right: 5px;
}

footer a:hover {
	font-weight: 700;
	text-decoration: none;
}

/* Legal */

.legal {
	float: left;
	width: 100%;
	height: auto;	
	background-color: rgba(43,64,73,1.0);	
	padding: 80px;
	color: #FFF;
	border-bottom: solid 2px rgba(255,255,255,0.5);
}

.legal h1 {
	font-size: 40px;
}

.legal h2 {
	font-size: 30px;
}

.legal a {
	color: #FFF;	
}