@charset "euc-jp" ;

div#twilight-body a{
   color: #ff98bc;
   }

/* トップのメインビジュアル 
-------------------------------------*/
div#twilight-body div#headArea{
   width: 769px;
   height: 671px;
   position:relative;
   background-image: url(../img/headimg.jpg);
   background-repeat: no-repeat;
   padding: 0 0 0 10px;
   margin: 0 0 0 0;
   }

*:first-child+html div#twilight-body{
   font-size: 90%;
   }
* html div#twilight-body {
   font-size: 90%;
   }

#headArea a{
display:block;
width:500px;
height: 180px;
}

#headArea a.navi-detail{
position:absolute;
width:248px;
top:240px;
left:10px;
}

#headArea a.navi-event{
position:absolute;
width:248px;
top:240px;
left:255px;
}

#headArea a.navi-story{
position:absolute;
top:435px;
height: 140px;
left:10px;
}

div#twilight-body div#headArea h1,
div#twilight-body div#headArea h2 {
   height: 100px;
   text-indent: -9999em;
   }
div#twilight-body div#headArea p#catch1 {
   height: 33px;
   text-indent: -9999em;   
   }
div#twilight-body div#headArea p#lead1 {
   height: 60px;
   width: 440px;
   color: #CCC;
   }
div#twilight-body div#headArea img#scene1 {
   width: 220px;
   height: 130px;
   float: left;
   margin-right: 10px;
   }
div#twilight-body div#headArea p#opening {
   width: 400px;
   height: 90px;
   color: #CCC;
   float: left;
   line-height: 24px;
   padding-top: 14px;
   }
div#twilight-body div#headArea p#opening a span{
   color: #bb6f8a;
   text-decoration: none;
   }
   
div#twilight-body div#headArea p#opening a#official {
   color: #CCC;
   text-decoration: none;   
   }
   
   
/* エピソード
-------------------------------------*/
div#twilight-body div#episodes p#twilighter {
   width: 720px;
   height: 46px;
   background: url(../img/lead.jpg) left top no-repeat;
   padding: 15px 25px;
   color: #fff;
   }
div#twilight-body div#episodes h3 {
   height: 40px;
   text-indent: -9999em;
   }
   
div#twilight-body div#episodes div#episode1 {
   background: url(../img/episode1.jpg) left top no-repeat;
   }
div#twilight-body div#episodes div#episode2 {
   background: url(../img/episode2.jpg) left top no-repeat;
   }
div#twilight-body div#episodes div#episode1,
div#twilight-body div#episodes div#episode2 {
   width: 385px;
   height: 185px;
   float: left;
   }

div#twilight-body div#episodes div#episode1 div.episodebox,
div#twilight-body div#episodes div#episode2 div.episodebox {
   width: 225px;
   height: 90px;
   margin-top: 30px;
   margin-left: 155px;
   padding-right: 5px;
   color: #CCC;
   }
div#twilight-body div#episodes div#episode1 div.episodebox p.todetail,
div#twilight-body div#episodes div#episode2 div.episodebox p.todetail {
   text-align: right;
   }

div#twilight-body div#episodes div#episode3 {
   background: url(../img/episode3.jpg) left top no-repeat;
   width: 770px;
   height: 345px;
   clear: left;
   }
div#twilight-body div#episodes div#episode3 div.episodebox {
   width: 375px;
   padding-top: 40px;
   padding-right: 10px;
   float: right;
   }
div#twilight-body div#episodes div#episode3 div.episodebox p.explain {
   color: #FFF;
   }
div#twilight-body div#episodes div#episode3 div.episodebox p.explain span {
   color: #ff98bc;
   }
div#twilight-body div#episodes div#episode3 div.episodebox p#example {
   color: #ff98bc;
   font-size: 85%;
   }
div#twilight-body div#episodes div#episode3 div.episodebox p.episode-post a {
display:block;
   width: 332px;
   height: 40px;
   margin-top: 12px;
   margin-left: 23px;
   text-indent: -9999em;
   background: url(../img/post.png) left top no-repeat;
   }
   
div#twilight-body div#episodes div#episode4 {
   background: url(../img/episode4.jpg) left top no-repeat;
   width: 770px;
   height: 397px;
   }
div#twilight-body div#episodes div#episode4 p.explain {
   color: #ffffff;
   padding-left: 20px;
   margin-top: 20px;
   }
div#twilight-body div#episodes div#episode4 div#hamari-check {
   width: 500px;
   height: 256px;
   border: 1px solid #000;
   margin: 0 auto;
   }

/* episodeページ,Storyページのナビゲーション
-------------------------------------*/
div#twilight-episode01,
div#twilight-episode02,
div#twilight-story,
div#twilight-result {
   width: 770px;
   margin: 0;
   padding: 0;
   }

div#twilight-episode01 div#headArea,
div#twilight-episode02 div#headArea,
div#twilight-story div#headArea {
   width: 770px;
   height: 245px;
   background: url(../img/header2bg.jpg) left top no-repeat;
   }

div#twilight-result div#headArea {
   width: 770px;
   height: 223px;
   background: url(../img/header3bg.jpg) left top no-repeat;
   }
div#twilight-episode01 div#headArea h1 a,
div#twilight-episode02 div#headArea h1 a,
div#twilight-story div#headArea h1 a,
div#twilight-result div#headArea h1 a{
   display: block;
   height: 153px;
   width: 450px;
   text-indent: -9999em;
   }
div#headArea div#topnav ul{
   width: 770px;
   height: 41px;
   margin: 0;
   padding: 0;
   }
div#headArea div#topnav ul li {
   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
   display: inline;
   }
div#headArea div#topnav ul li a{
   display: block;
   text-indent: -9999em;
   }   
div#headArea div#topnav ul li#epi1 a{
   width: 186px;
   height: 41px;
   background :url(../img/topnav.gif) left top no-repeat;   
   }
div#headArea div#topnav ul li#epi2 a{
   width: 186px;
   height: 41px;
   background :url(../img/topnav.gif) -186px top no-repeat;      
   }
div#headArea div#topnav ul li#epi3 a{
   width: 204px;
   height: 41px;
   background :url(../img/topnav.gif) -372px top no-repeat;         
   }
div#headArea div#topnav ul li#epi4 a{
   width: 194px;
   height: 41px;
   background :url(../img/topnav.gif) -576px top no-repeat;         
   }
div#headArea div#topnav ul li#epi1 a:hover {
   background :url(../img/topnav.gif) left top no-repeat;
   background-position: 0 -41px;
   }
div#headArea div#topnav ul li#epi2 a:hover {
   background :url(../img/topnav.gif)  left top no-repeat;
   background-position: -186px -41px;
   }
div#headArea div#topnav ul li#epi3 a:hover {
   background :url(../img/topnav.gif) left top no-repeat;
   background-position: -372px -41px;
   }
div#headArea div#topnav ul li#epi4 a:hover {
   background :url(../img/topnav.gif) left top no-repeat;
   background-position: -576px -41px;
   }

div#twilight-episode01,
div#twilight-episode02,
div#twilight-story{
position:relative;
}

div#twilight-episode01 a.btn-result,
div#twilight-episode02 a.btn-result,
div#twilight-story a.btn-result{
display:block;
width:270px;
height:110px;
position:absolute;
top:20px;
left:470px;
}

/* episode01
-------------------------------------*/                  
div#twilight-episode01 div#episodes {
   background: url(../img/episode1img.png) left top no-repeat;
   width: 770px;
   height: 953px;
   text-indent: -9999em;
   }
/* episode02
-------------------------------------*/                  
div#twilight-episode02 div#episodes {
   background: url(../img/episode2img.jpg) left top no-repeat;
   width: 770px;
   height: 876px;
   text-indent: -9999em;
   }


/* 来日イベント
-------------------------------------*/                  
#event{
	width: 770px;
	background: #000 url(../img/event.jpg) no-repeat top;
	margin-top: -35px;
	overflow: hidden;
	padding-bottom: 30px;
}
#event h2{
	height: 612px;
	visibility: hidden
}
#event ul,
#event ul li,
#event ul li a{
	display: block;
	margin: 0;
	padding: 0;
}
#event ul{
	position: relative;
	width: 770px;
	height: 160px;
	overflow: hidden;
}
#event ul li{
	position: absolute;
	list-style-type: none;
}
#event ul li a{
	text-indent: -9999px;
	overflow: hidden;
}
#event ul li#btn0{left: 309px;top: 30px;}
#event ul li#btn0 a{width: 214px;height: 46px;}
#event ul li#btn0 a:hover{background: url(../img/event_btn0_hover.gif);}
#event ul li#btn1{left: 318px;top: 86px;}
#event ul li#btn1 a{width: 198px;height: 49px;}
#event ul li#btn1 a:hover{background: url(../img/event_btn1_hover.gif);}
#event ul li#btn2{left: 531px;top: 0;}
#event ul li#btn2 a{width: 212px;height: 65px;}
#event ul li#btn2 a:hover{background: url(../img/event_btn2_hover.gif);}
#event ul li#btn3{left: 536px;top: 69px;}
#event ul li#btn3 a{width: 216px;height: 69px;}
#event ul li#btn3 a:hover{background: url(../img/event_btn3_hover.gif);}

#event div{
	width: 734px;
	margin-left: 18px;
	background: url(../img/event_border.gif) repeat-x left bottom;
	overflow: hidden;
	padding-bottom: 25px;
}
#event div h4{
	font-size: 14px;
	line-height: 1.6;
	color: #fe9abd;
	margin-top: 25px;
	padding: 0 10px;
}
#event div table{
	width: 734px;
	margin-top: 15px;
}
#event div table th,
#event div table td{
	font-size: 12px;
	text-align: left;
	vertical-align: middle;
}
#event div table th{
	width: 70px;
	background-position: 10px center;
	background-repeat: no-repeat;
}
#event div table th span{
	display: block;
	height: 75px;
	text-indent: -9999px;
	overflow: hidden;
}
#event div table td{
	color: #fff;
	padding: 0 20px 0 0;
}
#event div table th.photo1{background-image: url(../img/event_photo_01.jpg);}
#event div table th.photo2{background-image: url(../img/event_photo_02.jpg);}
#event div table th.photo3{background-image: url(../img/event_photo_03.jpg);}




/* Story ページ
-------------------------------------*/  
div#twilight-story div#headArea {
   height: 245px;
   }

div#twilight-story div#storyBox {
   width: 770px;
   height: 524px;
   background: url(../img/storybg.png) left top no-repeat;
   }
div#twilight-story div#storyBox h2 {
   height: 66px;
   width: 770px;
   background: url(../img/storyhead.gif) left top no-repeat;
   text-indent: -9999em;
   }
div#twilight-story div#storyBox div#cut-picts {
   width: 760px;
   padding-left: 10px;
   }
div#twilight-story div#storyBox div#cut-picts img.cut {
   width: 182px;
   height: 117px;
   margin-right: 3px;
   }
div#twilight-story div#storyBox h3 {
   width: 160px;
   height: 56px;
   text-indent: -9999em;
   background :url(../img/story.gif) left top no-repeat;
   margin-top: 0px;
   }
div#twilight-story div#storyBox p {
   padding: 0 10px 10px 10px;
   line-height: 1.4em;
   color: #FFF;
   }
*:first-child+html div#twilight-story div#storyBox p {
   font-size: 90%;
   }
* html div#twilight-story div#storyBox p {
   font-size: 90%;
   }

div#twilight-story div#official-info {
   width: 760px;
   height: 393px;
   background :url(../img/storybg.png) left bottom no-repeat;
   padding-top: 36px;
   padding-left: 10px;
   }
div#twilight-story div#official-info img {
   float: left;
   width: 359px;
   height: 269px;
   margin-right: 10px;
   }
div#twilight-story div#official-info dl dt {
   color: #ff98bc;
   }
div#twilight-story div#official-info dl dd {
   font-size: 0.75em;
   color: #fff;
   padding-right: 10px;
   }
div#twilight-story div#official-info dl dd span{
   font-size: 1.2em;
   }
div#twilight-story div#official-info dl dd a {
   color: #fff;
   }
div#twilight-story div#official-info dl dd a:hover {
   text-decoration: underline;
   }



/* form */
#cam div.error {
   margin: 0; padding: 0;

   background-color: #fffeee;
   border: 1px solid #f13486;
   padding: 10px;
   margin-bottom: 10px;

}


#cam div.cam-header {
   background-image: url(../img/main.jpg);
   background-repeat: no-repeat;
   background-position: center;
   width:626px;
   margin-bottom: 10px;
}

#cam div.cam-header h2, #cam div.cam-header p {
   font-size: 12pt;
   background-color: #ef3b8c;
   padding: 10px;
   color: #fff;
}

#cam div.cam-main {
   padding-left: 20px;
   padding-right: 20px;
   margin-bottom: 20px;
}

#cam div.cam-main dl {
}

#cam div.cam-main dl.block {
   margin-bottom: 15px;
}

#cam div.cam-main dl dt {
   font-weight: bold;
   color: #ef3b8c;
   padding: 3px;
   padding-left: 5px;
   border-bottom: 1px dashed #ef3b8c;
   margin-bottom: 10px;
}

#cam div.cam-main dl dd {
   padding-left: 10px;
   margin-bottom: 10px;
}

#cam div.cam-main ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

#cam div.cam-main ul li {
}


#cam div.btn {
   padding: 10px;
   text-align: center;
}

#cam div.btn input {
   width: 100px;
   padding: 3px;
}

#cam div.cam-notice {
   padding-left: 20px;
   padding-right: 20px;

   font-size: 8pt;
}


#cam div.message {
   width:769px;
   height:531px;
   margin-bottom:10px;
   background-image: url(../img/kusai.jpg);
   background-repeat: no-repeat;
}

#result h2{
width:768px;
height:61px;
background: url(../img/ttl-result.jpg) no-repeat;
text-indent:-10000px;
}

#result p{
width:768px;
height:56px;
background: url(../img/ttl-result2.png) no-repeat;
text-indent:-10000px;
margin:0;
padding:0;
}

#result dl dd.love,
#result dl dd.don{
float:left;
width:158px;
height:35px;
padding-left:52px;
font-size:10px;
line-height:35px;
margin-left:10px;

}

#result dl dd.love{
background: url(../img/bg-love.png) no-repeat;
}

#result dl dd.don{
background: url(../img/bg-don.png) no-repeat;
}


#result h3.ttl-first{
margin:0;
padding:0;
width:768px;
height:84px;
background: url(../img/ttl-result-1.jpg) no-repeat;
text-indent:-10000px;

}
#result img.img{
float:left;
margin-left:8px;
}

#result dl#first {
width:476px;
position:relative;
float:left;
}
#result dl#first dt{
width:476px;
height:37px;
background: url(../img/ttl-hotel.png) no-repeat;
text-indent:-10000px;
}


#result dl#first dd.btn-detail{
clear:left;
margin-bottom:10px;
}

#result dl#first dd.btn-detail a{
display:block;
width:440px;
height:88px;
margin:0 0 0 27px;
background: url(../img/btn-result1.jpg) no-repeat;
text-indent:-10000px;
}



div.second-block{
margin-top:100px;
clear:both;
}

#result h3.ttl-second{
margin:0;
padding:0;
width:768px;
height:58px;
background: url(../img/ttl-result-2.jpg) no-repeat;
text-indent:-10000px;
}
#result img.img{
float:left;
margin-left:8px;
}

#result dl#second {
width:476px;
float:left;
}

#result dl#second dd.btn-detail{
clear:left;

}

#result dl#second dd.btn-detail a{
display:block;
width:440px;
height:88px;
margin:0 0 0 27px;
background: url(../img/btn-result2.jpg) no-repeat;
text-indent:-10000px;
}



div.third-block{
clear:both;
margin-bottom:30px;
}

#result div.third-block dl dd.love,
#result div.third-block dl dd.don{
float:left;
width:130px;
height:35px;
padding-left:52px;
font-size:10px;
line-height:35px;
margin-left:5px;

}


#result h3.ttl-third{
margin:0;
padding:0;
width:768px;
height:58px;
background: url(../img/ttl-result-3.png) no-repeat;
text-indent:-10000px;
}

#result dl#third1{
width:384px;
float:left;
}

#result dl#third2{
width:384px;
float:left;
}

#result dl#third1 dt{
width:384px;
height:95px;
background: url(../img/img-result3.png) no-repeat;
text-indent:-10000px;
}

#result dl#third2 dt.pon{
width:384px;
height:95px;
background: url(../img/img-result4.jpg) no-repeat;
text-indent:-10000px;
}

#result dl#third2 dt.size{
height:30px;
line-height:35px;
margin:10px 0 5px 10px;
color:#CC3399;
font-weight:bold;
clear:both;
}


#result dl#third1 dd.btn-detail{
clear:both;
margin-bottom:30px;

}

#result dl#third1 dd.btn-detail a{
display:block;
width:353px;
height:48px;
margin:0 0 0 27px;
background: url(../img/btn-result3.jpg) no-repeat;
text-indent:-10000px;
}


#detail-first span,
#detail-second span{
font-weight:bold;
font-size:1.5em;
color:#FF3366;
}

#detail-third span{
font-weight:bold;
font-size:1.2em;
color:#FF3366;
}

div#result-detail{
font-size:12px;
}

div#result-detail #detail-third{
font-size:11px;
}


div#result-detail dt{
height:37px;
line-height:37px;
padding-left:71px;
}

div#result-detail dd{
width:95%;
margin:10px auto 20px;
line-height:1.5em;
}

#result h3.ttldetail-first{
margin:0;
padding:0;
width:768px;
height:67px;
background: url(../img/ttl-resultdetail-1.jpg) no-repeat;
text-indent:-10000px;
}
dl#detail-first dt.detail-love{
background:url(../img/detail-love.png) no-repeat #F8F3CE;
}

dl#detail-first dt.detail-don{
background:url(../img/detail-don.png) no-repeat #F8F3CE;
}



#result h3.ttldetail-second{
margin:0;
padding:0;
width:768px;
height:67px;
background: url(../img/ttl-resultdetail-2.jpg) no-repeat;
text-indent:-10000px;
}

dl#detail-second dt.detail-love{
background:url(../img/detail-love2.png) no-repeat #F7F7F7;
}

dl#detail-second dt.detail-don{
background:url(../img/detail-don2.png) no-repeat #F7F7F7;
}



#result h3.ttldetail-third{
margin:0;
padding:0;
width:768px;
height:67px;
background: url(../img/ttl-resultdetail-3.jpg) no-repeat;
text-indent:-10000px;
}

dl#detail-third dt.detail-love{
background:url(../img/detail-love3.png) no-repeat #FBF1F8;
}

dl#detail-third dt.detail-don{
background:url(../img/detail-don3.png) no-repeat #FBF1F8;
}