@charaset "UTF-8";

/* FONT SIZE */
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

/* clearfix */
.clearfix {zoom:1;}
.clearfix:after{
    content: ""; 
    display: block; 
    clear: both;}

/* common */
.titleBox { height:40px; overflow:hidden; }
#headBox { min-width: 1280px; }
#footBox { overflow:hidden; min-width: 1280px; }

html,body { height:100%; }
img { border: none;}
a span { display:none;}

body { margin:0px; padding:0px; background:#000000;}

#wrapper,#frame-nav { display: none; }

/* TOP PAGE */
.frame-toppage { margin:0px auto; background:url(image/bg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; }
.frame-toppage .frame-spacer { height:10px;}

.frame-toppage .frame-book { width:1280px; height:840px; margin:0px auto; background:url(image/bg_chara1.png) 0 0 no-repeat; position:relative;}

.frame-toppage .btn-open { width:495px; height:90px; background:url(image/18th_minibanner.png); position:absolute; top:10px; left:629px;  z-index:100;}

.frame-photo-right { width:280px; height:708px; position:absolute; top:100px; left:550px; z-index:50;}
.frame-photo-left { width:280px; height:708px; position:absolute; top:100px; left:850px; z-index:50;}
.box-photo { width:280px; height:236px;}

.top-ph-01 { background: url("image/1st/botan_1st_01.png") no-repeat; }
.top-ph-02 { background: url("image/1st/botan_1st_02.png") no-repeat; margin-left: -80px; }
.top-ph-03 { background: url("image/1st/botan_1st_03.png") no-repeat; }
.top-ph-04 { background: url("image/1st/botan_1st_04.png") no-repeat; }
.top-ph-05 { background: url("image/1st/botan_1st_05.png") no-repeat; margin-left: 80px; }
.top-ph-06 { background: url("image/1st/botan_1st_06.png") no-repeat; }

.box-photo a { width:280px; height:236px; display:block;}
.top-ph-01 a { background: url("image/1st/botan_1st_01_off.png") no-repeat; }
.top-ph-02 a { background: url("image/1st/botan_1st_02_off.png") no-repeat; }
.top-ph-03 a { background: url("image/1st/botan_1st_03_off.png") no-repeat; }
.top-ph-04 a { background: url("image/1st/botan_1st_04_off.png") no-repeat; }
.top-ph-05 a { background: url("image/1st/botan_1st_05_off.png") no-repeat; }
.top-ph-06 a { background: url("image/1st/botan_1st_06_off.png") no-repeat; }

.top-ph-01 a:hover { background-image: url("image/1st/botan_1st_01.png"); }
.top-ph-02 a:hover { background-image: url("image/1st/botan_1st_02.png"); }
.top-ph-03 a:hover { background-image: url("image/1st/botan_1st_03.png"); }
.top-ph-04 a:hover { background-image: url("image/1st/botan_1st_04.png"); }
.top-ph-05 a:hover { background-image: url("image/1st/botan_1st_05.png"); }
.top-ph-06 a:hover { background-image: url("image/1st/botan_1st_06.png"); }

/* left bottom navi */
.box-banner ul { margin: 0px; padding: 0px;}
.box-banner li { margin: 0 0 8px 8px; list-style: none; float: left;}

/* 追加 */
ul.blbanner{
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 5px;
	left: 800px;
}

ul.blbanner li{
	margin: 0 20px 0 0;
	padding: 0;
	float: left;
}

body::before {
  content: "";
  background: url(image/bg.jpg) no-repeat center center;
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  transform: translateZ(0);
}