/* READ ME ============================================ - Font-size Adjustment(YUI3 Font CSS) For pixels (px) / Declare this percent (%) px / % ------- 10 77 11 85 12 93 13 100 14 108 15 116 16 123.1 17 131 18 138.5 19 146.5 20 153.9 21 161.6 22 167 23 174 24 182 25 189 26 197 - zindex ┣[3] #footer ┣[2] #contents ┣[1] #header ┣[0] #background */ /* base ============================================ */ body,html { color: #fff; height: 100%; width: 100%; min-width: 980px; } .evening { background: url(/rabitobi_pc/img/bg-evening_repeat.jpg) #5E639A repeat left top; } .night { background: url(/rabitobi_pc/img/bg-night_repeat.jpg) #1E3EAB repeat left top; } .day { background: url(/rabitobi_pc/img/bg-day_repeat.jpg) #03596A repeat left top; } #wrapper { min-height: 1100px; min-width: 980px; position: relative; height: 100%; width: 100%; } .evening #wrapper { background: url(/rabitobi_pc/img/bg-evening_top.jpg) no-repeat center top; } .night #wrapper { background: url(/rabitobi_pc/img/bg-night_top.jpg) no-repeat center top; } .day #wrapper { background: url(/rabitobi_pc/img/bg-day_top.jpg) no-repeat center top; } a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; } strong { font-weight: bold; } img { vertical-align: bottom; } input[type="text"]:focus, textarea:focus { outline: 0; } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: block; overflow: hidden; } .clearfix:after { clear: both; } .center{ text-align: center; } .catch{ font-size: 167%; text-align: center; margin: 20px auto; } /* background ============================================ */ #background { position: absolute; top:0; left: 0; height: 100%; width: 100%; min-width: 980px; z-index: 0; overflow: hidden; } #background #js-rabbits { width: 980px; margin: 0 auto; position: relative; } #background #js-rabbits .rabbit { width: 180px; height: 210px; position: absolute; background: url(/rabitobi_pc/img/bg-rabbit_00.png) no-repeat left top; } #background #js-rabbits .rabbit.left { left:-30px; } #background #js-rabbits .rabbit.right { right:-30px; } #background #js-rabbits .rabbit.pose01 { background-image: url(/rabitobi_pc/img/bg-rabbit_01.png); } #background #js-rabbits .rabbit.pose02 { background-image: url(/rabitobi_pc/img/bg-rabbit_02.png); } #background #js-rabbits .rabbit.pose03 { background-image: url(/rabitobi_pc/img/bg-rabbit_03.png); } #background #js-rabbits .rabbit.pose04 { background-image: url(/rabitobi_pc/img/bg-rabbit_04.png); } /* header ============================================ */ #header { width: 703px; height: 543px; margin: 0 auto; position: relative; z-index: 1; } #header h1 { position: absolute; left: 113px; top:83px; } #header p.soon { position: absolute; left: 250px; top:330px; } #header nav { position: absolute; top:443px; left: 0; width: 100%; } #header ul.navi{ width: 520px; margin: 0 auto; } #header ul.navi li{ float: left; margin-left: 5px; } #header ul.navi li:first-child{ margin-left: 0; } /*naiv 4 #header nav { position: absolute; top:443px; left: 90px; } #header ul.navi li{ float: left; margin-left: 5px; } */ #header ul.navi li:first-child{ margin-left: 0; } #header p { position: absolute; top:15px; left: -149px; } #header ul.sns { position: absolute; top:26px; right: -144px; } #header ul.sns li { float: left; margin-left: 13px; } #header_wallpaper { width: 703px; height: 400px; margin: 0 auto; position: relative; z-index: 1; } #header_wallpaper h1 { position: absolute; left: 113px; top:83px; } #header_wallpaper p.soon { position: absolute; left: 250px; top:330px; } #header_wallpaper nav { position: absolute; top:443px; left: 0; } #header_wallpaper ul.navi li{ float: left; margin-left: 5px; } #header_wallpaper ul.navi li:first-child{ margin-left: 0; } /*naiv 4 #header nav { position: absolute; top:443px; left: 90px; } #header ul.navi li{ float: left; margin-left: 5px; } */ #header_wallpaper ul.navi li:first-child{ margin-left: 0; } #header_wallpaper p { position: absolute; top:15px; left: -149px; } #header_wallpaper ul.sns { position: absolute; top:26px; right: -144px; } #header_wallpaper ul.sns li { float: left; margin-left: 13px; } /* default bg setting ============================================ */ #top,#how2play,#rabbit,#news{ background: url(/rabitobi_pc/img/bg-day_repeat.jpg); } #privacy,#about{ background: url(/rabitobi_pc/img/bg-evening_repeat.jpg); } #contact{ background: url(/rabitobi_pc/img/bg-night_repeat.jpg); } /* contents ============================================ */ #contents { position: relative; z-index: 2; } #privacy #contents, #environment #contents, #about #contents { width: 740px; margin: 0 auto; padding-bottom: 100px; } #top #contents, #news #contents, #rabbit #contents, #how2play #contents, #faq #contents { width: 740px; margin: 0 auto; padding-bottom: 65px; } /* common */ #contents .pagetitle { height: 125px; text-align: center; } #contents .sns { text-align: center; margin-top: 120px; } #contents .sns a+a { margin-left: 24px; } /* top */ #top #contents .book { margin: 0 auto 50px auto; text-align: center; position: relative; width: 640px; height: 170px; } #top #contents .book img.book01{ position: absolute; bottom: 15px; left: 42px; z-index: 3; } #top #contents .book img.book02{ position: absolute; bottom: 15px; right: 42px; z-index: 2; } #top #contents .book img.book03{ position: absolute; bottom: 0; right: 0; z-index: 1; } #top #contents .movie { margin: 0 auto; text-align: center; } #top #contents .store { text-align: center; margin-top: 40px; } #top #contents .store a+a { margin-left: 34px; } #top #contents .store img.soon_app{ padding: 0 34px 0 0; } #top #contents h2 { margin-top: 87px; } #top #contents .top_news { width: 590px; margin: 16px auto 0; word-break: break-all; } #top #contents .top_news li { font-size: 93%; line-height: 150%; margin-top: 20px; } #top #contents .top_news li:first-child { margin-top: 0; } #top #contents .top_news li .date{ width: 80px; float: left; display: block; } #top #contents .top_news li .text{ width: 510px; float: right; display: block; } #top #contents .top_news li a { text-decoration: none; border-bottom: 1px dotted #999; } #top #contents .top_news li a:hover { border-bottom: 1px solid #999; } #top #contents .contact { margin-top: 90px; text-align: center; } #top #contents .sns { margin-top: 90px; } #top #contents p.banner{ margin: 30px auto 0px auto; text-align: center; } #top #contents p.banner_cap{ width: 640px; margin: 10px auto 40px auto; text-align: left; font-size: 93%; } #top #contents p.banner2{ margin: 30px auto 30px auto; text-align: center; } #top #contents p.banner3{ margin: 60px auto 0px auto; text-align: center; } #top #contents p.spec{ margin: 50px 0px 10px 80px; } /* news */ #news #contents section { border-bottom: 2px solid #fff; padding:0px 0px 58px 0px; word-break: break-all; } #news #contents section+section { margin-top: 60px; } #news #contents section h3, #news #contents section p { font-size: 108%; line-height: 157%; } #news #contents section p { margin-top: 30px; } #news #contents section .meta { font-weight: bold; margin-top: 0; line-height: 100%; } #news #contents section .meta .tag { margin-left: 15px; } #news #contents section .meta img { vertical-align: top; } #news #contents section h3 { font-weight: bold; margin-top: 20px; } #news #contents section .img { text-align: center; } #news #contents section p a { text-decoration: none; border-bottom: 1px dotted #999; } #news #contents section p a:hover { border-bottom: 1px solid #999; } #news #contents .pager { position: relative; text-align: center; padding-top: 10px; line-height: 100%; font-size: 93%; } #news #contents .pager a { display: inline-block; } #news #contents .pager .prev { position: absolute; left: 0; } #news #contents .pager .next { position: absolute; right: 0; } /* rabbit */ #rabbit #contents p { text-align: center; } #rabbit #contents p + p { margin-top: 47px; } #rabbit #contents p.img + p { margin-top: 60px; } #rabbit #contents .sns { margin-top: 120px; } #rabbit #contents p.img span{ display: block; font-size: 138.5%; padding: 10px 0 0 0; } /* how2play */ #how2play #contents p+p { margin-top: 77px; } #how2play #contents p.overflow img { margin-right: -10px; } /* privacy & about */ #privacy #contents h3, #privacy #contents p, #about #contents h3, #about #contents p { font-size: 108%; line-height: 157%; } #privacy #contents h3, #about #contents h3 { font-weight: bold; } #privacy #contents h3 + p, #about #contents h3 + p { margin-top: 30px; } #privacy #contents p + h3, #about #contents p + h3 { margin-top: 50px; } /* contact */ #contact #contents { width: 760px; margin: 0 auto; padding-bottom: 80px; } #contact #contents > p{ padding: 0 10px; font-size: 108%; line-height: 157%; } #contact #contents > *+p{ margin-top: 30px; } #contact #contents > ol { list-style: decimal; margin-top: 30px; margin-left: 30px; } #contact #contents > ol li { margin-top: 30px; font-size: 108%; line-height: 157%; } #contact #contents > ol li:first-child { margin-top: 0; } #contact #contents .box { width: 760px; background: url(/rabitobi_pc/img/bg-contact_form_bdy.png) repeat-y left top; position: relative; margin-top: 35px; } #contact #contents .box:before, #contact #contents .box:after { position: absolute; content:""; display: block; width: 760px; height: 10px; background: url(/rabitobi_pc/img/bg-contact_form_top.png) no-repeat left top; } #contact #contents .box:before{ top:-10px; background: url(/rabitobi_pc/img/bg-contact_form_top.png) no-repeat left top; } #contact #contents .box:after { bottom:-10px; background: url(/rabitobi_pc/img/bg-contact_form_btm.png) no-repeat left top; } #contact #contents dl { padding: 20px 30px 0; } #contact #contents dl dt { font-size: 108%; font-weight: bold; margin-top: 40px; } #contact #contents dl dt:first-child { margin-top: 0; } #contact #contents dl dd { font-size: 93%; margin-top: 8px; color: #fff; } #contact #contents dl dd input, #contact #contents dl dd textarea { width: 680px; height:25px; padding:5px 10px; border-width:0; border-style:none; background:url(/rabitobi_pc/img/bg-contact_form_input.png) no-repeat left top; color: #fff; } #contact #contents dl dd textarea { height: 125px; line-height: 25px; background: url(/rabitobi_pc/img/bg-contact_form_textarea.png) no-repeat left top; overflow: auto; } #contact #contents .custom-selectbox { position: relative; background: url(/rabitobi_pc/img/bg-contact_form_select.png) no-repeat left top; } #contact #contents .custom-selectbox select { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 36px; line-height: 36px; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-appearance: menulist-button; cursor: pointer; } #contact #contents .custom-selectbox .inner { position: relative; z-index: 0; padding: 0 22px 0 10px; width: 100%; height: 36px; font-size: 14px; line-height: 36px; } #contact #contents p.btn { text-align: center; margin-top: 40px; padding-bottom: 20px; } #contact #contents p.btn a+a { margin-left: 30px; } #contact #contents .require { font-size: 85%; color: #ff8c8c; margin-left: 10px; } #contact #contents .example { margin-top: 8px; color: #d5dac2; line-height: 157%; display: block; } #contact #contents .notice { margin-top: 8px; color: #ff8c8c; line-height: 157%; display: block; } #contact .error_wrap{ padding: 20px 0 0px 0; } #contact .error_box{ border: #ff8c8c 2px solid; width: 700px; margin: 0px auto; border-radius: 5px; /* CSS3草案 */ -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } #contact .error_box ul{ margin: 10px 10px; } #contact .error_box ul li{ color: #ff8c8c ; margin-bottom: 5px; } /* environment */ #environment #contents h3, #environment #contents p, #about #contents h3, #about #contents p { font-size: 108%; line-height: 157%; } #environment #contents h3{ font-weight: bold; font-size: 197%; clear: both; } #environment #contents h3 + p,{ margin-top: 30px; } #environment #contents p + h3{ margin-top: 50px; } #environment #contents table{ width: 340px; border-spacing: 5px !important; } #environment #contents table.odd{ width: 340px; float: left; margin: 10px 0 20px 0; } #environment #contents table.even{ width: 340px; float: right; margin: 10px 0 20px 0; } #environment #contents table th.th1{ width: 264px; background: #fff; color: #035469; text-align: center; padding: 5px 0; font-weight: bold; } #environment #contents table th.th2{ width: 72px; background: #fff; color: #035469; text-align: center; padding: 5px 0; font-weight: bold; border-left: 3px solid #035368; } #environment #contents table td{ padding: 10px 0; text-indent: 10px; vertical-align: middle; } /* faq */ #faq #contents section { padding:0px 0px 28px 0px; word-break: break-all; } #faq #contents section dl dt{ background: url(/rabitobi_pc/img/icn_q.png) no-repeat 0 0px; padding: 0 0 0 50px; line-height: 1.9em; font-size: 138.5%; min-height: 50px; font-weight: bold; } #faq #contents section dl dd{ background: url(/rabitobi_pc/img/icn_a.png) no-repeat 0 0px; padding: 0 0 0 50px; line-height: 1.9em; font-size: 123.1%; min-height: 50px; font-weight: normal; } #faq #contents section+section { margin-top: 60px; } #faq #contents section h3, #faq #contents section p { font-size: 108%; line-height: 157%; } #faq #contents section p { margin-top: 30px; } #faq #contents section .meta { font-weight: bold; margin-top: 0; line-height: 100%; } #faq #contents section .meta .tag { margin-left: 15px; } #faq #contents section .meta img { vertical-align: top; } #faq #contents section h3 { font-weight: bold; margin-top: 20px; } #faq #contents section .img { text-align: center; } #faq #contents section p a { text-decoration: none; border-bottom: 1px dotted #999; } #faq #contents section p a:hover { border-bottom: 1px solid #999; } #faq #contents .pager2{ margin: 20px 0 240px 250px; width: auto; text-align: center; } #faq #contents .pager2 li{ float: left; width: 40px; height: 40px; color: #035469; background: url(/rabitobi_pc/img/pager_off.png) no-repeat center center; font-size: 138.5%; text-align: center; padding: 12px 0 0 0; margin: 0 3px; } #faq #contents .pager2 li a:link, #faq #contents .pager2 li a:visited{ color: #035469; } #faq #contents .pager2 li.on{ color: #FFF; background: url(/rabitobi_pc/img/pager_on.png) no-repeat center center; } #faq #contents .pager2 li.allow{ color: #FFF; background: none; } #faq #contents .pager2 li.allow a:link, #faq #contents .pager2 li.allow a:visited{ color: #FFF; } #faq #contents .contact { margin-top: 40px; text-align: center; } #faq #contents a.links{ text-decoration: none; border-bottom: 1px dotted #999; } .pl_lyst{ list-style-type: disc; padding: 10px 0 10px 15px ; } .pl_lyst li{ margin: 0 0 10px 0; } .pl_lyst2{ list-style-type:decimal; padding: 10px 0 10px 15px ; } .pl_lyst2 li{ margin: 0 0 10px 0; } .pl_lyst li ol{ list-style: decimal; padding: 10px 0 10px 35px ; } /* mini game ============================================ */ #mini_game{ margin: auto; width: 340px; height: 500px; /*border: 3px solid #fff;*/ position: relative; } /* wallpaper ============================================ */ #wallpaper { position: relative; text-align: center; } #wallpaper .wpsize{ margin:25px 0 45px; } #wallpaper .wpsize li{ display:inline; margin:0 10px; background-color:#000; width: 148px; padding: 11px 28px; } #wallpaper .devicetitle{ font-size: 182%; font-weight: bold; width: 560px; margin: 5px auto 11px; border-bottom: 2px solid; text-align: center; } #wallpaper .ib{ display: inline-block; margin-left: 10px; } /* footer ============================================ */ #footer { position: relative; width: 950px; margin: 0 auto; padding: 8px 7px 50px; background: url(/rabitobi_pc/img/footer-bg-border.png) repeat-x left top; z-index: 3; } #footer p { float: left; width: 50%; font-size: 93%; } #footer ul { float: right; width: 50%; font-size: 77%; text-align: right; } #footer ul li { display: inline; padding-left: 9px; margin-left: 9px; background: url(/rabitobi_pc/img/footer-bg-border_menu.png) no-repeat left center; } #footer ul li:first-child { background: none; } /* Javascript & Flash============================================ */ #js-landscape { display: none; min-width: 980px; min-height: 1100px; background-repeat: repeat; background-position: left top; position: absolute; height: 100%; width: 100%; overflow: hidden; padding-bottom: 250px;/* parallaxでずれる分*/ } #js-landscape img { position: absolute; left: 50%; margin-left: -960px; filter: inherit; display: block; } #js-flash { position: absolute; left:50%; top:0; padding-top: 274px; padding-left:273px; width: 260px; height: 100%; position: absolute; display: block; padding-bottom: 250px;/* parallaxでずれる分*/ }