public/stylesheets/front/common.css

   1 @charset "utf-8";\r
   2 /*------reset------*/\r
   3 body, div, h1, h2, h3, h4, h5, h6,\r
   4 p, brockquote, pre, address,\r
   5 ul, ol, li, dl, dt, dd,\r
   6 table, th, td,\r
   7 form, fieldset {\r
   8   margin: 0;\r
   9   padding: 0;\r
  10   line-height:1;\r
  11   font-size:100%;\r
  12   font-style:normal;\r
  13   font-weight:normal;\r
  14 }\r
  15 \r
  16 img {\r
  17   border: 0;\r
  18 }\r
  19 \r
  20 .clearfix:after {\r
  21   content: ".";\r
  22   display: block;\r
  23   clear: both;\r
  24   height: 0;\r
  25   font-size: 0;\r
  26   visibility: hidden;\r
  27 }\r
  28 .clearfix { display: inline-block; }\r
  29 .clearfix { display: block; }\r
  30 \r
  31 .clear { clear: both; }\r
  32 \r
  33 html {\r
  34   height: 100%;\r
  35   overflow-y: scroll;\r
  36 }\r
  37 \r
  38 li { list-style-type: none; }\r
  39 textarea { font-size: 100%; }\r
  40 \r
  41 /*------link color------*/\r
  42 a {\r
  43   text-decoration: none;\r
  44   font-weight: normal;\r
  45 }\r
  46 a:link { color: #990066; }\r
  47 a:visited { color: #990066; }\r
  48 a:hover {\r
  49   color: #ff0066;\r
  50   text-decoration: underline;\r
  51 }\r
  52 a:active { color: #ff0066; }\r
  53 \r
  54 /*-------------margin------------*/\r
  55 .m_top {\r
  56  margin-top: 10px;\r
  57 }\r
  58 \r
  59 .m_btm {\r
  60  margin-bottom: 10px;\r
  61 }\r
  62 \r
  63 .m_left {\r
  64  margin-left: 10px;\r
  65 }\r
  66 \r
  67 /*-------------text-align------------*/\r
  68 .txt_c {\r
  69  text-align: center;\r
  70 }\r
  71 \r
  72 .txt_r {\r
  73   text-align: right;\r
  74 }\r
  75 \r
  76 /*---------------all--------------*/\r
  77 body {\r
  78   width: 100%;\r
  79   height: 100%;\r
  80   background: url("../../images/common/body_bg.gif") repeat-x;\r
  81   font-family: Verdana, Osaka, "ＭＳ Ｐゴシック","MS PGothic", Sans-serif;\r
  82   font-size: 75%;\r
  83 }\r
  84 \r
  85 html>/**/body {\r
  86   font-size: 12px;\r
  87 }\r
  88 \r
  89 #wrapper {\r
  90   width: 970px;\r
  91   height: 100%;\r
  92   background-color: #ffffff;\r
  93   border-right: 1px solid #a7a696;\r
  94   border-left: 1px solid #a7a696;\r
  95   margin: 0 auto;\r
  96   padding: 10px 10px 88px;\r
  97 }\r
  98 \r
  99 body > #wrapper {\r
 100   height: auto;\r
 101   min-height: 100%;\r
 102 }\r
 103 \r
 104 #container {\r
 105   width: 955px;\r
 106   background: #ffffff url("../../images/common/container_bg.gif") repeat-y left 0;\r
 107   margin-left: 5px;\r
 108   padding: 0 10px 10px 0;\r
 109 }\r
 110 \r
 111 /*-----------header-----------*/\r
 112 #header {\r
 113   width: 970px;\r
 114   height: 70px;\r
 115   margin-bottom: 10px;\r
 116   background: url("../../images/common/header_bg.jpg") no-repeat;\r
 117 }\r
 118 \r
 119 #header h1 {\r
 120   width: 160px;\r
 121   float: left;\r
 122   padding: 20px 0 0 30px;\r
 123 }\r
 124 \r
 125 #store_desc {\r
 126   float: left;\r
 127   width: 500px;\r
 128   height: 70px;\r
 129   position: relative;\r
 130 }\r
 131 \r
 132 #store_desc span {\r
 133   padding: 2px 0 14px 0;\r
 134   position: absolute;\r
 135   bottom: 0;\r
 136 }\r
 137 \r
 138 #my_menubox {\r
 139   float: right;\r
 140   width: 238px;\r
 141   height: 55px;\r
 142   padding-top: 15px;\r
 143 }\r
 144 \r
 145 #my_menubox p {\r
 146   height: 14px;\r
 147 }\r
 148 \r
 149 #log {\r
 150   margin-left: 20px;\r
 151 }\r
 152 \r
 153 #my_menu {\r
 154   float: right;\r
 155   margin-top: 5px;\r
 156 }\r
 157 \r
 158 #my_menu li {\r
 159   float: left;\r
 160   margin-right: 15px;\r
 161 }\r
 162 \r
 163 /*------column------*/\r
 164 #left_box {\r
 165   float: left;\r
 166   width: 745px;\r
 167   padding-left: 5px;\r
 168 }\r
 169 \r
 170 #l_sub {\r
 171   float: left;\r
 172   width: 200px;\r
 173 }\r
 174 \r
 175 #main {\r
 176   float: left;\r
 177   width: 530px;\r
 178   margin: 0 0 0 10px;\r
 179 }\r
 180 \r
 181 #r_sub {\r
 182   float: right;\r
 183   width: 200px;\r
 184 }\r
 185 \r
 186 /*-----------side-column-----------*/\r
 187 #bread_list li {\r
 188   display: inline;\r
 189   padding-left: 20px;\r
 190   background: url("../../images/common/gt.gif") no-repeat 6px center;\r
 191 }\r
 192 \r
 193 #bread_list li.bread_top {\r
 194   background-image: none;\r
 195   background-image: url();\r
 196   margin-left: -20px;\r
 197 }\r
 198 .main_t {\r
 199   width: 485px;\r
 200   height: 43px;\r
 201   margin-bottom:  10px;\r
 202   padding-left: 45px;\r
 203   font-size: 130%;\r
 204   font-weight: bold;\r
 205   background: url(../../images/common/title_bg.gif) no-repeat;\r
 206   line-height: 43px;\r
 207 }\r
 208 \r
 209 /*------left side column------*/\r
 210 .side_box {\r
 211   background: url("../../images/common/side_bg_mid.gif") repeat-y;\r
 212 }\r
 213 \r
 214 #h3_t {\r
 215   margin-top: 10px;\r
 216   width: 200px;\r
 217   height: 32px;\r
 218 }\r
 219 \r
 220 #h3_category {\r
 221   margin-top: 10px;\r
 222   width: 200px;\r
 223   height: 32px;\r
 224 }\r
 225 \r
 226 #h3_info {\r
 227   margin-top: 10px;\r
 228   width: 200px;\r
 229   height: 32px;\r
 230 }\r
 231 \r
 232 .banner li {\r
 233   margin-top: 10px;\r
 234 }\r
 235 \r
 236 .side_hr {\r
 237   height: 2px;\r
 238   margin-bottom: 7px;\r
 239   border: 0 none;\r
 240   background: url("../../images/common/side_hr.gif") no-repeat;\r
 241 }\r
 242 \r
 243 .side_hr hr {\r
 244   display: none;\r
 245 }\r
 246 \r
 247 /*------search items (under layer)------*/\r
 248 #category_list li img {\r
 249   vertical-align: top;\r
 250 }\r
 251 \r
 252 .search_box {\r
 253   width: 120px;\r
 254   height: 20px;\r
 255   margin: 10px 0 5px 10px;\r
 256   border: 1px solid #999999;\r
 257   vertical-align: bottom;\r
 258 }\r
 259 \r
 260 .search_btn {\r
 261   vertical-align: bottom;\r
 262   margin: 5px 0 6px 3px;\r
 263 }\r
 264 \r
 265 \r
 266 /*---category list---*/\r
 267 #category_list_box {\r
 268   background: url("../../images/common/side_bg_mid.gif") repeat-y;\r
 269   padding: 10px 10px 5px;\r
 270 }\r
 271 \r
 272 .category_list_s li {\r
 273   margin: 0 0 5px 10px;\r
 274 }\r
 275 \r
 276 /*------right side column------*/\r
 277 .side_box_r {\r
 278   background: url("../../images/common/side_bg_mid.gif") repeat-y;\r
 279   padding: 6px 10px;\r
 280 }\r
 281 \r
 282 #category_list li img {\r
 283   vertical-align: top;\r
 284 }\r
 285 \r
 286 #login_box {\r
 287   width: 176px;\r
 288   padding: 10px 12px;\r
 289 }\r
 290 \r
 291 /*------log in form------*/\r
 292 .login_t {\r
 293   margin-bottom: 5px;\r
 294   padding-left: 6px;\r
 295   border-left: 3px solid #fbaf5d;\r
 296 }\r
 297 \r
 298 .login_form {\r
 299   margin-bottom: 7px;\r
 300   border: 1px solid #999999;\r
 301   width: 172px;\r
 302   height: 20px;\r
 303 }\r
 304 \r
 305 .login_btn {\r
 306   width: 77px;\r
 307   margin: 0 50px 7px;\r
 308 }\r
 309 \r
 310 #remind {\r
 311   background: url("../../images/common/list_pink.gif") no-repeat;\r
 312   margin-bottom: 5px;\r
 313   padding-left: 14px;\r
 314 }\r
 315 \r
 316 /*--------cart--------*/\r
 317 #cart_box img {\r
 318   display: block;\r
 319   width: 143px;\r
 320   margin: 0 auto;\r
 321 }\r
 322 \r
 323 #cart_info {\r
 324   width: 143px;\r
 325   margin: 5px auto;\r
 326   padding: 3px 0;\r
 327   background-color: #ffffff;\r
 328   text-align: center;\r
 329 }\r
 330 \r
 331 /*----------information----------*/\r
 332 #info_box li {\r
 333   padding: 3px 0 3px 15px;\r
 334   background: url("../../images/common/list_pink.gif") no-repeat 0 6px;\r
 335   line-height: 120%;\r
 336 }\r
 337 \r
 338 /*----kuchikomi ranking-----*/\r
 339 #kuchikomi_box {\r
 340   background: url("../../images/common/side_bg_mid.gif") repeat-y;\r
 341   padding: 0 10px 6px;\r
 342 }\r
 343 \r
 344 #kuchikomi_box li {\r
 345   background: url("../../images/common/side_hr.gif") no-repeat 0 bottom;\r
 346   padding: 5px 0;\r
 347 }\r
 348 \r
 349 .kuchi_img {\r
 350   display: inline-block;\r
 351   display: -moz-inline-box;\r
 352   vertical-align: middle;\r
 353   width: 37px;\r
 354   height: 36px;\r
 355 }\r
 356 \r
 357 .kuchi_t {\r
 358   display: inline-block;\r
 359   display: -moz-inline-box;\r
 360   vertical-align: middle;\r
 361   width: 130px;\r
 362 }\r
 363 \r
 364 * html .kuchi_img,\r
 365 * html .kuchi_t {\r
 366   display: inline;\r
 367   zoom: 1;\r
 368 }\r
 369 \r
 370 *:first-child+html .kuchi_img,\r
 371 *:first-child+html .kuchi_t {\r
 372   display: inline;\r
 373   zoom: 1;\r
 374 }\r
 375 \r
 376 #kuchikomi_box p {\r
 377   width: 141px;\r
 378   line-height: 110%;\r
 379   padding-bottom: 2px;\r
 380 }\r
 381 \r
 382 #kuchikomi_box p.kuchi_txt {\r
 383   width: 178px;\r
 384 }\r
 385 \r
 386 /*--category ranking (under layer)--*/\r
 387 #h3_t_rank {\r
 388   width: 200px;\r
 389   height: 22px;\r
 390   margin-top: 10px;\r
 391   padding-top: 15px;\r
 392   text-align: center;\r
 393   font-weight: bold;\r
 394   font-size: 110%;\r
 395   background: url("../../images/common/rank_t_bg.gif") no-repeat;\r
 396 }\r
 397 \r
 398 /*----recentry checked----*/\r
 399 \r
 400 #check_box li {\r
 401   width: 150px;\r
 402   margin: 5px auto;\r
 403 }\r
 404 \r
 405 #check_box li img {\r
 406   display: block;\r
 407   width: 90px;\r
 408   margin: 0 auto 5px;\r
 409   border: 1px solid #aaaaaa;\r
 410 }\r
 411 \r
 412 #check_box dd {\r
 413   text-align: right;\r
 414 }\r
 415 \r
 416 /*--------table--------*/\r
 417 .tb_t {\r
 418   width: 505px;\r
 419   margin-bottom: 5px;\r
 420   padding: 3px 0 3px 6px;\r
 421   border-left: 4px solid #ff9775;\r
 422   font-size: 120%;\r
 423   clear: both;\r
 424 }\r
 425 \r
 426 .tb_desc {\r
 427   padding: 5px 0;\r
 428   line-height: 120%;\r
 429 }\r
 430 \r
 431 .tb1,.tb2 {\r
 432   width: 715px;\r
 433   margin-bottom: 15px;\r
 434   border-collapse: collapse;\r
 435   border-spacing: 0;\r
 436   border: 1px solid #999999;\r
 437 }\r
 438 \r
 439 .tb1 th {\r
 440   padding: 6px;\r
 441   border: 1px solid #999999;\r
 442   background-color: #fdc2c9;\r
 443   vertical-align: middle;\r
 444   text-align: center;\r
 445 }\r
 446 \r
 447 .tb2 th {\r
 448   padding: 6px;\r
 449   border: 1px solid #999999;\r
 450   background-color: #fdc2c9;\r
 451   vertical-align: middle;\r
 452   text-align: left;\r
 453 }\r
 454 \r
 455 .tb1 td,\r
 456 .tb2 td {\r
 457   padding: 6px;\r
 458   background-color: #ffffff;\r
 459   border: 1px solid #999999;\r
 460   vertical-align: middle;\r
 461 }\r
 462 \r
 463 .cntr {\r
 464   text-align: center;\r
 465 }\r
 466 \r
 467 .t_left {\r
 468   text-align: left;\r
 469 }\r
 470 \r
 471 .t_right {\r
 472   text-align: right;\r
 473   border: 0;\r
 474 }\r
 475 \r
 476 .my_btn {\r
 477   width: 101px;\r
 478   margin: 0 auto;\r
 479 }\r
 480 \r
 481 .my_btn2 {\r
 482   width: 230px;\r
 483   margin: 0 auto;\r
 484 }\r
 485 \r
 486 .my_btn2 img {\r
 487   margin: 0 7px;\r
 488   float: left;\r
 489 }\r
 490 \r
 491 /*----------footer----------*/\r
 492 #footer {\r
 493   position: relative;\r
 494   width: 970px;\r
 495   height: 88px;\r
 496   margin: -88px auto 0;\r
 497   background: url("../../images/common/footer_bg.gif");\r
 498 }\r
 499 \r
 500 #foot_l {\r
 501   float: left;\r
 502   width: 840px;\r
 503   margin-left: 20px;\r
 504   display: table-cell;\r
 505   position: absolute;\r
 506   top: 37%;\r
 507   left: 20px;\r
 508 }\r
 509 \r
 510 #foot_list li {\r
 511   float: left;\r
 512   padding: 1px 7px 0;\r
 513   border-left: 1px solid #aaaaaa;\r
 514 }\r
 515 \r
 516 #foot_list .last {\r
 517   border-right: 1px solid #aaaaaa;\r
 518 }\r
 519 \r
 520 #foot_r {\r
 521   float: right;\r
 522   position: absolute;\r
 523   top: 37%;\r
 524   left: 860px;\r
 525 }\r
 526 \r
 527 #footer address {\r
 528   font-size: 80%;\r
 529   color: #666666;\r
 530   margin-top: 5px;\r
 531 }\r
 532 \r
 533 #foot_list a:link { color: #666666; }\r
 534 #foot_list a:visited { color: #666666; }\r
 535 \r
 536 .pnt {\r
 537   color: #cc3300;\r
 538   font-weight: normal;\r
 539 }\r
 540 \r
 541 #entry .my_btn input,\r
 542 #entry .my_btn2 input,\r
 543 #mypage_main .my_btn input,\r
 544 #mypage_main .my_btn2 input {\r
 545 border:  none;\r
 546 }\r