/* ========================================================= 　reset ========================================================= */ html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input { margin: 0; padding: 0; } ol, ul { list-style: none; } fieldset, img { border: none; } table { border-collapse: collapse; border-spacing: 0; } td { padding: 0; } /* ========================================================= 　body ========================================================= */ body { font: 12px/20px "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", osaka, Arial, Verdana, sans-serif; color: #555; background: url(../image/bg_head.gif) repeat-x 0 0 #B6D646 } #main { background: #FFF; } a:link, a:visited { color: #666633; text-decoration: none; } a:active, a:hover { color: #666633; text-decoration: underline; } /* ========================================================= 　head ========================================================= */ #head { width: 950px; margin: 44px auto 33px auto; } #head span { display: none; } #head h1 { width: 181px; height: 50px; background: url(../image/logo.gif) no-repeat; float: left; } #head h1 a { width: 181px; height: 50px; display: block; } /* head menu */ #head ul { margin: 3px 0; float: right; } #head li { margin: 10px 0; padding: 0 30px; border-left: 1px solid #CCC; font-weight: bold; float: left; } /* head login */ #head .login { width: 45px; height: 44px; margin: 0; padding: 0; background: url(../image/btn_login.gif) no-repeat; border: 0; } #head .login a { width: 45px; height: 44px; display: block; background: url(../image/btn_login.gif) no-repeat; } #head .login span { display: none; } #head .login a:link, #head .login a:visited { background-position: 0 0; } #head .login a:active, #head .login a:hover { background-position: 0 -44px; } /* ========================================================= 　foot ========================================================= */ #foot { height: 110px; background: url(../image/bg_foot.gif) repeat-x center top; } #foot .fcon { width: 950px; margin: 0 auto; padding-top: 25px; color: #FFF; text-align: left; } /* ========================================================= 　contents ========================================================= */ #con { width: 950px; margin: 0 auto 10px auto; } #con #left { width: 191px; float: left; } /* side contents */ #left .stit { width: 170px; padding: 5px; background: #009EE0; color: #FFF; font-weight: bold; } #left .scon { width: 160px; padding: 10px; background: #F2F2F2; } /* search */ #left input.text { width: 126px; height: 18px; border: 1px solid #CCC; } #left input.search { width: 28px; height: 20px; margin-left: 5px; border: 1px solid #D6CDAF; background: #BBA560; font-size: 10px; color: #FFF; cursor: pointer; } #left input.search:hover { border: 1px solid #BBA560; background: #FFF; color: #BBA560; } /* side menu */ #left li { padding-left: 15px; background: url(../image/icn_leaf.gif) no-repeat left 7px; } #con #right { width: 740px; float: right; } /* list */ #right #libox { padding: 25px; background: #DFDFDF; } #right #libox li { width: 228px; border-right: 2px solid #DFDFDF; background: #FFF; float: left; } #right #libox a { padding: 20px 18px; background: #FFF; display: block; } #right #libox a:hover { background: #F1F1F1; text-decoration: none; } #right #libox p { text-align: center; } #right #libox .name { padding-left: 12px; background: url(../image/icn_name.gif) no-repeat left 4px; font-weight: bold; } /* detail */ #de_left { width: 270px; float: left; } #de_right { width: 440px; float: right; } #de_right .item { margin-top: 20px; padding: 5px; background: #F2F2EA; } #de_right .obox { margin-top: 40px; padding: 10px; background: #F2F2F2; border: 1px solid #DDD; } /* ========================================================= 　toppage ========================================================= */ #img_top { width: 950px; height: 108px; margin: 0 auto; padding-top: 292px; background: url(../image/bg_top.jpg); } #img_top ul { width: 393px; height: 65px; margin-right: 30px; background: url(../image/btn_plan.gif) no-repeat; float: right; } #img_top li, #img_top a { width:113px; height: 65px; } #img_top li span { display: none; } #img_top li { margin-right: 18px; float: left; } #img_top a { display: block; background: url(../image/btn_plan.gif); } #img_top #btn1 a:link, #img_top #btn1 a:visited { background-position: 0 0; } #img_top #btn1 a:active, #img_top #btn1 a:hover { background-position: 0 0; } #img_top #btn2 a:link, #img_top #btn2 a:visited { background-position: -131px 0; } #img_top #btn2 a:active, #img_top #btn2 a:hover { background-position: -131px 0; } #img_top #btn3 a:link, #img_top #btn3 a:visited { background-position: -262px 0; } #img_top #btn3 a:active, #img_top #btn3 a:hover { background-position: -262px 0; } /* ========================================================= 　plan ========================================================= */ #psize { width: 740px; height: 139px; margin: 30px 0 30px 0; background: url(../plan/image/btn_plan.gif); } #psize span { display: none; } #psize li, #psize a { width: 240px; height: 139px; } #psize li { float: left; } #psize #ptn1 { margin-right: 10px; } #psize #ptn2 { margin-right: 10px; } #psize a { display: block; background: url(../plan/image/btn_plan.gif); } #psize #ptn1 a:link, #psize #ptn1 a:visited { background-position: 0 0; } #psize #ptn1 a:active, #psize #ptn1 a:hover { background-position: 0 0; } #psize #ptn2 a:link, #psize #ptn2 a:visited { background-position: -250px 0; } #psize #ptn2 a:active, #psize #ptn2 a:hover { background-position: -250px 0; } #psize #ptn3 a:link, #psize #ptn3 a:visited { background-position: -500px 0; } #psize #ptn3 a:active, #psize #ptn3 a:hover { background-position: -500px 0; } /* plan list */ .plist { padding: 0 10px; } .plist li { padding-left: 12px; background: url(../image/icn_name.gif) no-repeat left 5px; } /* plan image */ .pimg { padding: 25px; background: #DFDFDF; } .pimg li { height: 100px; margin: 6px; border: 1px solid #CCC; float: left; } /* ========================================================= 　class set ========================================================= */ .cl { clear: both; } .pan { margin: 5px 0 10px 0; font-size: 11px; } .pan a:link, .pan a:visited { color: #0099CC; text-decoration: none; } .pan a:active, .pan a:hover { color: #0099CC; text-decoration: underline; } .tit { padding: 5px; background: #009EE0; color: #FFF; font-weight: bold; } .ptop { width: 950px; margin: 40px auto 0 auto; padding-bottom: 10px; text-align: right; } .de_name { font-size: 18px; margin-bottom: 20px; font-weight: bold; } .de_sname { color: #999; font-weight: bold; } .price { font-size: 16px; font-weight: bold; } .small { font-size: 11px; } .white_s { font-size: 10px; color: #FFF; } .white { color: #FFF; } .white_b { font-size: 16px; color: #FFF; } /* ========================================================= 　tease set ========================================================= */ #btn_ent a { width: 660px; height: 120px; display: block; background: url(/image/bn-shop2.gif) no-repeat; text-indent:-9999px; margin: 30px auto; } #btn_ent a:link, #btn_ent a:visited { background-position: 0 0; } #btn_ent a:active, #btn_ent a:hover { background-position: 0 -120px; }