@charset "Shift_JIS";
/* ==================================================================
CSS information
style info :「虹の」ページ用
================================================================== */


/* --------------------------------------------------------
#container
-------------------------------------------------------- */
#container { }

/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { overflow: visible; width: 100%; }



.boxBase { width: 100%; height: auto; position: relative;}

#areaMain {}
#areaA { }
#areaB { }
#areaC { }
#areaD { }
#areaE { }

#areaMain .repeatBg { background: url(../_img/pc/rainbow/area-main_bg_re.jpg) top center repeat-x; }
#areaA .repeatBg { background: url(../_img/pc/rainbow/area-a_bg_re.jpg) top center repeat-x; }
#areaB .repeatBg { background: url(../_img/pc/rainbow/area-b_bg_re.jpg) top center repeat-x; }
#areaC .repeatBg { background: url(../_img/pc/rainbow/area-c_bg_re.jpg) top center repeat-x; }
#areaD .repeatBg { background: url(../_img/pc/rainbow/area-d_bg_re.jpg) top center repeat-x; }
#areaE .repeatBg { background: url(../_img/pc/rainbow/area-e_bg_re.jpg) top center repeat-x; }

#areaMain .repeatBg .boxBg { background: url(../_img/pc/rainbow/area-main_bg_re2.jpg) bottom center repeat-x; height:729px;}

#areaMain .repeatBg .boxBg2 { background: url(../_img/pc/rainbow/area-main_bg_pic.jpg) top center no-repeat; height:665px;}

#areaA .repeatBg .boxBg { background: url(../_img/pc/rainbow/area-a_bg_re2.jpg) top center repeat-x; height:1011px;}
#areaB .repeatBg .boxBg { background: url(../_img/pc/rainbow/area-b_bg_re.jpg) top center repeat-x; height:681px;}

#areaC .repeatBg .boxBg { background: url(../_img/pc/rainbow/area-c_bg_pic.jpg) top center no-repeat; height:789px; padding-top:60px;}
#areaD .repeatBg .boxBg { background: url(../_img/pc/rainbow/area-d_bg_pic.jpg) top center no-repeat; height:570px;}

#areaE .repeatBg .boxBg { background: url(../_img/pc/rainbow/area-e_bg_pic.jpg) top center no-repeat; height:193px;}


/* --------------------------------------------------------
#mainvisual
-------------------------------------------------------- */
#mainvisual { width:960px; height:729px; position: relative; margin:0 auto; text-align:left; z-index:3000; padding-top:39px; }

#ttl { position:relative; top:0px; left:28px; width:559px; height:107px; margin-bottom:16px; z-index:200; }
#ttl img { position: absolute;}

#cha01 { position: absolute;}
#cha01 img { position: absolute;}
#cha01 { top: 0px; left: 423px;}


.readtext { margin-left: 28px; margin-bottom:27px;}
.btn_story { margin-left: 31px; position:relative;}
.btn_story img { position:absolute;}


#chara-slide { position: absolute; bottom: 90px; left: 0; width: 100%; z-index:1; }
#chara-slide ul { position: relative; width: 1758px; }
#chara-slide ul li { float: left; padding:0 5px; }



/* --------------------------------------------------------
#freeBox
-------------------------------------------------------- */
#freeBox { width:960px; height:auto; position: relative; margin:0 auto; text-align:left; }

#freeBox .ttl_s { position:relative; top:-24px; left:25px; margin-bottom:-24px; width:701px; height:141px; }
#freeBox .ttl_s img { position: absolute;}

#freeBox .readtext { position:relative; top:-6px; left:97px; width:484px; height:18px; margin-bottom:38px; }
#freeBox .readtext img { position: absolute;}


.flashBlock { width:840px; height:530px; margin:0 auto; position:relative;}
.flashBlock .playbtn { position:absolute; top:0; left:0;}

#btnBlock { position:relative; margin-left:67px; margin-top:-110px; height:396px;}
#btnBlock li { position:absolute; }
#btnBlock li a { position:relative; vertical-align:top; display:block; }

#btnBlock .btn1 { top:0; left:0;}
#btnBlock .btn2 { top:0; left:456px;}

#btnBlock .btn { position: absolute; z-index:1;}
#btnBlock .btncha { position: absolute; z-index:2; display:block;}
#btnBlock .btncha img { position: absolute; }
#btnBlock .btntext { position: relative; z-index:3;}

#btnBlock .btn1 .btncha { top:275px; left:-21px; }
#btnBlock .btn1 .btntext { top:239px; left:49px; }

#btnBlock .btn2 .btncha { top:66px; left:-25px; }
#btnBlock .btn2 .btntext { top:33px; left:52px; }




/* --------------------------------------------------------
#rainbowlineBox
-------------------------------------------------------- */
#rainbowlineBox { width:960px; height:auto; position: relative; margin:0 auto; text-align:left; }

#rainbowlineBox .ttl_s { position: absolute; top:478px; left:21px; width:385px; height:160px; }
#rainbowlineBox .ttl_s img { position: absolute;}

#rainbowObj { position: absolute; top:-27px; left:-40px;}
#rainbowObj img { position: absolute;}


#btnBlock-rainbow { position:relative; margin-left:391px; padding-top:45px; }
#btnBlock-rainbow li { position: relative; margin-bottom:8px; }
#btnBlock-rainbow li a { position:relative; vertical-align:top; display:block; }

#btnBlock-rainbow .btn { position: relative; z-index:1;}
#btnBlock-rainbow .btntext { position: absolute; z-index:3;}

#btnBlock-rainbow .btn1 .btntext { top:33px; left:339px; }
#btnBlock-rainbow .btn2 .btntext { top:27px; left:40px; }
#btnBlock-rainbow .btn3 .btntext { top:25px; left:372px; }




/* --------------------------------------------------------
#worldBox
-------------------------------------------------------- */
#worldBox { width:960px; height:auto; position: relative; margin:0 auto; text-align:left; }

#worldObj { position: absolute; top:0px; left:236px; z-index:100;}
#worldObj img { position: absolute;}

#worldBox .ttl_s { position:absolute; top:318px; left:281px; width:402px; height:187px; z-index:201; }
#worldBox .ttl_s img { position: absolute;}

#listBlock-world { position:relative; z-index:1; }
#listBlock-world li { position:absolute; }
#listBlock-world li img { position:absolute; }

#listBlock-world .list1 { top:0; left:68px;}
#listBlock-world .list2 { top:200px; left:8px;}
#listBlock-world .list3 { top:401px; left:18px;}
#listBlock-world .list4 { top:520px; left:330px;}
#listBlock-world .list5 { top:401px; left:642px;}
#listBlock-world .list6 { top:200px; left:652px;}
#listBlock-world .list7 { top:0px; left:592px;}




/* --------------------------------------------------------
#transformBox
-------------------------------------------------------- */
#transformBox { width:960px; height:auto; position: relative; margin:0 auto; text-align:left; padding-top:45px; }


#transformBox .ttl_s { position:relative; margin-left:19px; margin-bottom:21px; width:486px; height:115px; }
#transformBox .ttl_s img { position: absolute;}

#transformBox .readtext { position:relative; margin-left:39px; margin-bottom:16px; width:414px; height:48px; }
#transformBox .readtext img { position: absolute;}

#btnBlock-transform { position:relative; margin-left:21px; height:300px;}
#btnBlock-transform li { position:absolute; }
#btnBlock-transform li a { position:relative; vertical-align:top; display:block; }

#btnBlock-transform .btn1 { top:0; left:0;}
#btnBlock-transform .btn2 { top:0; left:314px;}
#btnBlock-transform .btn3 { top:0; left:626px;}

#btnBlock-transform .btn { position: absolute; z-index:1;}
#btnBlock-transform .btncha { position: absolute; z-index:2; display:block;}
#btnBlock-transform .btncha img { position: absolute; }
#btnBlock-transform .btntext { position: relative; z-index:3;}

#btnBlock-transform .btn1 .btncha { top:167px; left:137px; }
#btnBlock-transform .btn1 .btntext { top:198px; left:7px; }

#btnBlock-transform .btn2 .btncha { top:-26px; left:160px; }
#btnBlock-transform .btn2 .btntext { top:38px; left:0px; }

#btnBlock-transform .btn3 .btncha { top:157px; left:152px; }
#btnBlock-transform .btn3 .btntext { top:198px; left:5px; }



/* --------------------------------------------------------
#collectBox
-------------------------------------------------------- */
#collectBox { width:960px; height:auto; position: relative; margin:0 auto; text-align:center; padding-top:25px; }