@charset "UTF-8";

/* OPEN BOX */

/* ベース（あまりいじらないほうがよい）
------------------------------------------------------------------------------*/

/* boxbackground */

#openboxbg {
	display: none;
	background-color: #000;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.openboxbgbg {
	overflow: hidden;
	background: url(../img/setumei.png?1904) no-repeat;
	background-size: 375px auto;
	width: 375px;
	height: 40px;
}

.preloading {
	background: url(../img/loading.gif) no-repeat center center;
	background-size: 3.5vw auto;
}
.boxtch .preloading {
	background-size: 12vw auto;
}

/* zoombox */

#zoombox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

/* boxwrapper */

#openbox {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	padding: 0px;
	width: 100%;
	height: 100%;
}

/* boxcontainer */

#openbox .boxcontainer,
#openbox .boxcontainer > div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* img (no padding) */

#openbox .boxtgt {
	position: relative;
	margin: 0 auto;
}

#openbox img {
	width: 100%;
	height: auto;
	max-width: none;
}
#zoombox img {
	max-width: none;
}

/* a */

a[rel ^= openbox] {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 変更可
------------------------------------------------------------------------------*/

/* z-index */

#openboxbg,
#openbox {
	z-index: 9000;
}
#openbox .boxnav {
	z-index: 9010;
}
#openbox .closebox {
	z-index: 9020;
}
#zoombox {
	z-index: 9030;
}
#zoombox .closebox {
	z-index: 9040;
}

#pagemekuribg,
#pagemekuri {
	z-index: 9050;
}

/* bg */

#openboxbg {
	background-color: #000;
/*	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;*/
}

#zoombox {
	background-color: #000;
}

/* padding */

#openbox .boxcontainer > div {
	box-sizing: border-box;
	padding: 0;
}
.boxtch #openbox .boxcontainer > div {
	padding: 50px 20px 20px 20px;
}

/* cap */

#openbox .boxcap {
	position: relative;
	width: 100%;
}

#openbox .boxcap p {
	position: relative;
	color: #ccc;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.6;
	padding: 12px 0px 0px 0px;
	margin: 0 auto;
}
#openbox .boxcap p big {
	display: block;
	font-size: 20px;
	line-height: 1.3;
}
#openbox .boxcap p small {
	font-size: 10px;
}

.boxtch #openbox .boxcap p {
	font-size: 15px;
	font-weight: normal;
	padding: 8px 0px 0px 0px;
}
.boxtch #openbox .boxcap p big {
	display: block;
	font-size: 16px;
	font-weight: bold;
}
.boxtch #openbox .boxcap p small {
	font-size: 11px;
}

/* nav */

#openbox .boxnav {
	list-style-type: none;
	position: absolute;
	top: 0;
	width: 100%;
}

#openbox .boxnav li {
	display: none;
	position: absolute;
	width: 200px;
	height: 100vh;
	cursor: pointer;
}

#openbox .boxnav li.prv,
#openbox .boxnav li.prv p {
	left: 0px;
}
#openbox .boxnav li.nex,
#openbox .boxnav li.nex p {
	right: 0px;
}

#openbox .boxnav li p {
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 30px;
	height: 30px;
}

#openbox .boxnav li p::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	border: 0px;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -10px;
}
#openbox .boxnav li.nex p::before {
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	margin-left: -5px;
}
#openbox .boxnav li.prv p::before {
	border-bottom: solid 2px #fff;
	border-left: solid 2px #fff;
	margin-left: 10px;
}

/* close */

#openbox .closebox,
#zoombox .closebox {
	position: absolute;
	right: 10px;
	top: 10px;
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(0,0,0,.01);
	cursor: pointer;
}
#zoombox .closebox {
	right: auto;
	left: 10px;
}

#openbox .closebox span::before,
#openbox .closebox span::after,
#zoombox .closebox span::before,
#zoombox .closebox span::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84%;
	height: 6%;
	margin: -8% 0 0 -42%;
	background: #fff;
}
#openbox .closebox span::before,
#zoombox .closebox span::before {
	transform: rotate(-45deg);
}
#openbox .closebox span::after,
#zoombox .closebox span::after {
	transform: rotate(45deg);
}

/* nonburu */

#openbox .nonburu {
	position: absolute;
	right: 60px;
	top: 12px;
	color: #ffff80;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	text-align: right;
	letter-spacing: 3px;
	user-select: none;
}
#openbox .nonburu small {
	display: inline-block;
	color: #aaa;
	font-size: 0.6em;
	font-weight: normal;
	vertical-align: bottom;
	padding-bottom: 2px;
}

@media screen and (max-width:640px) {
	#openbox .nonburu {
		top: 10px;
		right: 43px;
		font-size: 25px;
	}
	#openbox .nonburu small {
		padding-bottom: 1px;
	}
}

/* rupe */

#openbox .rupe {
	position: absolute;
	top: 9px;
	left: 6px;
	display: inline-block;
	box-sizing: content-box;
	border: 0.08em solid #fff;
	border-radius: 100%;
	font-size: 2.5em;
	width: 0.4em;
	height: 0.4em;
	margin: 0px 6px 0px 0px;
	pointer-events: none;
}
#openbox .rupe:before {
	content: "";
	display: inline-block;
	position: absolute;
	right: -0.25em;
	bottom: -0.1em;
	border-width: 0;
	background: #fff;
	width: 0.35em;
	height: 0.1em;
	transform: rotate(45deg);
}

/* effect */

.no_effect > a[rel],
.no_effect figure,
.use_effect figure {
	display: block;
	position: relative;
}

.no_effect > a[rel] img,
.no_effect figure img,
.use_effect figure img {
	width: 100%;
	height: auto;
}

i.rupe {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 42px;
	height: 42px;
	font-size: 1em;
}
.muson {
	background: url(../img/zoom.png) no-repeat;
}

/* smpl */

a.smpl {
	display: block;
	overflow: hidden;
	position: absolute;
	right: -40px;
	bottom: 6px;
	width: 60px;
	height: 0;
	padding-top: 60px;
	background: url(../img/sample.png) no-repeat;
	background-size: 120px auto;
}

@media print, screen and (min-width:641px) {
	a.smpl:hover {
		filter: alpha(opacity=1) !important;
		-moz-opacity: 1 !important;
		opacity: 1 !important;
		background-position: -60px 0;
	}
}
@media screen and (max-width:640px) {
	a.smpl {
		right: -46px;
		bottom: 1px;
	}
}

/* pagemekuri
------------------------------------------------------------------------------*/

#pagemekuribg {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000;
	width: 100%;
	height:100%;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

#pagemekuri {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-perspective: 800px;
			perspective: 800px;
}

/* start class */

.mekuri_wrapstart {
	-webkit-animation: wrapper 1.5s ease-in-out forwards;
			animation: wrapper 1.5s ease-in-out forwards;
}

.mekuripage_start {
	-webkit-animation: page .5s ease-in-out forwards;
			animation: page .5s ease-in-out forwards;
}

.mekuri_sdowstart {
	-webkit-animation: book .6s ease-in-out forwards;
			animation: book .6s ease-in-out forwards;
}

/* mekuriflip */

#mekuriflip {
	position: absolute;
	-webkit-transform: translateZ(0px) rotateX(0deg) rotateZ(0deg) rotateY(0deg);
			transform: translateZ(0px) rotateX(0deg) rotateZ(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	-webkit-transform-origin: 0 0 0;
			transform-origin: 0 0 0;
}

@-webkit-keyframes wrapper {
	30% {
		-webkit-transform: translateZ(0px) rotateX(0deg) rotateZ(0deg) rotateY(-150deg);
				transform: translateZ(0px) rotateX(0deg) rotateZ(0deg) rotateY(-150deg);
	}
}
@keyframes wrapper {
	30% {
		-webkit-transform: translateZ(0px) rotateX(0deg) rotateZ(0deg) rotateY(-150deg);
				transform: translateZ(0px) rotateX(0deg) rotateZ(0deg) rotateY(-150deg);
	}
}

#mekuriflip div {
	position: absolute;
	left: calc(100% - 1px);
	-webkit-transform-origin: 0 100%;
			transform-origin: 0 100%;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
}

#mekuriflip #mekuribac {
	-webkit-transform: rotateY(.5deg);
	transform: rotateY(.5deg);
	-webkit-transform-origin: -100% 0;
	transform-origin: -100% 0;
}
#mekuriflip #mekuribac,
#mekuriflip #mekuribac div {
	background-color: #fff;
}

#mekuriflip > div {
	left: 0;
	background-position-x: 0;
}

@-webkit-keyframes page {
	100% {
		-webkit-transform: rotateY(-15deg);
				transform: rotateY(-15deg);
	}
}
@keyframes page {
	100% {
		-webkit-transform: rotateY(-15deg);
				transform: rotateY(-15deg);
	}
}

/* mekuribok */

#mekuribok {
	position: absolute;
}
#mekuribok #mekuritop {
	position: absolute;
	box-sizing: border-box;
}

#mekuribok #mekuritop img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

#mekuribok #mekuritop > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@-webkit-keyframes book {
	  0% {box-shadow: inset rgba(0,0,0,.5) 350px 0 100px -120px;}
	100% {box-shadow: inset rgba(0,0,0,.5) 0 0 100px -120px;}
}
@keyframes book {
	  0% {box-shadow: inset rgba(0,0,0,.5) 350px 0 100px -120px;}
	100% {box-shadow: inset rgba(0,0,0,.5) 0 0 100px -120px;}
}