/*====================*/


/*=== Reset Styles ===*/


/*====================*/

#trybook{
	margin:0 auto;
	font-family: "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "メイリオ", Meiryo, sans-serif;
	line-height: 1.6em;
	font-size: 15px;
	font-feature-settings: "palt";
}
#trybook .book_cat{
	padding:10px 15px 8px 15px;
	margin:0 0 15px 140px;
	text-align:center;
	color:#fff;
	background:#2dba19;
	font-size:135%;
	line-height:1;
	display:inline-block;
}
#trybook .note_outer{
	margin:0;
}
#trybook .book_title{
	padding:0;
	margin:0;
	background:none;
	text-align:left;
	font-size:180%;
	font-weight:bold;
	line-height:1.75em;
}
#trybook .book_title span{
	margin:20px 0;
	background:none;
	font-size:70%;
}
#trybook .trybook_text{
	color:#999;
	font-size:73%;
}
#trybook .trybook_btn img{
	width:26px;
	height:26px;
}
#trybook .trybook_btn{
	width:55%;
}
#trybook .trybook_btn a{
	background-position:10px;
	padding:10px 0;
}
#trybook .box01_c .trybook_btn{
	margin-bottom:0;
}
#trybook .box01{
/*	padding:50px 20px 50px 20px;*/
}
#trybook .box01 h3{
	margin-top:0;
}
.box01_c p{
	margin:15px 0;
}
.box01_l{
	width:130px;
	margin:5px 0 0 10px;
}
.box01_c{
	width:460px;
}
.box01_r{
	width:260px;
	margin-right:10px;
	float:right;
	border:3px #fff solid;
	background-color:#fff;
	box-shadow:2px 2px 5px 2px rgba(0,0,0,0.1);
}
.box01_r img{
	width:260px;
	height:auto;
}
.box01_r_mi{
	width:190px;
	margin-right:10px;
	float:right;
	border:3px #fff solid;
	background-color:#fff;
	box-shadow:2px 2px 5px 2px rgba(0,0,0,0.1);
}
.box01_r_mi img{
	width:190px;
	height:auto;
}
.box01_r img_mi,
.box01_r_mi img_mi{
	width:auto;
	height:auto;
}
.box01_l,.box01_c{
	float:left;
}
.note_outer .box01 h3{
	margin-top:0;
}
#contents_outer{
/*	width:100%;*/
/*	background:#f2f2f2;*/
/*	padding:0 0 20px 0;*/
}
#mybook {
	height: 563px;
	overflow: hidden;
}
#print {
	display: none;
}
.itpos_left {
	width: 345px;
	top: 30px;
	left: 0;
}
.itpos_right {
	width: 345px;
	top: 30px;
	right: 0;
}
.itpos_wmi {
	width: 250px;
	top: 30px;
	right: 100px;
}

.logospace {
	width: 90%;
	margin: 0 auto 15px;
	padding: 0;
}
.logospace img {
	width: 100%;
	height: auto;
}
.allpage {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
.allpage img {
	width: 100%;
	height: auto;
}
.use_info {
	font-size: 28px;
	font-weight: bold;
	color: #736357;
	text-align: center;
	margin: 0 0 20px;
	padding: 0 0 8px;
	line-height: 1;
	border-bottom: 1px #736357 dashed;
	letter-spacing: 5px;
}


/* 読み方 */

#infotext {
	position: absolute;
	color: #736357;
	font-size: 14px;
	line-height: 1.8;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
	background-color: #fcf9e5;
	margin: 20px 0;
	padding: 15px 30px;
}
#infotext h2{
	text-align: center;
}
#infotext ul {
	padding:0;
}
#infotext li {
	padding-left:1.5em;
	position: relative;
	list-style: none;
}
#infotext li::before {
	content: '';
	display: block;
	width: 0.8em;
	height: 0.8em;
	background-color:#f0d921;
	border-radius: 0.4em;
	position: absolute;
	left:0;
	top:0.5em;
}


.close_btn {
	width: 900px;
	margin: 30px auto 0;
	text-align: right;
}
.close_btn img {
	width: 120px;
	height: auto;
}
.footer-text {
	width: 900px;
	margin: 20px auto 15px;
/*	padding: 10px 0 0 0;*/
	font-size: 10px;
	text-align: right;
	font-size: 13px;
}

#contents {
	width: 900px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}
.title_area {
	position: relative;
}

/*
 * jQuery Booklet Plugin
 * Copyright (c) 2010 - 2014 William Grauvogel (http://builtbywill.com/)
 *
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
 *
 * Version : 1.4.4
 *
 * Originally based on the work of:
 *	1) Charles Mangin (http://clickheredammit.com/pageflip/)
 */

.booklet {
	width: 900px;
	position: relative;
	margin: 0 auto;
	overflow: visible !important;
}
.booklet .b-page {
	left: 0;
	top: 0;
	position: absolute;
	overflow: hidden;
	padding: 0;
	outline: 1px solid rgba(0, 0, 0, 0);
	box-shadow: 3px 3px 10px #999;
	-moz-box-shadow: 3px 3px 10px #999;
	/* Firefox */
	-webkit-box-shadow: 3px 3px 10px #999;
	;
	/* Chrome, Safari */
	filter: progid: DXImageTransform.Microsoft.Shadow(color=#999999, direction=135, strength=3, enabled=true);
}
.booklet .b-pN {}
.booklet .b-p0 {}
.booklet .b-p1 {
	box-shadow: 0px 0px 0px #fff;
	-moz-box-shadow: 0px 0px 0px #fff;
	/* Firefox */
	-webkit-box-shadow: 0px 0px 0px #fff;
	;
	/* Chrome, Safari */
	filter: progid: DXImageTransform.Microsoft.Shadow(color=#ffffff, direction=0, strength=0, enabled=true);
}
.booklet .b-p2 {
	box-shadow: 0px 0px 0px #fff;
	-moz-box-shadow: 0px 0px 0px #fff;
	/* Firefox */
	-webkit-box-shadow: 0px 0px 0px #fff;
	;
	/* Chrome, Safari */
	filter: progid: DXImageTransform.Microsoft.Shadow(color=#ffffff, direction=0, strength=0, enabled=true);
}
.booklet .b-p3 {}
.booklet .b-p4 {}

/* Page Wrappers */

.booklet .b-wrap {
	top: 0;
	position: absolute;
}
.booklet .b-wrap-left {
	background: #fff;
}
.booklet .b-wrap-right {
	background: #efefef;
}
.booklet .b-pN .b-wrap,
.booklet .b-p1 .b-wrap,
.booklet .b-p2 .b-wrap,
.booklet .b-p3 .b-wrap,
.booklet .b-p4 .b-wrap {
	left: 0;
}
.booklet .b-p0 .b-wrap {
	right: 0;
}

/* Custom Page Types */

.booklet .b-page-blank {
	padding: 0;
	width: 100%;
	height: 100%;
}
.booklet .b-page-cover {
	padding: 0;
	width: 100%;
	height: 100%;
	background: #925C0E;
}
.booklet .b-page-cover h3 {
	color: #fff;
	text-shadow: 0 1px 3px #222;
}

/* Page Numbers */

.booklet .b-counter {
	bottom: 10px;
	position: absolute;
	display: block;
	width: 25px;
	height: 20px;
	background: #ccc;
	color: #444;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	padding: 5px 0 0;
}
.booklet .b-wrap-left .b-counter {
	left: 10px;
}
.booklet .b-wrap-right .b-counter {
	right: 10px;
}

/* Page Shadows */

.booklet .b-shadow-f {
	right: 0;
	top: 0;
	position: absolute;
	opacity: 0;
	background-image: url("images/shadow-top-forward.png");
	background-repeat: repeat-y;
	background-position: 100% 0;
}
.booklet .b-shadow-b {
	left: 0;
	top: 0;
	position: absolute;
	opacity: 0;
	background-image: url("images/shadow-top-back.png");
	background-repeat: repeat-y;
	background-position: 0 0;
}
.booklet .b-p0 {
	background-image: url("images/shadow.png");
	background-repeat: repeat-y;
	background-position: 100% 10px;
}
.booklet .b-p3 {
	background-image: url("images/shadow.png");
	background-repeat: repeat-y;
	background-position: 0 10px;
}

/* Overlay Controls */

.booklet .b-grab {
	cursor: url("images/openhand.cur"), default;
}
.booklet .b-grabbing {
	cursor: url("images/closedhand.cur"), default;
}

/* Overlay Controls */

.booklet .b-overlay {
	top: 0;
	position: absolute;
	height: 100%;
	width: 50%;
}
.booklet .b-overlay-prev {
	left: 0;
}
.booklet .b-overlay-next {
	right: 0;
}

/* Tab Controls */

.booklet .b-tab {
	background: #f0d921;
	height: 40px;
	width: 100%;
	margin: 0 0 0 0;
	padding: 10px 10px 5px 10px;
	text-align: center;
	color: #000;
	position: absolute;
	font-size: 13px;
	font-weight: bold;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
}
.booklet .b-tab-prev {
	left: 10px;
}
.booklet .b-tab-next {
	right: 10px;
}
.booklet .b-tab:hover {
	background: #f0d921;
	color: #000;
}

/* Arrow Controls */

.booklet .b-arrow {
	display: block;
	position: absolute;
	text-indent: -9999px;
	top: 0;
	height: 100%;
	width: 74px;
}
.booklet .b-arrow div {
	display: none;
	text-indent: -9999px;
	height: 170px;
	width: 74px;
	position: absolute;
	left: 0;
	top: 25%;
}
.booklet .b-arrow-next {
	right: -80px;
}
.booklet .b-arrow-prev {
	left: -80px;
}
.booklet .b-arrow-next div {
	background: url("images/arrow-next.png") no-repeat left top;
}
.booklet .b-arrow-prev div {
	background: url("images/arrow-prev.png") no-repeat left top;
}

/* @z-index fix (needed for older IE browsers)
----------------------------------------*/

body {
	z-index: 0;
}
.b-menu {
	z-index: 100;
}
.b-selector {
	z-index: 100;
}
.booklet {
	z-index: 10;
}
.b-pN {
	z-index: 10;
}
.b-p0 {
	z-index: 30;
}
.b-p1 {
	z-index: 20;
}
.b-p2 {
	z-index: 20;
}
.b-p3 {
	z-index: 30;
}
.b-p4 {
	z-index: 10;
}
.b-prev {
	z-index: 40;
}
.b-next {
	z-index: 40;
}
.b-counter {
	z-index: 40;
}

/* @Menu Items
----------------------------------------*/

.b-menu {
	height: 40px;
	padding: 0 0 10px;
}
.b-selector {
	height: 40px;
	position: relative;
	float: right;
	border: none;
	color: #cecece;
	cursor: pointer;
	font: normal 12px "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.b-selector .b-current {
	padding: 8px 15px 12px;
	line-height: 20px;
	min-width: 18px;
	height: 20px;
	display: block;
	background: #000;
	text-align: center;
}
.b-selector-page {
	width: auto;
	margin-left: 15px;
}
.b-selector-chapter {
	width: auto;
}
.b-selector:hover {
	color: #fff;
	background-position: left 0;
}
.b-selector:hover .b-current {
	background-position: right 0;
}
.b-selector ul {
	overflow: hidden;
	margin: 0;
	list-style: none !important;
	position: absolute;
	top: 40px;
	right: 0;
	padding: 0 0 10px;
	background: #000;
	width: 240px;
}
.b-selector li {
	border: none;
}
.b-selector a {
	color: #cecece;
	height: 14px;
	text-decoration: none;
	display: block;
	padding: 5px 10px;
}
.b-selector a .b-text {
	float: left;
	clear: none;
}
.b-selector a .b-num {
	float: right;
	clear: none;
}
.b-selector a:hover {
	color: #fff;
}
.imgsize img {
	width: 450px;
	height: auto;
}
.imgsize_mi img {
	width: 350px;
	height: auto;
}

/* these styles are for the demo, but are not required for the plugin */

.zoom {
	display: inline-block;
	position: relative;
}

/* magnifying glass icon */

.zoom:after {
	content: '';
	display: block;
	width: 33px;
	height: 33px;
	position: absolute;
	top: 0;
	right: 0;
}
.zoom img {
	display: block;
}
.zoom img::selection {
	background-color: transparent;
}
#ex2 img:hover {
	cursor: url(grab.cur), default;
}
#ex2 img:active {
	cursor: url(grabbed.cur), default;
}
.trick_page1 {
	width: 100%;
	height: auto;
}
.trick_page1 img {
	width: 100%;
	height: auto;
}
.trick_page2 {
	width: auto;
	height: 100%;
}
.trick_page2 img {
	width: auto;
	height: 100%;
}


/* しかけindex */

/*wpボタン*/

/*p5*/
#btn_link_wp1 {
	left: 200px;
	bottom: 100px;
	position: absolute;
	z-index: 1000;
}
/*p9*/
#btn_link_wp2 {
	left: 40px;
	bottom: 100px;
	position: absolute;
	z-index: 1000;
}
/*21*/
#btn_link_wp3 {
	left: 30px;
	bottom: 280px;
	position: absolute;
	z-index: 1000;
}

/*weボタン*/

/*p9*/
#btn_link_we1 {
	left: 200px;
	bottom: 250px;
	position: absolute;
	z-index: 1000;
}
/*p13*/
#btn_link_we2 {
	right: 40px;
	bottom: 100px;
	position: absolute;
	z-index: 1000;
}
/*19*/
#btn_link_we3 {
	left: 30px;
	bottom: 280px;
	position: absolute;
	z-index: 1000;
}
/*p23*/
#btn_link_we4 {
	left: 200px;
	top: 250px;
	position: absolute;
	z-index: 1000;
}

/*wbボタン*/

#btn_link_wb1 {
	left: 40%;
	bottom: 10%;
	position: absolute;
	z-index: 1000;
}
#btn_link_wb2 {
	left: 40%;
	bottom: 10%;
	position: absolute;
	z-index: 1000;
}

#btn_link_wb3 {
	left: 40%;
	bottom: 40%;
	position: absolute;
	z-index: 1000;
}
#btn_link_wb4 {
	left: 40%;
	bottom: 40%;
	transform: translateX(-50%);
	position: absolute;
	z-index: 1000;
}
#btn_link_wb5 {
	right: 15%;
	bottom: 10%;
	position: absolute;
	z-index: 1000;
}

/*wlボタン*/

#btn_link_wl1 {
	left: 15%;
	bottom: 25%;
	position: absolute;
	z-index: 1000;
}
#btn_link_wl2 {
	right: 12%;
	top: 22%;
	position: absolute;
	z-index: 1000;
}

#btn_link_wl3 {
	left: 45%;
	bottom: 42%;
	position: absolute;
	z-index: 1000;
}
#btn_link_wl4 {
	left: 25%;
	bottom: 40%;
	transform: translateX(-50%);
	position: absolute;
	z-index: 1000;
}
#btn_link_wl5 {
	right: 5%;
	bottom: 40%;
	position: absolute;
	z-index: 1000;
}
#btn_link_wl6 {
	right: 15%;
	bottom: 10%;
	position: absolute;
	z-index: 1000;
}
#btn_link_wl7 {
	left: 40%;
	bottom: 32%;
	position: absolute;
	z-index: 1000;
}

/* ~しかけindex */

.startanime {
	opacity: 0;
}


/*
#btn_link_wsl1 a,
#btn_link_wsl2 a,
#btn_link_wl1 a,
#btn_link_wl2 a,
#btn_link_wl3 a,
#btn_link_wl4 a,
#btn_link_wl5 a,
#btn_link_wl6 a,
#btn_link_wl7 a,
#btn_link_we1 a,
#btn_link_we2 a,
#btn_link_we3 a,
#btn_link_we4 a,
#btn_link_we5 a,
#btn_link_wb1 a,
#btn_link_wb2 a,
#btn_link_wb3 a,
#btn_link_wb4 a,
#btn_link_wb5 a,
#btn_link_wb6 a,
#btn_link_ow1 a,
#btn_link_ow2 a {
*/
.startanime a {
	display: block;
	width: 139px;
	height: 43px;
	margin: 0;
}
/*
#btn_link_wsl1 a:hover img,
#btn_link_wsl2 a:hover img,
#btn_link_wl1 a:hover img,
#btn_link_wl2 a:hover img,
#btn_link_wl3 a:hover img,
#btn_link_wl4 a:hover img,
#btn_link_wl5 a:hover img,
#btn_link_wl6 a:hover img,
#btn_link_wl7 a:hover img,
#btn_link_we1 a:hover img,
#btn_link_we2 a:hover img,
#btn_link_we3 a:hover img,
#btn_link_we4 a:hover img,
#btn_link_we5 a:hover img,
#btn_link_wb1 a:hover img,
#btn_link_wb2 a:hover img,
#btn_link_wb3 a:hover img,
#btn_link_wb4 a:hover img,
#btn_link_wb5 a:hover img,
#btn_link_wb6 a:hover img,
#btn_link_ow1 a:hover img,
#btn_link_ow2 a:hover img,
#btn_link_wb4 a:hover img {
*/
.startanime a:hover img {
	opacity: 0.7;
}
.rotetor {
	right: 10px;
	top: 92px;
	position: absolute;
	z-index: 999;
	width: 336px;
	height: 336px;
	background: url(../wl/img/rotetor.png) left top no-repeat;
}
.seal16 {
	right: 125px;
	top: 210px;
	position: absolute;
	background: url(../wl/img/16seal.png) left top no-repeat;
	width: 100px;
	height: 100px;
	z-index: 1000;
}
#ehon16 img {
	z-index: 1001;
}

.inlineCo{
	display: none;
}
#inlineBox {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(255,255,255,0.6);
	z-index: 100;
}
#inlineBox .zoom{
	width: auto;
	position: absolute;
	left: 50%;
	top: 5%;
	bottom: 5%;
	transform: translateX(-50%);
	background-color: #fff;
	border: solid 3px #f0d921;
}
#inlineBox .zoom2{
	width: 90%;
	position: absolute;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	background-color: #fff;
	border: solid 3px #f0d921;
}
#inlineBox .zoom img{
	width:auto;
	height: 100%;
	border-radius: 15px;
}
#inlineBox .zoom2 img{
	width:100%;
	height: auto;
	border-radius: 15px;
}
#inlineBox .zoom::before,
#inlineBox .zoom2::before{
	content: '×';
	width: 1.2em;
	height: 1.2em;
	border-radius: 1em;
	background-color: #f0d921;
	position: absolute;
	right: -0.5em;
	top: -0.5em;
	text-align: center;
	line-height: 1;
	font-size: 3em;
	box-sizing: border-box;
}


@media screen and (max-width:414px) {

	#trybookBox body{
		padding:0;
		margin:0;
	}

	/* 読み方 */
	#infotext {
		width: 100%;
		font-size: 0.8em;
		margin: 20px auto 0;
		padding: 15px 15px 10px;
		box-sizing: border-box;
		position: static;
		order: 2;
	}
	#infotext h2 {
		font-size: 1.2em;
		margin:0 auto 0.7em;
	}

	#contents {
		width: 100%;
		margin: 0 auto;
		padding: 30px 0 0 0;
		display: flex;
		flex-direction: column;
	}

	#mybook{
		order:1;
	}

	.imgsize img {
		width: 100%;
		height: auto;
	}
	.imgsize_mi img {
		width: 100%;
		height: auto;
	}

	.startanime a {
		display: block;
		width: 80px;
		height: auto;
		margin: 0;
	}
	.startanime a img{
		width:100%;
		height: auto;
	}

	#inlineBox {
		background-color: rgba(255,255,255,0.8);
	}
	#inlineBox .zoom{
		width: 90%;
		left: 5%;
		top: 10%;
		bottom: auto;
		transform: translateX(0);
	}
	#inlineBox .zoom2{
		width: 90%;
		position: absolute;
		left: 5%;
		top: 15%;
		transform: translateY(0);
	}
	#inlineBox .zoom img,
	#inlineBox .zoom2 img{
		width:100%;
		height: auto;
		border-radius: 15px;
	}
	#inlineBox .zoom::before,
	#inlineBox .zoom2::before{
		position: absolute;
		right: -0.3em;
		top: -0.5em;
		font-size: 2.5em;
	}

}