@charset "UTF-8";

/* Top */
body#top #title-box { width: 383px; float: left; }
body#top #title-box #page_title { margin-bottom: 12px; }
body#top #title-img { width: 466px; float: right; }

#map { position: relative; width: 613px; height: 813px; margin-bottom: 5px; }
#map-contents { position: relative; z-index: 5; }
#map-contents h2 { position: absolute; top: 8px; left: 146px; }
#map #bg-map { position: absolute; left: 0; top: 0; z-index: 1; }

.pos { position: absolute; }

#calocon-series { width: 336px; background: url(../images/top_bg_map_series.png) no-repeat left top; padding: 5px 0 8px; top: 114px; left: 252px; }
#calocon-series h3 { margin-bottom: 10px; text-align: center; }
#calocon-series ul { margin-left: 5px; }
#calocon-series li { float: left; display: inline; margin-right: 4px; }

#calocon_sundae a { width: 116px; height: 128px; }
#calocon_sundae a:hover img { top: -128px; }
#calocon_monaka a { width: 95px; height: 127px; }
#calocon_monaka a:hover img { top: -127px; }
#calocon_cup a { width: 107px; height: 125px; }
#calocon_cup a:hover img { top: -125px; }

#strawberry { top: 71px; left: 70px; }
#strawberry a.on { width: 80px; height: 95px; }
#strawberry a.on:hover img { top: -95px; }

#apple { top: 104px; left: 158px; }
#apple a.on { width: 83px; height: 99px; }
#apple a.on:hover img { top: -99px; }

#senbei { top: 180px; left: 70px; }
#senbei a.on { width: 95px; height: 104px; }
#senbei a.on:hover img { top: -104px; }

#pudding { top: 287px; left: 140px; }
#pudding a.on { width: 95px; height: 106px; }
#pudding a.on:hover img { top: -106px; }

#float { top: 283px; left: 314px; }
#float a.on { width: 101px; height: 109px; }
#float a.on:hover img { top: -109px; }

#pudding { top: 287px; left: 140px; }
#pudding a.on { width: 95px; height: 106px; }
#pudding a.on:hover img { top: -106px; }

#shake { top: 365px; left: 230px; }
#shake a.on { width: 80px; height: 129px; }
#shake a.on:hover img { top: -129px; }

#lactice { top: 415px; left: 485px; }
#ice { top: 511px; left: 476px; }

#cake { top: 518px; left: 102px; }
#cake a.on { width: 133px; height: 114px; }
#cake a.on:hover img { top: -114px; }

#fruitparfait { top: 523px; left: 286px; }
#fruitparfait a.on { width: 130px; height: 114px; }
#fruitparfait a.on:hover img { top: -114px; }

#chocolate { top: 643px; left: 381px; }
#chocolate a.on { width: 107px; height: 116px; }
#chocolate a.on:hover img { top: -116px; }

#hotcake { top: 662px; left: 188px; }
#hotcake a.on { width: 146px; height: 120px; }
#hotcake a.on:hover img { top: -120px; }

.popup { display: none; }
.popup-contents { width: 347px; height: 290px; padding: 4px 0 0 18px; background: url(../images/bg_popup.png) no-repeat left top; }
.popup-contents h4 { width: 163px; float: left; }
.popup-contents a.close { float: right; display: inline; margin: 16px 18px 0 0; }
.popup-contents p { clear: both; width: 306px; height: 196px; margin-right: 0; overflow-y: auto; padding: 10px; background: #fff; border: 1px solid #e7e7e7; }


/* Story */
body#story #title-box { width: 306px; float: left; display: inline; margin-bottom: 3px; }
body#story #title-box #page_title { margin-bottom: 12px; }
body#story #title-img { width: 265px; float: right; display: inline; margin-bottom: 3px; margin-right: 20px; }

#navi_story { clear: both; margin-bottom: 15px; }
#navi_story li { float: left; display: inline; margin-right: 6px; position: relative; width: 148px; height: 62px; overflow: hidden; }
#navi_story li img { border: solid 0px white; }
#navi_story li a:hover, #navi_story li a:hover img { border: solid 0px gray; }
#navi_story01 img { position: absolute; top: 0; left: 0; }
#navi_story01 a:hover img { top: -62px; }
#navi_story02 img { position: absolute; top: 0; left: -148px; }
#navi_story02 a:hover img { top: -62px; }
#navi_story03 img { position: absolute; top: 0; left: -296px; }
#navi_story03 a:hover img { top: -62px; }
#navi_story04 img { position: absolute; top: 0; left: -444px; }
#navi_story04 a:hover img { top: -62px; }
#navi_story li#navi_story04 { margin-right: 0; }

p.voice_comment { background: url(../images/bg_dott.png) repeat-x left top; padding-top: 15px; }

.story_type01 { background: url(../images/bg_episode01.png) repeat-x left top; padding-top: 5px; padding-bottom:35px; }
.story_type02 { background: url(../images/bg_episode02.png) repeat-x left top; padding-top: 5px; padding-bottom:35px; }
.voice { padding: 14px 15px 6px; }
.voice li { min-height: 55px; _height:55px; }
.voice li.voice_right01 { background: url(../images/story_icn_voice_right01.png) no-repeat right top; }
.voice li.voice_left01 { background: url(../images/story_icn_voice_left01.png) no-repeat left top; }
.voice li.voice_right02 { background: url(../images/story_icn_voice_right02.png) no-repeat right top; }
.voice li.voice_left02 { background: url(../images/story_icn_voice_left02.png) no-repeat left top; }
.voice li.voice_left03 { background: url(../images/story_icn_voice_left03.png) no-repeat left top; }
.voice p { width: 405px; padding: 12px 20px; margin: 0 auto 14px; }
.voice p strong { color: #e7316e; }
.story_type01 .voice p { background: #ffe8f0; }
.story_type02 .voice p { background: #f3e7e0; }


/* Lifestyle */
body#lifestyle #title-box { width: 435px; float: left; display: inline; margin-bottom: 3px; }
body#lifestyle #title-box #page_title { margin-bottom: 12px; }

#navi_lf { width: 450px; margin-bottom: 8px; float: right;  }
#navi_lf li { float: left; display: inline; margin-right: 7px; margin-bottom: 8px; position: relative; width: 145px; height: 62px; overflow: hidden; }
#navi_lf li img { border: solid 0px white; }
#navi_lf li a:hover, #navi_lf li a:hover img { border: solid 0px gray; }
#navi_lf01 img { position: absolute; top: 0; left: 0; }
#navi_lf01 a:hover img { top: -62px; }
#navi_lf02 img { position: absolute; top: 0; left: -145px; }
#navi_lf02 a:hover img { top: -62px; }
#navi_lf03 img { position: absolute; top: 0; left: -290px; }
#navi_lf03 a:hover img { top: -62px; }
#navi_lf04 img { position: absolute; top: 0; left: -435px; }
#navi_lf04 a:hover img { top: -62px; }
#navi_lf05 img { position: absolute; top: 0; left: -580px; }
#navi_lf05 a:hover img { top: -62px; }
#navi_lf li#navi_lf03 { margin-right: 0; }

body#lifestyle .story_type01,
body#lifestyle .story_type02 { padding-bottom: 15px; }

body#lifestyle .story_type01 h2,
body#lifestyle .story_type02 h2 { width: 570px; float: left; display: inline;}
body#lifestyle .story_type01 p,
body#lifestyle .story_type02 p { width: 570px; float: left; padding-top: 20px; }
body#lifestyle .story_type01 .story_img,
body#lifestyle .story_type02 .story_img { width: 172px; float: right; display: inline; margin-right: 70px; padding-top: 10px; }
body#lifestyle .story_type01 p.voice_comment,
body#lifestyle .story_type02 p.voice_comment { margin-top: 20px; }


/* Dev */
body#dev #title-box { width: 476px; float: left; display: inline; margin-bottom: 3px; }
body#dev #title-box #page_title { margin-bottom: 12px; }
body#dev #title { margin-bottom: 15px; padding-bottom: 5px; background: url(../images/bg_episode01.png) repeat-x left bottom; position: relative; height: 175px; }
body#dev #title-img { position: absolute; top: -24px; left: 480px; }

#dev_story_list li { line-height: 26px; margin-bottom: 10px; }

#dev_story_list li span { display: block; float: left; position: relative; width: 115px; height: 26px; overflow: hidden; margin-right: 10px; }
#dev_story_list li span img { border: solid 0px white; }
#dev_story_list li a:hover, #dev_story_list li a:hover img { border: solid 0px gray; }
#dl01 span img { position: absolute; top: 0; left: 0; }
#dl01 a:hover span img { top: -26px; }
#dl02 span img { position: absolute; top: 0; left: -115px; }
#dl02 a:hover span img { top: -26px; }
#dl03 span img { position: absolute; top: 0; left: -230px; }
#dl03 a:hover span img { top: -26px; }
#dl04 span img { position: absolute; top: 0; left: -345px; }
#dl04 a:hover span img { top: -26px; }
#dl05 span img { position: absolute; top: 0; left: -460px; }
#dl05 a:hover span img { top: -26px; }
#dl06 span img { position: absolute; top: 0; left: -575px; }
#dl06 a:hover span img { top: -26px; }
#dl07 span img { position: absolute; top: 0; left: -690px; }
#dl07 a:hover span img { top: -26px; }
#dl08 span img { position: absolute; top: 0; left: -805px; }
#dl08 a:hover span img { top: -26px; }

#dev_story_list li a { padding-right: 15px; background: url(../images/icn_arrow_off.png) no-repeat right top; }
#dev_story_list li a:hover { background: url(../images/icn_arrow_on.png) no-repeat right top; }

#dev .section { padding-top: 15px; margin-top: 30px; background: url(../images/bg_dott.png) repeat-x left top; }
#dev .first-section { padding-top: 0; background: none; }
#dev .section h2 { color: #25adf3; font-size: 1.231em; margin-bottom: 15px; }