/* ************************************************ * all * ************************************************ */ * { margin: 0px; padding: 0px; } html { height: 100%; overflow: auto; } body { color: #666; font-size: 12px; font-family: 'Open Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', Sans-serif; background: url(https://img.shop-pro.jp/tmpl_img/56/bg.png) fixed; text-align:center; overflow-x: hidden; position: relative; min-width: 1000px; } a { outline: none; color: #333; } a:visited { text-decoration: underline; } a:hover { color: #3579bf; text-decoration: underline; } br.clear { clear: both; font: 0pt/0pt sans-serif; line-height: 0; } hr { margin: 10px 0; border: 0; clear: left; } img { border: none; vertical-align: middle; } img.new_mark_img1 { margin-right: 5px !important; } img.new_mark_img2 { margin-left: 5px !important; } .sold_out { color: #FF0000; } /* ************************************************ * layout * ************************************************ */ /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:930px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; clear:left; background: url(https://img15.shop-pro.jp/PA01087/883/etc/header_bg.jpg?20140207165111); margin: 0 -500%; /* ネガティブマージンを追記 */ padding: 0 500%; / margin-bottom: 5px; border-bottom: 5px solid #c11c20; } /*サイド*/ #side { float: left; width: 200px; } /*メイン*/ #main { float: right; width: 701px; } /*フッター(コピーライト)*/ #footer { background: url(https://img15.shop-pro.jp/PA01087/883/etc/header_bg.jpg?20140207165111); margin: 0 -500%; /* ネガティブマージンを追記 */ padding: 0 500%; width:100%; clear:both; color: #ffffff; text-align: center; border-top: 5px solid #c11c20; } /* ************************************************ * header * ************************************************ */ #header div.header_link { float: right; margin-top: 25px; margin-bottom: 25px; } #header div.header_link ul { } #header div.header_link ul li { list-style-type: none; float: left; margin-left: 20px; line-height: 16px; } #header div.header_link ul li i { width: 16px; height: 16px; display: block; float: left; margin-right: 5px; } #header div.header_link ul li a { text-decoration: none; color: #ffffff; } #header div.header_link ul li.my_account { } #header div.header_link ul li.my_account i.account { background: url(https://img.shop-pro.jp/tmpl_img/56/glyphicons.png) -343px -108px; } #header div.header_link ul li.view_cart { } #header div.header_link ul li.view_cart i.cart { background: url(https://img.shop-pro.jp/tmpl_img/56/glyphicons.png) -415px -204px; } #header div.header_link ul li.view_cart span.count { background: #ff3355; color: #fff; font-weight: bolder; padding: 5px 10px; margin-left: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #header div.search { float: left; margin-top: 25px; margin-bottom: 25px; } #header div.search a { color: #ffffff; } #header h1.logo { clear: both; display: block; margin: 0; padding: 0; } #header h1.logo a { text-decoration: none; } #header h1.logo img { max-width: 100%; } #header p { clear: both; text-align: center; width: 100%; margin: 0; padding: 0; } /* ************************************************ * footer * ************************************************ */ #footer a { color: #ffffff; text-decoration: none; } #footer ul.footer_menu { margin: 20px 0px 20px; } #footer ul.footer_menu li { display: inline; margin: 0 5px; } /* ************************************************ * main * ************************************************ */ #main div.box { clear: both; margin-bottom: 40px; } #main div.box h3 { margin-bottom: 20px; font-size: 20px; } /* ************************************************ * item_box * ************************************************ */ .item_box { width: 152px; margin: 0 0 20px 20px; text-align: center; display:inline-block; /display:inline; /zoom:1; vertical-align:top; } .item_box .item_photo { margin: 0px; } .item_box .item_photo img.item { max-width: 100%; } .item_box .item_detail { margin: 10px; } .item_box .item_detail p.item_name { font-size: 15px; margin-bottom: 10px; } .item_box .item_detail p.item_regular_price { margin-bottom: 10px; } .item_box .item_detail p.item_price { margin-bottom: 10px; } .item_box .item_detail p.item_discount { margin-bottom: 10px; } /* ************************************************ * Top_Page * ************************************************ */ #main #box_news { } #main #box_news p { line-height: 20px; } #main #box_recommend { } #main #box_sellers { } #main #box_free { background: #f5f5f5; padding: 20px; } #main #box_free p { line-height: 20px; } #box_recentlychecked{ margin: 20px 0 0 0; } div.footstamp { margin-bottom: 10px; padding-bottom: 20px; border-bottom: 1px solid #eee; } div.footstamp span { margin: 0 5px; color: #999; } .stock_error{ font-weight:bold; color:red; padding:10px 0; display:none; } /* ************************************************ * product_detail_page * ************************************************ */ h2.product_name { font-size: 20px; margin-bottom: 15px; } div.product_detail_area { margin-bottom: 20px; position: relative; width: 100%; } div.product_images { width: 500px; float: left; display: inline; } div.product_images div { margin-bottom: 20px; } div.product_images div img { max-width: 100%; } div.product_images div p.caption { margin-top: 10px; line-height: 20px; } div.add_cart { width: 180px; float: right; } table.add_cart_table { width: 100%; border-top: 1px solid #ccc; margin-bottom: 10px; } table.add_cart_table th { border-bottom: 1px solid #ccc; padding: 5px; font-size: 11px; } table.add_cart_table td { border-bottom: 1px solid #ccc; padding: 5px; } table.add_cart_table td input { width: 30px; font-size: 14px; } table.add_cart_table td strong.price { font-size: 14px; } table#option_tbl { width: 100%; margin-bottom: 20px; } table#option_tbl th, table#option_tbl td.none { background: whiteSmoke; } table#option_tbl th, table#option_tbl td { border: 1px solid #ccc; padding: 10px; text-align: center; } table#option_tbl th { background: whiteSmoke; } table#option_tbl td div input { margin-bottom: 5px; } ul.option_price { margin: 0 0 20px 0px; } ul.option_price li { list-style-type: none; } div.button_area { } div.button_area input { width: 100%; } div.product_description { font-size: 14px; line-height: 24px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc; clear: both; word-wrap: break-word; } div.product_image_extra { text-align: center; margin-bottom: 20px; } div.product_image_extra img.item { margin-bottom: 20px; } div.product_link_area { float: left; margin-left: 0px; } div.product_link_area div.twitter { float: left; width: 100px; } div.product_link_area div.pinterest { float: left; margin-right: 30px; } div.product_link_area div.fb-like { float: left; width: 200px; } div.product_link_area ul.other_link { clear: both; margin-top: 20px; margin-left: 20px; } div.product_link_area ul.other_link li { margin-bottom: 10px; } #tb_cap_tb{ } #tb_cap_tb{ margin-top: 20px; } .tb { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #CCC; } #tb_stitle { margin-bottom: 20px; } .tb_date, .tb_title, .tb_body, .tb_state { margin-bottom: 5px; } /* ************************************************ * cloud_zoom * ************************************************ */ /* This is the moving lens square underneath the mouse pointer. */ .cloud-zoom-lens { border: 4px solid #888; margin:-4px; /* Set this to minus the border thickness. */ background-color:#fff; cursor:move; } /* This is for the title text. */ .cloud-zoom-title { font-family:Arial, Helvetica, sans-serif; position:absolute !important; background-color:#000; color:#fff; padding:3px; width:100%; text-align:center; font-weight:bold; font-size:10px; top:0px; } /* This is the zoom window. */ .cloud-zoom-big { border: 4px solid #000; overflow:hidden; } /* This is the loading message. */ .cloud-zoom-loading { color:white; background:#222; padding:3px; border:1px solid #000; } /* Feature section in ZoomEngine page */ .zoom-section { clear:both; } * html .zoom-section { display:inline; clear:both; } .zoom-small-image { margin-bottom: 20px; width: 420px; float: left; margin-top: 4px; } .zoom-small-image #wrap { top: 0px; z-index: 9999; position: relative; } .cloud-zoom { margin-bottom: 20px; } .zoom-small-image .mousetrap { z-index:999; position: absolute; width: 100%; left:0px; top:0px; } /* Feature descriptions in ZoomEngine page */ .zoom-desc { width: 100px; float: left; margin-left: 20px; } a.cloud-zoom-gallery { display: block; margin: 0 0 5px 0; cursor: pointer; } .zoom-tiny-image { width: 130px; border: 1px solid #ccc; padding: 3px; } .zoom-tiny-image.selected { background: #333; border: 1px solid #000; } .zoom-tiny-image:hover { border: 1px solid #000; } /* ************************************************ * product_option_window * ************************************************ */ div#product_option { margin: 20px; padding: 20px; background: #fff; } div#product_option h2 { margin-bottom: 20px; } table.table_option { background: #fff; border-top: 1px solid #ccc; border-right: 1px solid #ccc; margin-bottom: 20px; } table.table_option th { border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; padding: 10px; background: #f5f5f5; } table.table_option td { border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; padding: 10px; } div#product_option div.button_area { } /* ************************************************ * product_list_page * ************************************************ */ div.sub_category_area, div.sub_group_area { height: 100%; background: #f5f5f5; margin-bottom: 20px; padding: 10px 10px 0px 10px; } div.sub_category_area div.sub_category, div.sub_group_area div.sub_group { float: left; margin: 0 20px 20px 0; text-align: center; } div.sub_category_area div.sub_category img, div.sub_group_area div.sub_group img { margin-left: 10px; } /* ************************************************ * search_page * ************************************************ */ div.search_result { background: #f5f5f5; margin: 20px 0; padding: 10px 0; text-align: center; } div.none { text-align: center; margin: 50px 0; } /* ************************************************ * policy * ************************************************ */ div#policy { } div#policy h2 { margin-bottom: 30px; } .policy_box, #policy_lead{ margin-bottom: 30px; } div.sk_box { margin-bottom: 50px; } div.sk_box h3 { font-size: 16px; margin-bottom: 10px; } div#sk tr { border-bottom: 1px solid #eee; } div#sk th { width: 150px; text-align: left; padding: 10px 20px 10px 0; } div#sk th img.poricy_img { margin-bottom: 5px; } div#sk td { padding: 10px 0; } div#sk th, div#sk td { vertical-align: top; line-height: 1.8; } div#payment_method { margin-top: 40px; } div#payment_method table.table { width: 100%; } div#payment_method table.table th { width: 200px; text-align: center; } div#shipping_method { margin-top: 40px; } div#shipping_method table.table { width: 100%; } div#shipping_method table.table th { width: 200px; text-align: center; } /* ************************************************ * side * ************************************************ */ #side div.box { clear: both; margin-bottom: 20px; } #side div.box a { text-decoration: none; } #side div.box h3 { margin-bottom: 10px; padding: 5px; text-align: center; } #side div.box ul { margin-left: 20px; } #side div.box ul li { list-style: none; margin-bottom: 7px; } #side div#box_cart { } #side div#box_cart div.cart_button { text-align: right; } #side div#box_owner { } #side div#box_owner div.owner_photo { padding-left: 20px; } #side div#box_owner img.owner_photo_inner { width: 152px; margin-bottom: 10px; padding: 3px; border: 1px solid #ccc; } #side div#box_owner p.name { font-size: 20px; margin-bottom: 10px; padding-left: 20px; } #side div#box_owner p.memo { font-size: 11px; line-height: 18px; margin-bottom: 10px; padding-left: 20px; } #side div#box_owner p.website { padding-left: 20px; } div#box_mailmaga a { padding-left: 20px; } div#box_mobile img { padding-left: 26px; } #group-list { border-top:#838383 dotted 1px; padding:10px 0px 0px; margin:10px 20px 0px 0px; } /* ************************************************ * Common Elements * ************************************************ */ /* @group Common Elements */ table { border-collapse: collapse; border-spacing: 0; } table.table { border-top: 1px solid #ccc; border-right: 1px solid #ccc; margin-bottom: 20px; } table.table th { border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; padding: 5px; background: #f5f5f5; } table.table td { border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; padding: 5px; } div.footstamp { margin-bottom: 10px; padding-bottom: 20px; border-bottom: 1px solid #eee; } div.footstamp span { margin: 0 5px; color: #999; } div.sort { margin-bottom: 20px; text-align: right; float: right; } div.sort strong { margin-right: 5px; } div.sort a { margin-right: 5px; text-decoration: underline; } div.sort span { margin-right: 5px; font-weight: bolder; text-decoration: none; background: #eee; } div.pager { margin: 20px 0; clear: both; text-align: center; } div.none { clear: both; text-align: center; margin: 50px 0; } /* radius */ .r3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .r5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .r7 { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } /* @group button */ .btn { display: inline-block; *display: inline; padding: 4px 10px 4px; margin-bottom: 0; *margin-left: .3em; font-size: 13px; line-height: 18px; *line-height: 20px; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; cursor: pointer; background-color: #f5f5f5; *background-color: #e6e6e6; background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #cccccc; *border: 0; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); text-decoration: none; } .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; *background-color: #d9d9d9; } .btn:active, .btn.active { background-color: #cccccc 9; } .btn:first-child { *margin-left: 0; } .btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; *background-color: #d9d9d9; /* Buttons in IE7 don't get borders, so darken on hover */ background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } .btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn.active, .btn:active { background-color: #e6e6e6; background-color: #d9d9d9 9; background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn.disabled, .btn[disabled] { cursor: default; background-color: #e6e6e6; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .btn-large [class^="icon-"] { margin-top: 1px; } .btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px; } .btn-small [class^="icon-"] { margin-top: -1px; } .btn-mini { padding: 2px 6px; font-size: 11px; line-height: 14px; } .btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active { color: rgba(255, 255, 255, 0.75); } .btn { border-color: #ccc; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn-primary { background-color: #0074cc; *background-color: #0055cc; background-image: -ms-linear-gradient(top, #0088cc, #0055cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); background-image: -o-linear-gradient(top, #0088cc, #0055cc); background-image: -moz-linear-gradient(top, #0088cc, #0055cc); background-image: linear-gradient(top, #0088cc, #0055cc); background-repeat: repeat-x; border-color: #0055cc #0055cc #003580; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { background-color: #0055cc; *background-color: #004ab3; } .btn-primary:active, .btn-primary.active { background-color: #004099 9; } .btn-success { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #5bb75b; *background-color: #51a351; background-image: -moz-linear-gradient(top, #62c462, #51a351); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); background-image: linear-gradient(to bottom, #62c462, #51a351); background-repeat: repeat-x; border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { color: #ffffff; background-color: #51a351; *background-color: #499249; } .btn-success:active, .btn-success.active { background-color: #408140 \9; } .btn_quick { margin: 10px 0; } /* ************************************************ * ヘッダーフェイド画像表示 * ************************************************ */ /* gallery --------------------------------- */ #gallery { position: relative; width: 930px; height: 300px; } ul#gallery-img li { list-style: none; display: none; position: absolute; left: 0; top: -6px; } #gallery-on { display: none; position: absolute; left: 0; top: -6px; z-index: 5; width: 930px; height: 300px; background-color: #ffffff; } #gallery-trap { position: absolute; left: 0; top: -6px; z-index: 10; } #gallery-trap a, #gallery-trap span { display: block; position: absolute; left: 0; top: -6px; width: 930px; height: 300px; }