/* ************************************************ * all * ************************************************ */ * { margin: 0px; padding: 0px; } html { overflow-y: scroll; height: 100%; } body { text-align:left; font-size: 12px; font-family:"Lora","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "MS P明朝", serif; color: #111; background-color: #f4f1ec; background-image: url(https://img.shop-pro.jp/tmpl_img/67/texture.png); } a { outline: none; color: #111; } a:visited,:link { text-decoration: none; } a:hover { text-decoration: underline; color: #c86464; } br.clear { clear: both; font: 0pt/0pt sans-serif; line-height: 0; } hr { clear: left; margin: 10px 0; border: 0; } img { border: none; vertical-align: middle; } /* ************************************************ * clearfix * ************************************************ */ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } /* ************************************************ * layout * ************************************************ */ /*ページ全体の幅、レイアウトをセンタリング*/ #container { margin:0px auto; width:960px; text-align:left; } #top_line{ margin: 0 0 15px; width: 100%; height: 3px; background: transparent url("https://img.shop-pro.jp/tmpl_img/67/border_bottom.png") repeat-x left top; } /*ヘッダー*/ #header { clear:both; padding: 20px 0; width:100%; } /*サイド*/ #side { float: left; width: 200px; } /*メイン*/ #main { float: right; width: 700px; } /*フッター(コピーライト)*/ #footer { clear:both; padding: 30px 0 20px; width:100%; border-top: 1px solid #ccc; color: #666; text-align: center; } /*スライダー*/ .slider{ margin: 0 0 70px; } /* ************************************************ * header * ************************************************ */ #header .header_link { float: right; margin-bottom: 15px; } #header .header_link ul { } #header .header_link ul li { float: left; margin-left: 20px; list-style-type: none; line-height: 16px; } #header .header_link ul li i { display: block; float: left; margin-right: 5px; width: 16px; height: 16px; } #header .header_link ul li a { text-decoration: none; } #header .header_link ul li.my_account { } #header .header_link ul li.my_account i.account { background: url(https://img.shop-pro.jp/tmpl_img/67/icons16.png) no-repeat left -97px; } #header .header_link ul li.member_login_btn i.login { background: url(https://img.shop-pro.jp/tmpl_img/67/icons16.png) no-repeat left -225px; } #header .header_link ul li.member_regist_btn i.regist { background: url(https://img.shop-pro.jp/tmpl_img/67/icons16.png) no-repeat 0px -193px; } #header .header_link ul li.member_logout_btn i.logout { background: url(https://img.shop-pro.jp/tmpl_img/67/icons16.png) no-repeat left -210px; } #header .member_login_name{ float: right; clear: right; margin: 0 0 13px; } #header .header_link ul li.view_cart { } #header .header_link ul li.view_cart i.cart { background: url(https://img.shop-pro.jp/tmpl_img/67/icons16.png) no-repeat 0px 0px; } #header .header_link ul li.view_cart span.count { margin-left: 5px; padding: 5px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #ff3355; color: #fff; font-weight: bolder; } #header .header_delivery_price { float: right; clear: right; margin: 0 0 17px; padding: .5em 1em .3em; border: solid 1px #aaa; list-style: none; line-height: 1.5; } #header .search { float: right; clear: right; margin-bottom: 40px; } #header h1.logo { max-width: 50%; word-wrap: break-word; font-size: 40px; } #header h1.logo a { text-decoration: none; } #header h1.logo img { max-width: 100%; } /* ************************************************ * footer * ************************************************ */ #footer a { color: #666; } #footer .footer_menu { clear: both; margin-bottom: 10px; } #footer .footer_menu li { display: inline; margin: 0 5px; } .copyright { clear: both; padding: 1em 0; text-align: center; font-size: 76.923%; } .powered { display: inline; margin-left: 1em; text-align: center; line-height: 18px; } .powered a { color: #777; text-decoration: none; } .powered img { margin-left: .3em; width: 200px; height: 18px; } .foot_policy{ margin: 0 0 30px; padding: 0 0 20px; border-bottom: 1px solid #ccc; } .foot_sk_box{ float: left; padding: 0 25px; width: 200px; text-align: left; } .foot_sk_box h3{ margin: 0 0 1em; } .foot_sk_box h4{ font-size: 13px; } .foot_sk_box dt{ margin: 0 0 .5em; } .foot_sk_box dd{ margin: 0 0 1.5em; } #mobile{ width: 145px; } /* ************************************************ * main * ************************************************ */ #main .box { clear: both; overflow: hidden; margin-bottom: 60px; border-top: solid 1px #999; } #main .box h3 { font-size: 13px; vertical-align: middle; } .header_block{ clear: both; padding: 1.1em 0; background: transparent url("https://img.shop-pro.jp/tmpl_img/67/border_bottom.png") repeat-x left bottom; } .header_block .icon{ float: left; margin: 0 14px 0 0; width: 20px; height: auto; text-align: center; } .header_block .icon img{ max-width: 100%; } .header_block .title{ float: left; text-align: left; } .header_block h3{ padding: 0; border: none; text-align: left; } .header_block p{ margin-top: 4px; color: #999; } #main .header_block{ margin: 0 0 30px; } #main .header_block .icon{ padding: 0; } /* ************************************************ * item_box * ************************************************ */ .item_box { display:inline-block; float: left; margin: 0 41px 45px 0; width: 205px; vertical-align:top; text-align: left; /display:inline; /zoom:1; } .item_box .item_image { margin: 0px; } .item_box .item_image img.item { max-width: 100%; border: solid 1px #ddd; } .item_box .item_detail { margin: 15px 0 0; padding-left: 10px; border-left: solid 1px #ddd; } .item_box .item_detail p{ overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; -o-text-overflow: ellipsis; } .item_box .item_detail p.item_name { margin-bottom: 5px; font-size: 15px; } .item_box .item_detail p.item_description{ text-overflow: initial; overflow: visible; white-space: normal; } p.item_regular_price, p.item_price, p.item_discount { margin-bottom: 10px; font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; } .box_last{ margin-right: 0; } .box_small .item_box { display:inline-block; margin: 0 33px 45px 0; width: 113px; vertical-align:top; text-align: left; /display:inline; /zoom:1; } .box_small p { overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; -o-text-overflow: ellipsis; } .box_small .item_box .item_detail a { margin-bottom: 5px; font-size: 13px; } .box_small .box_last { margin-right: 0; } .stock_error{ display:none; padding:10px 0; color:#DA5858; font-weight:bold; } /* ************************************************ * Top_Page * ************************************************ */ #main #box_info p { line-height: 20px; } #main #box_free { padding: 20px; border: #aaa solid 1px; } #main #box_free p { line-height: 20px; } #main #box_news .header_block{ margin-bottom: 0; } #main #box_news ul{ margin-left: 0; list-style: none; } #main #box_news ul li{ border-top:#ddd solid 1px; } #main #box_news ul li:first-child{ border-top:none; } #main #box_news ul li div{ padding: 1.6em 0 1.4em; } #main #box_news p.news_date{ float: left; margin-right: 20px; width: 70px; } #main #box_news p.news_message{ float: left; } /* ************************************************ * product_detail_page * ************************************************ */ h2.product_name { margin-bottom: 0.8em; padding-bottom: 0.6em; background: transparent url("https://img.shop-pro.jp/tmpl_img/67/border_bottom.png") repeat-x left bottom; font-size: 18px; } .product_form{ margin: 0 0 62px; } .product_detail_area { position: relative; width: 100%; } .product_images { display: inline-block; float: left; width: 400px; } .product_images div img { max-width: 100%; max-height: 100%; width: auto; height:auto; border: 1px solid #ddd; } .product_images div p.detail { margin-top: 10px; line-height: 20px; } .add_cart { clear: right; float: right; overflow: hidden; width: 270px; } table.add_cart_table { margin-bottom: 10px; width: 100%; border-left: solid 1px #ccc; table-layout:fixed; font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; } table.add_cart_table th { display: inline-block; overflow: hidden; padding: 12px 4px 12px 18px; width: 35%; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; } table.add_cart_table td { display: inline-block; overflow: hidden; padding: 10px 0; width: 55%; text-align: left; text-overflow: ellipsis; white-space: nowrap; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; } table.add_cart_table td input { padding: 0 4px; width: 38px; height: 26px; font-size: 15px; line-height: 26px; vertical-align: middle; } table.add_cart_table td strong.price { font-size: 14px; } table#option_tbl { margin-bottom: 20px; width: 100%; } table#option_tbl th, table#option_tbl td.none { background: whiteSmoke; } table#option_tbl th, table#option_tbl td { padding: 10px; border: 1px solid #ccc; 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 0; } ul.option_price li { list-style-type: none; } .option_box{ clear: both; width: 100%; overflow: hidden; } table td.pur_block{ margin: 0 5px 0 0; width: auto; white-space: normal; } .button_area input { width: 100%; } .product_description { clear: both; margin-bottom: 20px; word-wrap: break-word; font-size: 12px; line-height: 22px; } .product_image_extra { margin-bottom: 20px; text-align: center; } .product_image_extra img.item { margin-bottom: 20px; } .product_link_area { margin: 20px 0 0; padding: 20px 0 0; border-top: #ccc solid 1px; } .product_link_area div.twitter { float: left; width: 100px; } .product_link_area div.pinterest { float: left; margin-right: 30px; } .product_link_area div.fb-like { float: left; width: 200px; } .product_link_area ul.other_link { clear: both; margin-top: 20px; margin-left: 20px; } .product_link_area ul.other_link li { margin-bottom: 10px; } .share{ margin: 15px 0 0; list-style: none; } .share li{ display: inline-block; float: left; margin: 0 10px 10px 0; max-width: 125px; } .calamel-link{ margin-top: 10px; } #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 { margin:-4px; /* Set this to minus the border thickness. */ border: 4px solid #888; background-color:#fff; cursor:move; } /* This is for the title text. */ .cloud-zoom-title { position:absolute !important; top:0px; padding:3px; width:100%; background-color:#000; color:#fff; text-align:center; font-weight:bold; font-size:10px; font-family:Arial, Helvetica, sans-serif; } /* This is the zoom window. */ .cloud-zoom-big { overflow:hidden; border: 4px solid #c86464; } /* This is the loading message. */ .cloud-zoom-loading { padding:3px; border:1px solid #000; background:#222; color:white; } /* Feature section in ZoomEngine page */ .zoom-section { clear:both; } * html .zoom-section { display:inline; clear:both; } .zoom-small-image { float: left; margin-top: 4px; width: 400px; } .zoom-small-image #wrap { position: relative; top: 0px; z-index: 9999; } .cloud-zoom { margin-bottom: 20px; } .zoom-small-image .mousetrap { position: absolute; top:0px; left:0px; z-index:999; width: 100%; } /* Feature descriptions in ZoomEngine page */ .zoom-desc { clear: left; width: 100%; } a.cloud-zoom-gallery { display: block; float: left; margin: 0 22px 20px 0; width: 82px; height: 82px; cursor: pointer; } .zoom-tiny-image { padding: 3px; width: 100%; height: auto; border: 1px solid #ccc; background: #efefef; } .zoom-tiny-image.selected { border: 1px solid #c86464; background: #c86464; } .zoom-tiny-image:hover { border: 1px solid #c86464; } a.gallery_last{ margin-right: 0; } /* ************************************************ * product_option_window * ************************************************ */ #product_option { margin: 20px; padding: 20px; background: #fff; } #product_option h2 { margin-bottom: 20px; } table.table_option { margin-bottom: 20px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; background: #fff; } table.table_option th { padding: 10px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; background: #f5f5f5; } table.table_option td { padding: 10px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; } /* ************************************************ * product_list_page * ************************************************ */ .sub_category_area, .sub_group_area { margin-bottom: 20px; padding: 10px 10px 0px 10px; height: 100%; border: solid 1px #ccc; } .sub_category_area div.sub_category, .sub_group_area div.sub_group { float: left; margin: 0 20px 10px 0; } .sub_category_area div.sub_category img, .sub_group_area div.sub_group img { margin-right: 10px; border: solid 1px #ccc; } /* ************************************************ * search_page * ************************************************ */ .search_result { margin: 20px 0; padding: 10px 0; background: #ddd; text-align: center; } .none { margin: 50px 0; text-align: center; } /* ************************************************ * policy * ************************************************ */ #policy { line-height: 1.8; font-size: 14px; } #policy h2 { margin-bottom: 30px; } .policy_box, #policy_lead{ margin-bottom: 30px; } .sk_box { margin-bottom: 70px; } .sk_box h3 { margin-bottom: 1em; font-size: 16px; } .sk_box table { width: 100%; border-top: 1px solid #ccc; border-collapse: separate; empty-cells:show; } .sk_box th { padding: 20px 40px 20px 0; width: 170px; text-align: left; } .sk_box th img.poricy_img { margin-bottom: 5px; } .sk_box td { padding: 20px 0; zoom: 1; content: ' '; } .sk_box th, .sk_box td { vertical-align: top; line-height: 1.8; position: relative; border-bottom: solid 1px #ccc; } #payment_method { margin-top: 40px; } #payment_method table.table { width: 100%; } #payment_method table.table th { width: 200px; text-align: center; } #shipping_method { margin-top: 40px; } #shipping_method table.table { width: 100%; } #shipping_method table.table th { width: 200px; text-align: center; } /* ************************************************ * side * ************************************************ */ #side .box { clear: both; margin-bottom: 60px; border-top: solid 1px #999; border-bottom: solid 1px #999; word-wrap: break-word; position: relative; } #side .box h3 { text-align: left; font-weight: normal; font-size: 16px; } #side .box ul { margin-left: 0px; list-style: none; } #side .box ul li { border-top:#838383 dotted 1px; } #side .box ul li:first-child { border-top:none; } #side #side_nav { padding: 0; border-top: none; border-right: solid 2px #ccc; border-bottom: none; } #side #side_nav ul{ margin-right: 10px; } #side #side_nav ul li { margin: 0; } #side #side_nav .nav_item{ clear: both; padding: .9em 0 .9em; cursor: pointer; } #side #side_nav .nav_item .nav_icon{ float: left; padding: inherit; width: 20px; height: auto; } #side #side_nav .nav_item .nav_icon img{ max-width: 100%; } #side #side_nav .nav_item .nav_title{ float: right; text-align: right; } #side #side_nav .nav_item h3{ margin-bottom: 4px; padding: 0; border: none; text-align: right; } #side #side_nav .nav_item p{ color: #999; } .box_default ul li div{ position: relative; padding: 1.2em 0 1em; text-align: left; } .box_default ul li div img{ border: solid #ddd 1px; } .box_default ul li div p{ line-height : 1.6; } #side #box_cart { } #side #box_cart .cart_button { text-align: right; } #side #box_owner .inner{ padding: 1.2em 0 1em; } #side #box_owner .owner_photo{ margin: 0 0 10px; width: 100px; max-width: 100%; height: auto; border: solid #ddd 1px; } #side #box_owner p.name { font-size: 14px; } #side #box_owner p.memo { font-size: 11px; line-height: 18px; } #side #box_owner p.website { padding-left: 20px; } #qr_code{ padding: 20px 0; } #box_sellers .seller_box{ padding: 2.2em 0; } #box_sellers li{ position: relative; display: block; } #box_sellers .top_seller:before{ position: absolute; top: 18px; left: -6px; content: url(https://img.shop-pro.jp/tmpl_img/67/rank1.png); } #box_sellers .rank_2:before{ content: url(https://img.shop-pro.jp/tmpl_img/67/rank2.png); } #box_sellers .rank_3:before{ content: url(https://img.shop-pro.jp/tmpl_img/67/rank3.png); } #box_sellers .seller_image{ float: left; margin: 0 10px 0 0; width: 80px; border: solid #ddd 1px; } #box_sellers .seller_detail{ float: right; width: 104px; } #box_sellers .seller_rank{ margin: 0 0 10px; font-size: 12px; } #box_sellers .seller_rank > strong{ font-size: 15px; } #box_sellers .seller_name{ font-size: 13px; } #box_sellers .seller_teika{ float: left; font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; } #box_sellers .more_seller{ display: none; } .more_btn{ padding: 8px 0; border-top: solid 1px #999; text-align: center; cursor: pointer; } .updown{ display: inline-block; margin: 0 3px 0 0; width: 13px; height: 8px; background: url(https://img.shop-pro.jp/tmpl_img/67/down_icon.png); background-repeat: no-repeat; } .more_up{ background: url(https://img.shop-pro.jp/tmpl_img/67/up_icon.png); } /* ************************************************ * Common Elements * ************************************************ */ /* @group Common Elements */ table { border-spacing: 0; border-collapse: collapse; } table.table { margin-bottom: 20px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; } table.table th { padding: 5px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; background: #f5f5f5; } table.table td { padding: 5px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; } .footstamp { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #ddd; } .footstamp span { margin: 0 5px; color: #999; } .sort { float: right; margin-bottom: 20px; text-align: right; } .sort strong { margin-right: 5px; } .sort a { margin-right: 5px; text-decoration: underline; } .sort span { margin-right: 5px; background: #eee; text-decoration: none; font-weight: bolder; } .pager { clear: both; margin: 20px 0; text-align: center; } .pager a{ margin: 15px; } .none { clear: both; margin: 50px 0; text-align: center; } .sold_out { color: #DA5858; font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; } .to_top{ float: right; clear: both; text-align: center; margin: 0 0 20px; padding: 1.3em 1em; border: solid 1px #aaa; font-size: 14px; color: #888; } .to_top:hover { text-decoration: none; color: #c86464; border-color: #c86464; } .tbl_calendar { margin: 20px 0; width: 100%; border: none !important; border-spacing: 0 !important; border-collapse: collapse !important; } .tbl_calendar th, .tbl_calendar td { padding: 4px !important; border-bottom: 1px solid #ccc !important; text-align: center !important; } /* @group button */ .btn { display: block; margin-top: 1em; border: none; border-radius: 0; color: #fff; text-align: center; font-weight: bold; font-size: 15px; font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; line-height: 1; cursor: pointer; -webkit-appearance:none; } .btn:link, .btn:visited, .btn:hover, .btn:active{ color: #fff; text-decoration: none; } .btn-primary { margin: 1.2em 0 .9em; padding: 1.4em 0; background-color: #c86464; } .btn-contact { margin: 0.5em 0.3em; padding: 1.3em 0; background-color: #a0a0a0; font-weight: normal; font-size: 13px; } .btn-quick { margin: 0.9em 0; padding: 1.3em 0; background-color: #64b4c8; font-size: 13px; }