@charset "shift_jis";

#wrapper{
min-width:960px;
}
#bodyArea{
background-color:#fff;
background-repeat:no-repeat;
background-position:center 0;
}
#wrapper #bodyArea #contentsArea{
position:relative;
width: 960px;
}
/* ==============================

 headerArea

================================= */
#headerArea{
width: 960px;
height: 155px;
}
#headerArea h1{
left:40px;
top:15px;
}
/* Grobal Navi */
#headerArea .gNav:after{content:".";display:block;height:0;clear:both;visibility:hidden}
#headerArea .gNav{
padding: 9px 0 0 25px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_nav.png) no-repeat 0 0;
width: 656px;
height: 47px;
top:70px;
right:22px;
z-index:9;
}
#headerArea .asstNav{
top:48px;
right:40px;
z-index:10;
}

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

contents

================================= */
#contents{
position:relative;
padding-top: 150px;
}
#contents .mainTitle{
position: relative;
height: 287px;
}
#contents .mainTitle h2{
position: absolute;
top:138px;
left:370px;
}
#contents .startArea{
padding: 30px 0 0 399px;
}

/*pop*/
#pop{
position: relative;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_popup.png) no-repeat;
width: 860px;
height: 480px;
margin: 0 auto;
}
#pop a{
color: #96350f;
text-decoration: none;
}
#pop a:hover{
text-decoration: none;
}
#pop .close{
position: absolute;
right:20px;
top:18px;
padding-right: 20px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/ico_close.gif) no-repeat right top;
}
#pop h2{
padding: 14px 0 0 20px;
height: 38px;
}
#pop .movielist dd{
color:#6B3334;
font-weight:bold;
}
#pop .tabnav{
padding-left: 10px;
height: 32px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_tab.gif) repeat-x left bottom;
}
#pop .tabnav:after,#pop .mmbrlist:after{content:".";display:block;height:0;clear:both;visibility:hidden}
#pop .tabnav li{
width: 120px;
height: 30px;
line-height: 30px;
float: left;
margin-right: 1px;
text-align: center;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_tabcell.gif) no-repeat 0 0;
}
#pop .tabnav li.on{
height: 32px;
font-weight: bold;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_tabcell_on.gif) no-repeat 0 0;
}
#pop .tabnav li a{
display: block;
}
#pop .tabnav li.on a{
color: #fff;
letter-spacing:-1px;
}
#pop .popCont{
width: 750px;
_overflow:hidden;
padding: 18px 55px 0;
height: 410px;
}
/*character*/
#pop .charCont{
width: 860px;
height: 428px;
overflow: hidden;
}
#pop .charCont .tabnav{
margin: 18px 55px 0;
}
#pop .mmbrlist{
position: relative;
z-index:10;
width: 760px;
height: 59px;
overflow: hidden;
padding-top: 8px;
}
#pop .charCont .mmbrlist{
margin: 0 52px;
}
#pop .mmbrlist li{
position: relative;
margin-right: 4px;
padding: 3px;
float: left;
}
#pop .mmbrlist li span{
display: none
}
#pop .mmbrlist li .listpic{
border:1px solid #e76c4d;
}
#pop .mmbrlist .active span,
#pop .mmbrlist a:hover span{
display: block;
position: absolute;
left:0;
top:0;
}
#pop .mmbrlist li.active img{
border:none;
}
#pop .describe{
display: none;
margin-top: -70px;
padding: 70px 0 0 55px;
height: 310px;
font-size: 0;
line-height: 0;
clear:both;
}
#pop .describe dt{
padding: 23px 0 10px;
}
#pop #player01{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg01_player.png) no-repeat right bottom;
}
#pop #player02{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg02_player.png) no-repeat right bottom;
}
#pop #player03{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg03_player.png) no-repeat right bottom;
}
#pop #player04{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg04_player.png) no-repeat right bottom;
}
#pop #player05{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg05_player.png) no-repeat right bottom;
}
#pop #npc01{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg01_npc.png) no-repeat right bottom;
}
#pop #npc02{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg02_npc.png) no-repeat right bottom;
}
#pop #npc03{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg03_npc.png) no-repeat right bottom;
}
#pop #npc04{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg04_npc.png) no-repeat right bottom;
}
#pop #npc05{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg05_npc.png) no-repeat right bottom;
}
#pop #npc06{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg06_npc.png) no-repeat right bottom;
}
#pop #npc07{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg07_npc.png) no-repeat right bottom;
}
#pop #npc08{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg08_npc.png) no-repeat right bottom;
}
#pop #npc09{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg09_npc.png) no-repeat right bottom;
}
#pop #npc10{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg10_npc.png) no-repeat right bottom;
}

/*introduction*/
#pop .leftinfo{
float: left;
width: 360px;
font-size: 0;
line-height: 0;
}
#pop .leftinfo dt{
margin:14px 0 15px; 
}
#pop .rightpic{
position: relative;
float: left;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_img_intro.gif) no-repeat 0 0;
width: 390px;
height: 290px;
text-align: center;
padding-top: 5px;
}
#pop .rightpic span{
position: absolute;
bottom:5px;
left:5px;
display: block;
width: 370px;
height: 46px;
padding: 14px 0 0 10px;
text-align: left;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_imginfo_intro.png) no-repeat 0 0;
}
#pop .rightpic span em{
display: block;
margin-top: -8px;
font-style:normal;
}
#pop .introlist{
clear: both;
padding-top: 15px;
zoom:1;
}
#pop .introlist:after{content:".";display:block;height:0;clear:both;visibility:hidden}
#pop .introlist li{
float: left;
margin-right:47px;
}
#pop .introlist li.last{
margin-right: 0;
}
#pop .introlist dt{
line-height: 0;
font-size: 0;
margin-bottom: 5px;
}
#pop .introlist dt img{
border:1px solid #e76c4d;
}
#pop .introlist dd{
color: #96350f;
text-align: center;
}
#pop .rollbtn{
position: absolute;
top:216px;
left:-29px;
width: 918px;
height: 58px;
}
#pop .rollbtn .prev{
float: left;
}
#pop .rollbtn .next{
float: right;
}
#pop .rollbtn .prev img{
_width: 0px;
_padding-left:58px;
_height:58px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://images.hange.jp/hangame/easy/chocotto/special/r01/btn_prev_pop.png", sizingMethod="crop");
}
#pop .rollbtn .prev a:hover img,
#pop .rollbtn .prev a:active img,
#pop .rollbtn .prev a:focus img{
_width: 0px;
_padding-left:58px;
_height:58px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://images.hange.jp/hangame/easy/chocotto/special/r01/btn_prev_pop_on.png", sizingMethod="crop");
}
#pop .rollbtn .next img{
_width: 0px;
_padding-left:58px;
_height:58px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://images.hange.jp/hangame/easy/chocotto/special/r01/btn_next_pop.png", sizingMethod="crop");
}
#pop .rollbtn .next a:hover img,
#pop .rollbtn .next a:active img,
#pop .rollbtn .next a:focus img{
_width: 0px;
_padding-left:58px;
_height:58px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://images.hange.jp/hangame/easy/chocotto/special/r01/btn_next_pop_on.png", sizingMethod="crop");
}
#pop #intro02{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_intro02.png) no-repeat right bottom;
}
#pop .maininfo p{
padding-top: 35px
}
#pop .allinfo{
display: none;
margin-top: 30px;
}
#pop #tab01 #info01,
#pop #tab02 #info02,
#pop #tab03 #info03,
#pop #tab04 #info04,
#pop #tab05 #info05,
#pop #tab06 #info06{
display: block
}
/*flow*/
#pop .videolist{
position: relative;
z-index:10;
}
#pop .videolist:after{content:".";display:block;height:0;clear:both;visibility:hidden}
#pop .videolist li{
float: left;
}
#pop .videolist h3{
text-align: center;
}
#pop .videolist .video{
width: 360px;
height: 271px;
padding: 5px 0 0 5px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_video.gif) no-repeat 0 0;
}
#pop .videolist .cont{
margin: 11px 0 0 5px;
}
#pop .videolist .leftvideo{
margin-right: 20px;
}
/*movie*/
.movielist{
zoom:1;
margin: 0 20px;
height: 340px;
}
.movielist:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.movielist li{
float: left;
text-align: center;
padding-bottom: 16px;
}
.movielist .mid{
margin: 0 82px;
}
.movielist li dt{
margin-bottom: 6px;
}
.movielist li dt img{
border:1px solid #e76c4d;
}
.movielist li dd a{
font-weight: bold;
color: #6b3334;
}
/*screenshot*/
.screenCont{
padding: 0 55px;
width: 750px;
height: 418px;
overflow:hidden;
}
.screenshow{
display:none;
margin: 0 auto;
width: 455px;
padding: 5px;
height: 340px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_screen.gif) no-repeat 0 0;
}
/* ==============================

pageNavi 

================================= */
ul.pageNavi {
margin: 10px 0 15px 100px;
text-align: center;
zoom:1
}
ul.pageNavi:after{content:".";display:block;height:0;clear:both;visibility:hidden}
ul.pageNavi li {
float: left;
width: 28px;
height: 20px;
margin-right: 5px;
line-height: 20px;
border:1px solid #debc84;
font-size: 11px;
font-family: verdana;
}
ul.pageNavi li.now {
border:none;
color: #3a7613;
font-weight: bold;
}
ul.pageNavi li.none {
border:none;
}
ul.pageNavi li.first, ul.pageNavi li.prev,  ul.pageNavi li.next, ul.pageNavi li.last {
margin-top: 2px;
width: auto;
border:none;
color: #aea48e;
font-family: 'Hiragino Kaku Gothic Pro','‚l‚r ‚oƒSƒVƒbƒN',sans-serif;
font-size: 12px;
}
ul.pageNavi li.first, ul.pageNavi li.prev {
}
ul.pageNavi li.next, ul.pageNavi li.last {
}
ul.pageNavi li.first{
padding-left:12px;
margin-right: 10px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_first_page_gray.gif) no-repeat left center;
}
ul.pageNavi li.prev {
padding-left:8px;
margin-right: 10px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_prev_page_gray.gif) no-repeat left center;
}
ul.pageNavi li.next {
padding-right:8px;
margin-left: 10px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_next_page_gray.gif) no-repeat right center;
}
ul.pageNavi li.last {
padding-right:12px;
margin-left: 10px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_last_page_gray.gif) no-repeat right center;
}
ul.pageNavi li a {
display: block;
color: #96350f;
}
ul.pageNavi li.first a {
padding-left:12px;
margin-left: -12px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_first_page.gif) no-repeat left center;
}
ul.pageNavi li.prev a {
padding-left:8px;
margin-left: -8px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_prev_page.gif) no-repeat left center;
}
ul.pageNavi li.next a {
padding-right:8px;
margin-right: -8px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_next_page.gif) no-repeat right center;
}
ul.pageNavi li.last a {
padding-right:12px;
margin-right: -12px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_last_page.gif) no-repeat right center;
}
/* ==============================

howto

================================= */
#contentsArea dl#howto{
top:658px;
left:40px;
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_howto.png) no-repeat 0 0;
}
#contentsArea dl#howto dt.howtoHead{
height: 22px;
margin-top: 6px;
}
#contentsArea dl#howto dd.stFlow ul li{
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/ico_arrow.gif) no-repeat right center;
}

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

footerArea

================================= */
#footerArea div.rcmmndSys ul{
border-top: #e7e7e7 1px solid;
}
#footerArea div.copyrightAndNav ul li a{
color: #333;
}
#footerArea div.rcmmndSys ul li,#footerArea div.rcmmndSys ul li a{
color: #aaa;
}
/* ==============================

sdjs_layer_f

================================= */
.sdjs_title {
color: #FFFFFF;
font-size: 14px;
height: 20px;
margin-top: 8px;
padding-left: 20px;
white-space: nowrap;
}
#sdjs_layer_f {
position: relative;
background: none repeat scroll 0 0 #000000;
height: 535px;
width: 650px;
}
#sdjs_layer_f2 {
background: none repeat scroll 0 0 #000000;
height: 860px;
width: 940px;
}
#sdjs_layer_f #sdjs_movie {
height: 525px;
width: 650px;
}
#sdjs_layer_f2 #sdjs_movie {
height: 860px;
width: 940px;
}
#sdjs_layer_f .sdjs_close, #sdjs_layer_f2 .sdjs_close {
color: #E85A00;
cursor: pointer;
font-size: 11px;
margin-right: 10px;
text-align: right;
}
#sdjs_layer_f #sdjs_layClose, #sdjs_layer_f2 #sdjs_layClose {
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/btn_close.gif) no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 24px;
position: absolute;
right: 5px;
text-indent: -9999px;
top: 4px;
width: 24px;
z-index: 99998;
}
#sdjs_mask {
background-color: #000000;
height: 1000px;
opacity: 0.7;
}
/* ==============================

spArea

================================= */
.spArea .spCtsArea .hgtSet {
height: 570px;
overflow:hidden;
}
.spArea .spCtsArea .spcaHeadArea {
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_schead.png) no-repeat scroll center top transparent;
}
.spArea .spCtsArea .spcaBtm {
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_ctsbtm.png) no-repeat scroll left bottom transparent;
}
.spArea .spCtsArea .spcaTop {
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_ctstop.gif) no-repeat scroll left top transparent;
}
.spArea .spCtsArea .spcaRep {
background: url(https://images.hange.jp/hangame/easy/chocotto/special/r01/bg_ctsrpt.gif) repeat-y scroll left bottom transparent;
}
.spArea .ico3step03set img {
left: 476px;
}
*html #iRegistArrow img{
width:auto;
height:auto;
padding-left:0;
filter:progid:none;
}
.spArea .spCtsArea .spcaRep{
_padding-top:10px;
}
.spArea .spCtsArea .itlItlOdr .ctsItlOdr .ctsScroll .section{
border-bottom: none;
}
/* ==110921== */
#contents .buttonArea{
position:absolute;
right:37px;
bottom:-20px;
}
#contents .buttonArea ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}
#contents .buttonArea li{
float:left;
font-size:0px;
}
#wrapper #bodyArea #contentsArea .buttonArea{
position:absolute;
right:37px;
bottom:-20px;
}
#wrapper #bodyArea #contentsArea ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}
#wrapper #bodyArea #contentsArea .buttonArea li{
float:left;
font-size:0px;
}
#wrapper #bodyArea #contentsArea .buttonArea li:first-child{
	margin-top:11px;
}

/* balloonLayerActiveX */
.balloonLayerActiveX {
position: absolute;
right: 212px;
top: 450px;
width: 183px;
height: 113px;
background: url('//images.hangame.co.jp/hangame/extra/gamestarter/bg_balloon.png') no-repeat 0 0;
z-index: 999;
overflow: hidden;
}
.balloonLayerActiveX a {
display: block;
font-size: 0px;
text-indent: -9999px;
width:91px;
height: 29px;
margin: 67px 0 0 51px;
}