@charset "utf-8"; /* Site Name: Description: レイアウト Version: Author: */ /* ==================================================== ■ Function ==================================================== */ .position_absolute(@left:0px,@top:0px,@z-index:1){ position: absolute; left: @left; top: @top; z-index: @z-index; display: block; } .position_fixed(@left:0px,@top:0px,@z-index:1){ position: fixed; left: @left; top: @top; z-index: @z-index; display: block; } .rounded_corners (@radius: 8px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .transform_scale(@scale:1){ -webkit-transform: scale(@scale); -moz-transform: scale(@scale); -o-transform:scale(@scale); transform:scale(@scale); } .transition(@time:0.2s){ -webkit-transition: all @time ease; -moz-transition: all @time ease; -o-transition: all @time ease; transition: all @time ease; } .box_shadow(@x:0,@y:0,@blur:8px,@opacity:0.8){ box-shadow: @x @y @blur rgba(0, 0, 0, @opacity); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @opacity); -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @opacity); } .text_shadow(@x:1px,@y:1px,@blur:1px,@color:#FFFFFF){ text-shadow: @x @y @blur @color; } /* ==================================================== ■ all ==================================================== */ html,body { margin: 0 auto; width: 100%; height: 100%; } body.whitebg{ } body.yellowbg{ background: #f5eb17; } #bodywrapper{ width: 100%; height: 100%; } /* ==================================================== ■ header ==================================================== */ header{ width: 100%; background: #FFFFFF; .inner{ width: 320px; margin: 0 auto; position: relative; height: 70px; h1{ .position_absolute(10px,5px,1); } .btn_return_home{ .position_absolute(240px,20px,1); } } } .gnavi{ width: 100%; height: 33px; background: url(../img/assets/gnavi_bg.png); background-size:100% 33px; ul{ width: 320px; margin: 0 auto; li{ float: left; background: url(../img/assets/gnavi_border.png) no-repeat right top; background-size: 1px 33px; color: #FFFFFF; font-size: 14px; font-weight : bold; padding-top: 9px; padding-left: 14px; width: 300px; height: 24px; display: block; text-decoration: none; .text_shadow(1px,1px,1px,#79ab13); } li.even{ background:none; } } } /* ==================================================== ■ pagetop_container ==================================================== */ .pagetop_container{ background: url(../img/assets/line1.png) no-repeat center top; a { display: block; text-align: center; width: 100%; padding-top: 12px; height: 24px; } } .btn_return_blue{ padding-bottom: 20px; width: 193px; margin: 0 auto; display: block; } .bnr1_container{ padding-top: 5px; display: block; margin: 0 auto; width: 297px; } /* ==================================================== ■ footer ==================================================== */ footer{ background: #FFFFFF; .footerlinklist{ width: 300px; margin: 0 auto; padding-top: 6px; li{ background: url(../img/assets/arrow2.png) no-repeat 0px 7px; background-size: 3px 5px; padding-left: 7px; a{ line-height: 100%; font-size: 11px; color: #666666; } } } .copyright{ padding-top: 10px; width: 300px; margin: 0 auto; } }