@charset "UTF-8";

#index {
color: #595959;
}

#index h2#page_title {
display: block;
width: 660px;
height: 30px;
text-indent: -9999px;
background: url(../img/subt_loversstory.jpg) no-repeat 0 0;
}

#index #catch {
width: 600px;
margin: 0 0 0 30px;
padding: 0 0 30px 0;
}

#index h3#sub_title {
display: block;
width: 307px;
height: 20px;
margin: 25px 0 0 0;
background: url(../img/subt_loversstory_s.jpg) no-repeat left top;
text-indent: -9999px;
}
/* -- // main_box // -- */
#index #main_box {
width: 660px;
padding: 0;
margin: 0 0 10px 0;
}
/* -- // main_box // -- */

/* -- // container // -- */

#index #container {
width: 610px;
margin:  0 0 0 30px;
}

#index #container #content_img {
width: 217px;
float: left;
margin: 0 30px 0 0;
padding-bottom: 10px;
}

#index #container #content_box {
width: 352px;
float: left;
}

#index #container #content_box .separator {
clear: both;
width: 354px;
height: 1px;
margin: 0 0 30px 0;
}

#index #container #content_box h3#subt_lovers01 {
display: block;
width: 354px;
height: 392px;
background: url(../img/comment_lovers01.jpg) no-repeat center top;
text-indent: -9999px;
margin: 0 0 30px 0;
}

#index #container #content_box h3 img {
margin: 0 0 30px 0;
}

#index #container #content_box p {
font-size: 83%;
margin: 0 0 30px 0;
}

/* -- // container end // -- */

/* -- // jump // -- */
#index #jump {
clear: both;
width: 600px;
margin: 0 0 20px 30px;
background: url(../img/bg_lovers_c.jpg) repeat-y center top;
}

#index #jump_t {
clear: both;
width: 600px;
padding: 10px 0 0 0;
background: url(../img/bg_lovers_t.jpg) no-repeat center top;
}

#index #jump_b {
clear: both;
width: 600px;
padding: 0 0 9px 0;
background: url(../img/bg_lovers_b.jpg) no-repeat center bottom;
}

#index #jump_in {
margin: 0 0 0 7px;
}

#index #jump .box {
display: block;
width: 140px;
height: 24px;
float: left;
margin: 0 7px 8px 0;
}

#index #jump .box a {
display: block;
width: 140px;
height: 24px;
float: left;
text-indent: -9999px;
}

#index #jump .box a:hover {
background: none;
}

#index #jump #go_lock { background: url(../img/bt_lovers01_on.jpg) no-repeat top left; }
#index #jump #go_spot { background: url(../img/bt_lovers02_on.jpg) no-repeat top left; }
#index #jump #go_story { background: url(../img/bt_lovers03_on.jpg) no-repeat top left; }
#index #jump #go_novel { background: url(../img/bt_lovers04_on.jpg) no-repeat top left; }

#index #jump #go_lock a { background: url(../img/bt_lovers01_off.jpg) no-repeat top left; }
#index #jump #go_spot a { background: url(../img/bt_lovers02_off.jpg) no-repeat top left; }
#index #jump #go_story a { background: url(../img/bt_lovers03_off.jpg) no-repeat top left; }
#index #jump #go_novel a { background: url(../img/bt_lovers04_off.jpg) no-repeat top left; }

#index #jump #go_lock a:hover { background: none; }
#index #jump #go_spot a:hover { background: none; }
#index #jump #go_story a:hover { background: none; }
#index #jump #go_novel a:hover { background: none; }

#index #jump p#attention {
clear: both;
display: block;
width: 140px;
height: 8px;
margin: 0 0 0 441px;
background: url(../img/comment_lovers02.jpg) no-repeat top left;
text-indent: -9999px;
}

/* -- // panorama_box end // -- */



/*******************************/
/* -- // -- heart --  // -- */
/*******************************/

#heart {
width: 660px;
}

#heart .separator {
clear: both;
width: 540px;
margin: 0 0 30px 30px;
font-size: 1px;
}

#heart h2#page_title {
display: block;
width: 660px;
height: 30px;
text-indent: -9999px;
background: url(../img/subt_heartlock.jpg) no-repeat 0 0;
}

/* -- catch --*/
#heart #catch {
width: 600px;
margin: 0 0 30px 30px;
}

#heart h3#sub_title {
display: block;
width: 600px;
height: 20px;
margin: 25px 0 20px 0;
background: url(../img/subt_heartlock_s.jpg) no-repeat left top;
text-indent: -9999px;
}

#heart #catch_heart {
display: block;
width: 580px;
height: 30px;
margin: 25px 0 0 0;
background: url(../img/catch_heartlock.jpg) no-repeat center top;
text-indent: -9999px;
}


/* -- container -- */
#heart #container {
width: 600px;
margin: 0 0 25px 30px;
background: url(../img/bg_heartlock_c.jpg) repeat-y left top;
color: #666666;
}

#heart #container_t {
width: 600px;
padding: 30px 0 0 0;
background: url(../img/bg_heartlock_t.jpg) no-repeat left top;
}

#heart #container_b {
width: 600px;
padding: 0 0 35px 0;
background: url(../img/bg_heartlock_b.jpg) no-repeat left bottom;
}


#heart #container #content {
margin: 0 0 0 30px;
}

#heart #container #content_img {
float: left;
width: 294px;
}

#heart #container #content_box {
float: left;
width: 244px;
padding: 0 30px 30px 0;
}

#heart #container #content_box h3#subt_heart01 {
display: block;
width: 164px;
height: 15px;
margin: 0 0 10px 0;
background: url(../img/subt_heartlock01.jpg) no-repeat left top;
text-indent: -9999px;
}

#heart #container #middle_area {
width: 540px;
margin: 0 0 20px 30px;
}

#heart #container #middle_area h3#subt_heart02 {
display: block;
width: 215px;
height: 16px;
margin: 0 0 10px 0;
background: url(../img/subt_heartlock02.jpg) no-repeat left top;
text-indent: -9999px;
}

/* -- photo_box -- */

#heart #photo_box {
clear: both;
width: 540px;
height: 150px;
margin: 0 0 0 30px;
}

#heart #pbox_l {
width: 255px;
float: left;
margin: 0 30px 0 0;
}

#heart #pbox_r {
width: 255px;
float: left;
margin: 0;
}

/* -- info -- */

#heart #info {
clear: both;
width: 600px;
background: url(../img/bg_info_c.jpg) repeat-y center top;
color: #666666;
margin: 0 0 20px 30px;
}

#heart #info_t {
width: 600px;
padding: 20px 0 0 0;
background: url(../img/bg_info_t.jpg) no-repeat center top;
}

#heart #info_b {
width: 600px;
padding: 0 0 20px 0;
background: url(../img/bg_info_b.jpg) no-repeat center bottom;
}

#heart #info ul ,
#heart #info li {
font-size: 100%;
line-height: 150%;
}
#heart #info ul {
margin: 0 20px 0 30px;
}

#heart #info ul li {
font-size: 83%;
list-style-type: disc;
margin: 0 0 5px 0;
}

#heart #info p {
font-size: 83%;
margin: 0 20px;
}

/* -- photo_box -- */
#heart #jump {
position: relative;
clear: both;
width: 600px;
height: 25px;
overflow: hidden;
margin: 0 0 10px 30px;
text-align: center;
color: #666666;
}

#heart p#jump_img {
position: absolute;
display: block;
width: 193px;
height: 25px;
left: 193px;
background: url(../img/bt_heartlock_on.jpg) no-repeat center top;
}

#heart p#jump_img a {
display: block;
width: 193px;
height: 25px;
background: url(../img/bt_heartlock_off.jpg)  no-repeat center top; 
text-indent: -9999px;
}

#heart p#jump_img a:hover {
background: none; 
}

#heart #jump_comment {
margin: 0 0 20px 0;
text-align: center;
}

/*******************************/
/* -- // -- spot --  // -- */
/*******************************/

#spot {
width: 660px;
}

#spot h2#page_title {
display: block;
width: 660px;
height: 30px;
text-indent: -9999px;
background: url(../img/subt_spot.jpg) no-repeat 0 0;
}

#spot .separator {
clear: both;
width: 560px;
margin: 0 0 30px 20px;
}

/* -- catch --*/
#spot #catch {
width: 600px;
margin: 0 0 30px 30px;
}

#spot h3#sub_title {
display: block;
width: 600px;
height: 20px;
margin: 25px 0 20px 0;
background: url(../img/subt_spot_s.jpg) no-repeat left top;
text-indent: -9999px;
}

#spot #catch_spot {
display: block;
width: 501px;
height: 29px;
margin: 0 0 0 0;
background: url(../img/catch_spot.jpg) no-repeat center top;
text-indent: -9999px;
}

/* -- middle_area */
#spot #middle_area {
clear: both;
width: 600px;
margin: 0 0 30px 30px;
padding: 20px 0;
background: url(../img/bg_spot.gif) no-repeat left top #000000;
}

/* -- photo_box -- */
#spot .photo_box {
clear: both;
width: 570px;
margin: 0 0 20px 20px;
}

#spot .pbox_img {
width: 216px;
float: left;
margin: 0 20px 0 0;
}

#spot .pbox_comment {
position: relative;
width: 320px;
float: left;
color: #ffffff;
}

#spot p#go_haboob {
position: absolute;
right: 0;
bottom: 10px;
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot01_on.jpg) no-repeat 0 0;
}

#spot p#go_haboob a {
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot01_off.jpg) no-repeat 0 0;
text-indent: -9999px;
}

#spot p#go_haboob a:hover {
background: none;
}

#spot p#go_chair {
position: absolute;
right: 0;
bottom: 10px;
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot02_on.jpg) no-repeat 0 0;
}

#spot p#go_chair a {
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot02_off.jpg) no-repeat 0 0;
text-indent: -9999px;
}

#spot p#go_chair a:hover {
background: none;
}

#spot p#go_river {
position: absolute;
right: 0;
bottom: 10px;
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot03_on.jpg) no-repeat 0 0;
}

#spot p#go_river a {
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot03_off.jpg) no-repeat 0 0;
text-indent: -9999px;
}

#spot p#go_river a:hover {
background: none;
}

#spot p#go_173 {
position: absolute;
right: 0;
bottom: 10px;
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot04_on.jpg) no-repeat 0 0;
}

#spot p#go_173 a {
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot04_off.jpg) no-repeat 0 0;
text-indent: -9999px;
}

#spot p#go_173 a:hover {
background: none;
}

#spot p#go_lumideck {
position: absolute;
right: 0;
bottom: 10px;
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot05_on.jpg) no-repeat 0 0;
}

#spot p#go_lumideck a {
display: block;
width: 181px;
height: 19px;
background: url(../img/bt_spot05_off.jpg) no-repeat 0 0;
text-indent: -9999px;
}

#spot p#go_lumideck a:hover {
background: none;
}

#spot p#go_lumisky {
position: absolute;
right: 0;
bottom: 10px;
display: block;
width: 196px;
height: 19px;
background: url(../img/bt_spot06_on.jpg) no-repeat 0 0;
}

#spot p#go_lumisky a {
display: block;
width: 196px;
height: 19px;
background: url(../img/bt_spot06_off.jpg) no-repeat 0 0;
text-indent: -9999px;
}

#spot p#go_lumisky a:hover {
background: none;
}

#spot .photo_box h3#subt_spot01 {
display: block;
width: 278px;
height: 15px;
margin: 0 0 10px 0;
background: url(../img/subt_spot01.jpg) no-repeat left top;
text-indent: -9999px;
}

#spot .photo_box h3#subt_spot02 {
display: block;
width: 326px;
height: 16px;
margin: 0 0 10px 0;
background: url(../img/subt_spot02.jpg) no-repeat left top;
text-indent: -9999px;
}

#spot .photo_box h3#subt_spot03 {
display: block;
width: 292px;
height: 16px;
margin: 0 0 10px 0;
background: url(../img/subt_spot03.jpg) no-repeat left top;
text-indent: -9999px;
}

#spot .photo_box h3#subt_spot04 {
display: block;
width: 184px;
height: 16px;
margin: 0 0 10px 0;
background: url(../img/subt_spot04.jpg) no-repeat left top;
text-indent: -9999px;
}

#spot .photo_box h3#subt_spot05 {
display: block;
width: 244px;
height: 16px;
margin: 0 0 10px 0;
background: url(../img/subt_spot05.jpg) no-repeat left top;
text-indent: -9999px;
}

#spot .photo_box h3#subt_spot06 {
display: block;
width: 278px;
height: 16px;
margin: 0 0 10px 0;
background: url(../img/subt_spot06.jpg) no-repeat left top;
text-indent: -9999px;
}

/* -- info -- */
#spot #info {
clear: both;
width: 560px;
background: url(../img/bg_info_spot_c.gif) repeat-y center top;
color: #666666;
margin: 0 0 0 20px;
}

#spot #info_t {
width: 560px;
padding: 10px 0 0 0;
background: url(../img/bg_info_spot_t.gif) no-repeat center top;
}

#spot #info_b {
width: 560px;
padding: 0 0 10px 0;
background: url(../img/bg_info_spot_b.gif) no-repeat center bottom;
}

#spot #info p {
font-size: 83%;
margin: 0 20px;
}

/********************************/
/* -- // -- story --  // -- */
/********************************/

#story {
width: 660px;
}

#story h2#page_title {
display: block;
width: 660px;
height: 30px;
text-indent: -9999px;
background: url(../img/subt_shortstory.jpg) no-repeat 0 0;
}

/* -- catch --*/
#story #catch {
width: 600px;
margin: 0 0 30px 30px;
}

#story h3#sub_title {
display: block;
width: 600px;
height: 20px;
margin: 25px 0 0 0;
background: url(../img/subt_shortstory_s.jpg) no-repeat left top;
text-indent: -9999px;
}

/* -- middle_area */
#story #container {
width: 600px;
margin: 0 0 30px 30px;
background: url(../img/bg_story_c.jpg) repeat-y center top;
}

#story #container_t {
width: 600px;
padding: 20px 0 0 0;
background: url(../img/bg_story_t.jpg) no-repeat center top;
}

#story #container_b {
width: 600px;
padding: 0 0 20px 0;
background: url(../img/bg_story_b.jpg) no-repeat center bottom;
}


#story #container p {
width: 540px;
margin:  0 30px;
line-height: 1.4;
color: #555555;
}

/* -- info -- */
#story #info {
clear: both;
width: 600px;
background: url(../img/bg_info_c.jpg) repeat-y center top;
color: #555555;
margin: 30px 0 20px 30px;
}

#story #info_t {
width: 600px;
padding: 20px 0 0 0;
background: url(../img/bg_info_t.jpg) no-repeat center top;
}

#story #info_b {
width: 600px;
padding: 0 0 10px 0;
background: url(../img/bg_info_b.jpg) no-repeat center bottom;
}

#story #info p {
margin: 0 20px 10px 20px;
font-size: 83%;
}

#story #info p span {
font-weight: bold;
}