@charset "UTF-8";

*,
*::before,
*::after {
                                -webkit-box-sizing: border-box;
                                -moz-box-sizing: border-box;
                                -o-box-sizing: border-box;
                                -ms-box-sizing: border-box;
                                box-sizing: border-box;
}

body {margin: 0; padding: 0;
                                background-color: #000000;
                                font-family: "Sawarabi Mincho", 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;}

a:link {color: #d5c7a7; text-decoration: none;}
a:visited {color: #c9c6c0; text-decoration: none;}
a:hover {color: #fef7e7; text-decoration: none;
	-webkit-transition: 0.2s;
	transition: 0.2s;}

.book-box {margin: 0 auto;
                                top: 70px; left: 0px;
                                position: relative;
                                width: 510px;
                                height: 680px;
	background-image: url(../images/paper.png);
	background-position: center top;
	background-size: cover;
                                transform-style: preserve-3d;
                                transform: perspective(1500px);
                                }

.book-box a {cursor: pointer;}

.book-boxshadow {position: absolute;
                                top: 0; left: 0;
                                width: 100%; height: 100%;
                                transform-origin: right;
                                animation-name: boxshadow;
                                animation-fill-mode: forwards;
                                animation-duration: 7s;
                                animation-delay: 5s;
                                z-index: 2;
                                }

@keyframes boxshadow {
                                0% {box-shadow: inset -400px 0 60px rgba(0, 0, 0, 0.8);}
                                100% {box-shadow: inset 0px 0 60px rgba(0, 0, 0, 0.5);}
                                }

.book-imagecover {position: absolute;
                                top: 0; left: 0;
                                width: 100%; height: 100%;
                                transform-origin: right;
                                animation-name: bookopen;
                                transform-style: preserve-3d;
                                animation-fill-mode: forwards;
                                animation-duration: 7s;
                                animation-delay: 5s;
                                z-index: 2;
                                }

.book-imagecover img {position: absolute;
                                top: 0; left: 0;
                                width: 100%; height: 100%;
                                transform-origin: right;
                                }

@keyframes bookopen {
                                0% {transform: rotateY(0deg);}
                                100% {transform: rotateY(135deg);}
                                }

/* books */
.book-box .book-details {position: absolute;
                                top: 0; left: 0;
                                width: 100%; height: 100%;
                                padding: 0px;
                                overflow: hidden;}

.book-box .book-details .details-title {margin: 0;
                                padding: 160px 0px 150px 45px;
                                text-align: center;
                                color: #55260d;
                                line-height: 180%;
                                font-size: 18px;}

.book-box .book-details .details-contents {width: 100%; height: 80%;
                                margin: 0;
                                padding: 20px 10px;
                                font-size: 18px;
                                overflow-y: auto;
}

.logo {padding: 20px 0px 0px 30px;
	width: 180px;
	float: left;}

.logo img {width: 100%;}

.logo2 {padding: 30% 15% 0% 26%;
	width: 100%;}

.logo2 img {width: 100%;}

/* footer */
.footer-box {margin: 0 auto;
                                padding: 100px 0px 50px 0px;
	width: 471px;}

.skip {font-size: 120%; line-height: 160%; color: #d5c7a7;
	text-align: center;}

.attention-txt {padding: 30px 0px 10px 0px;
                                font-size: 85%; line-height: 160%; color: #d5c7a7;
	text-align: left;}

.footer-banner {padding: 30px 10px 20px 10px;
	float: left;}

.footer-banner a {display: block;
                                cursor: pointer;}

.footer-txt {font-size: 70%; line-height: 160%; color: #d5c7a7;
	text-align: center;}


.delay1{animation: delay 2s ease 0s 1 normal;
	animation-fill-mode: backwards;}

@keyframes delay {
	0% {opacity:0;}
	100% {opacity:1;}
	}

.clear{clear:both;}

/*750px以下（SP）
======================================*/
@media only screen and (max-width: 750px) {
.pconly {display: none;}

.book-box {margin: 0 auto;
                                top: 20px; left: 0px;
                                width: 330px; height: 440px;
                                transform: perspective(1000px);}

.logo {padding: 4% 0% 0% 4%;
	width: 26%;
	float: none;}

.logo img {width: 100%;}


/*footer*/
.footer-box {margin: 0 auto;
                                padding: 15% 0% 10% 0%;
                                text-align: center;
	width: 100%;}

.skip {font-size: 120%;
	text-align: center;}
.attention-txt {padding: 6% 10% 2% 10%;
                                font-size: 80%; line-height: 150%; color: #d5c7a7;}

.footer-banner {padding: 6% 0% 6% 0%;
	float: none;}

.footer-txt {font-size: 75%; line-height: 150%; color: #d5c7a7;}

/**/}