@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	background: #FFCEF0 url(../images/bg.jpg) center top no-repeat;
}

#wrapper {
	width: 100%;
	overflow: hidden;
}

#main {
	width: 1026px;
	margin: auto;
}

#head{
	width: 1026px;
	height:380px;
	background:url(../images/head_bg.jpg) top left no-repeat;
}

#head div.title{
	width: 1026px;
	height:264px;
	position:relative;
}

#head div.title h1 a{
	width:370px;
	height:180px;
	position:absolute;
	top:10px;
	left:45px;
}

h1,h2,h3 {
	font-size:0px;
	text-indent:-9999px;
}

#head div.menu{
	width: 928px;
	padding:0 49px;
}

#head div.menu div{
	float:left;
}

#head div.menu div.menu_r{
	margin-right:2px;
	display: inline;
}

#head div.menu div.menu_c{
	margin-right:52px;
	display: inline;
}

#head div.menu a:hover img {
	filter:alpha(opacity=100);
	opacity:1;
}

#book_bg{
	background:url(../images/book_bg.jpg) top left no-repeat;
	width:950px;
	height:815px;
	margin:0;
	padding:0 38px;
}

#book{
	width:910px;
	height:640px;
}

.page {
	float: left;
	width: 455px;
	height:640px;
	position:relative;
}

.clear {
	clear: both;
}




/* special
----------------------------------------*/
#special{
	padding:0 28px;
	background: url(../images/sp_bg.jpg) no-repeat 28px top;
}

#special *,
#printout * {
	font-family : "ヒラギノ丸ゴ Pro W4", "Hiragino maru Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO","Verdana","Osaka",sans-serif !important;
}

#special_bg1,
#special_bg2,
#special_bg3{
	width:970px;
	height:790px;
	background-image: url(../images/sp_bg2.jpg);
	background-position: left top;
}

#special_bg1 p.sp_ttl,
#special_bg2 p.sp_ttl,
#special_bg3 p.sp_ttl {
	height:165px;
	font-size:5px;
	text-indent:-9999px;
	margin:0;
	padding:0;
}

.lead{
	padding:0 75px;
}

#special_bg1 #thumb li{
	list-style:none;
	float:left;
	border:3px solid #FFF;
	display: inline;
	width:170px;
	height:120px;
	margin-top: 10px;
	margin-right: 25px;
	margin-bottom: 0;
	margin-left: 0;
}

#special_bg1 #thumb li.candy{
	border:none;
	width:231px;
	height:255px;
}

#special_bg1 #thumb li.img7{
	margin-left:55px;
	display:inline;
}

#special_bg1 #thumb li.on{
	border:3px solid #F39;
}

.puzzle_box{
	padding:60px 75px 0 75px;
}

.puzzle_box .playguide{
	width:271px;
	float:left;
}

.puzzle_box .puzzle{
	width:500px;
	height:350px;
	float:right;
	border:5px solid #F39;
	background-color:#FFF;
}

#cleared {
	list-style: none;
	margin: 0;
	padding: 0;
}

#cleared li {
	position: relative;
}

.select_img1{
	float:left;
	width:120px;
	height:85px;
	border:3px solid #fff;
	margin-top:40px;
}

.select_img1.on{
	border:3px solid #F39;
}

.select_img1.cleared{
	border:3px solid #FFF;
}

.select_img1.cleared img{
	filter:alpha(opacity=50);
	opacity:0.5;
	background-color:#FFF;
}

.select_img2{
	float:right;
	width:120px;
	height:85px;
	border:3px solid #fff;
	margin-top:40px;
}

.select_img2.on{
	border:3px solid #F39;
}

.select_img2.cleared{
	border:3px solid #FFF;
}

.select_img2.cleared img{
	filter:alpha(opacity=50);
	opacity:0.5;
	background-color:#FFF;
}

.cleared_seal {
	position: absolute;
	left: 0;
	top: 0;
	filter:alpha(opacity=100);
	opacity:1;
	background-color:transparent;
}

.name_box{
	padding:30px 120px 0 75px;
}

.name_box .miyuki{
	float:left;
	width:225px;
}

.name_box .name_right{
	width:500px;
	float:right;
}

.name{
	background:url(../images/sp_name.gif) top left no-repeat;
	margin-top:10px;
	width: 500px;
	height: 108px;
	color:#333;
	font-size:30px;
	text-align:center;
	font-weight:bold;
}

.btn_name{
	margin-top:100px;
	text-align:center;
}

.btn_name a:hover img {
	filter:alpha(opacity=70);
	opacity:0.7;
}

#special_bg4{
	background:url(../images/sp_bg2.jpg) top left;
	width:970px;
	height:790px;
}

#special_bg4 p.sp_ttl{
	height:125px;
	font-size:5px;
	text-indent:-9999px;
	margin:0;
	padding:0;
}

#special_bg4 .book_box{
	padding:0 30px;
	width:910px;
	height:640px;
}

.book_h1{
	background:url(../images/sp_book_h1.jpg) top left no-repeat;
	height:640px;
}

.book_h1 p.book_name{
	position:absolute;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	width:380px;
	height:50px;
	bottom:30px;
	left:40px;
	margin:0;
	padding:20px 0 0 0;
}

.book_start{
	padding:0 55px 0 30px;
	width:370px;
}

.open_txt{
	width: 370px;
	margin-top:35px;
	text-align:center;
}

.btn_open{
	width: 370px;
	margin-top:25px;
	text-align:center;
}

.btn_open a:hover img {
	filter:alpha(opacity=70);
	opacity:0.7;
}

.book_start_bg{
	background:url(../images/sp_look_bg.gif) top left no-repeat;
	width: 370px;
	height:320px;
	margin-top:50px;
	position:relative;
}

.book_start_bg p.bok_start_txt{
	margin:0;
	padding:0;
	font-size:5px;
	text-indent:-9999px;
}

.book_start_bg .sp_btn_print{
	position:absolute;
	width:304px;
	height:64px;
	top:130px;
	left:33px;
}

.book_start_bg .sp_btn_print a:hover img {
	filter:alpha(opacity=70);
	opacity:0.7;
}

.book_start_bg .sp_btn_make{
	position:absolute;
	width:304px;
	height:64px;
	top:220px;
	left:33px;
}

.book_start_bg .sp_btn_make a:hover img {
	filter:alpha(opacity=70);
	opacity:0.7;
}

.book_p1{
	background:url(../images/sp_img1.jpg) top left no-repeat;
	height:640px;
}

.book_p2{
	background:url(../images/sp_img1.jpg) top right no-repeat;
	height:640px;
}

.book_p3{
	background:url(../images/sp_img2.jpg) top left no-repeat;
	height:640px;
}

.book_p4{
	background:url(../images/sp_img2.jpg) top right no-repeat;
	height:640px;
}

.book_p5{
	background:url(../images/sp_poster.jpg) top left no-repeat;
	height:640px;
}

.book_p6{
	background:url(../images/sp_poster.jpg) top right no-repeat;
	height:640px;
}

.book_h4{
	background:url(../images/sp_book_h4.jpg) top left no-repeat;
	height:640px;
}

.book_last{
	padding:0 30px 0 55px;
	width:370px;
}

/* special (added)
----------------------------------------*/

.special_bg {
	position: relative;
}

.cover {
	width: 970px;
	height: 790px;
	background: #fff;
	opacity:0.5;
	filter: alpha(opacity=50);
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}

.dialog {
	position: absolute;
	background: url(../images/sp_dialog_bg.jpg) no-repeat;
	width: 485px;
	height: 395px;
	left: 242px;
	top: 197px;
	text-align: center;
	color: #630;
	font-weight: bold;
	font-size: 20px;
	
	box-shadow: 0px 0px 7px #777;
	-webkit-box-shadow: 0px 0px 7px #777;
	-moz-box-shadow: 0px 0px 7px #777;
}

.dialog input,
#printout input {
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	border: solid 2px #fff;
	height: 30px;
	padding: 0 10px;
	
	box-shadow: 0px 0px 7px #bbb;
	-webkit-box-shadow: 0px 0px 7px #bbb;
	-moz-box-shadow: 0px 0px 7px #bbb;
	
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	
	cursor: pointer;
    outline: 0;
}

.dialog input:hover,
.printout input:hover {
	filter:alpha(opacity=70);
	opacity:0.7;
}

.dialog .no {
	background: #0af url(../images/sp_dialog_no.jpg) repeat-x;
	margin-right: 10px;
}

.dialog .yes,
#printout .yes {
	background: #f39 url(../images/sp_dialog_yes.jpg) repeat-x;
}

@media print {
	#printout_btn {
		display: none;
	}
}

#special_bg1 .dialog,
#special_bg2 .dialog,
#special_bg3 .dialog {
	display: none;
}

#selected {
	list-style: none;
	margin: 0 0 0 54px;
	padding: 0;
	width: 402px;
}
#selected li {
	display: inline;
	float:left;
	border:3px solid #FFF;
	width:170px;
	height:120px;
	margin:0 25px 0 0;
}

#name1 {
	border: 0;
	margin-top: 33px;
	/margin-top: 32px;
	width: 490px;
	height: 70px;
	padding: 0;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	/line-height: 70px;
}

#name_btn {
	opacity:0.5;
	filter: alpha(opacity=50);
}

#name2 {
	color: #f39;
}

#printout .book_h4,
#printout .book_h1 {
	width: 227px;
	height: 320px;
	background: none;
}

#printout .book_p1,
#printout .book_p3,
#printout .book_p5 {
	width: 454px;
	height: 320px;
	background: none;
}

#printout .book_h1 {
	position: relative;
}

#printout .book_h1 img {
	position: absolute;
	left: 0;
	top: 0;
}

#printout .book_h1 p.book_name{
	position:absolute;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	width:190px;
	height:25px;
	bottom:15px;
	left:20px;
	margin:0;
	padding:10px 0 0 0;
}

#make {
	width: 396px;
	margin: 20px auto;
	padding: 10px 0;
	border: solid 3px #f90;
	background: #ffc;
	text-align:  center;
}

#make img {
	margin: 10px 0;
}

/* @Booklet
----------------------------------------*/
	.booklet           {width:910px; height:640px; position:relative; /*background:#fff;*/ margin:0 auto; overflow:visible !important;}
	.booklet .b-page  {left:0px; top:0; position:absolute; overflow:hidden; padding:0;}
	
	.booklet .b-pN  {}
	.booklet .b-p0  {}
	.booklet .b-p1  {}
	.booklet .b-p2  {}    
	.booklet .b-p3  {}
	.booklet .b-p4  {}
	
	.booklet .b-load  {}
   
   	/* Page Wrappers */
	.booklet .b-wrap       {top:0; position:absolute;}
	.booklet .b-wrap-left  {background:url(../images/bg_left.jpg) repeat-y;}
	.booklet .b-wrap-right {background:url(../images/bg_right.jpg) repeat-y;}
	
	.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:0px 1px 3px #222;}
   
   	/* Page Numbers */
	.booklet .b-counter {bottom:0; margin:10px; position:absolute; display:block; width:20px; height:20px; color:#444; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; line-height: 20px;}
	.booklet .b-counter {margin:15px 10px;}
	
	.booklet .b-wrap-left  .b-counter  {left:0;}
	.booklet .b-wrap-right .b-counter {right:0;}
   
   	/* Page Shadows */
	.booklet .b-shadow-f  {right:0; top:0; position:absolute; opacity:0;}
	.booklet .b-shadow-b  {left:0;  top:0; position:absolute; opacity:0;}
	html>/**/body .booklet .b-shadow-f  {background-image:url("../images/shadow-top-forward.png"); background-repeat:repeat-y; background-position:100% 0;}
	html>/**/body .booklet .b-shadow-b  {background-image:url("../images/shadow-top-back.png");    background-repeat:repeat-y; background-position:0 0;}
	
	html>/**/body .booklet .b-p0 {background-image:url("../images/shadow.png"); background-repeat:repeat-y; background-position:100% 10px;}
	html>/**/body .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:#000; height:40px; width:100%; padding:10px 0 0; text-align:center; color:#ccc; position:absolute; font-size:11px;}
	.booklet .b-tab-prev   {left:0;}
	.booklet .b-tab-next   {right:0;}
	.booklet .b-tab:hover  {background:#aaa; color:#000;}	
	
   	/* Arrow Controls */
	.booklet .b-arrow          {display:block; position:absolute; text-indent:-9999px; top:0; height:100%; width:45px;}
	.booklet .b-arrow div      {display:none; text-indent:-9999px; height:640px; width:45px; position:absolute; left:0px; top:0px;}
	.booklet .b-arrow-next     {right:0;}
	.booklet .b-arrow-prev     {left:0;}
	.booklet .b-arrow-next div:hover {background:url("../images/arrow-next2.png") no-repeat left top;}
	.booklet .b-arrow-prev div:hover {background:url("../images/arrow-prev2.png") no-repeat left top;}
	.booklet .b-arrow-next div:active {background-image:none;}
	.booklet .b-arrow-prev div:active {background-image:none;}
		
/* @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:10;}
    .b-p1             {z-index:10;}
    .b-p2             {z-index:10;}
    .b-p3             {z-index:10;}
    .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;}
	.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 0px;}
	.b-selector:hover .b-current {background-position:right 0px;}
	.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; font:normal 12px "Myriad Pro", Myriad, "DejaVu Sans Condensed","Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;}
	.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;}