@charset "utf-8"; /************************************************ ブロック用 ************************************************ */ /* ** 目次 *** ▼ブロック共通 リスト タイトル ヘッダー上、フッター下のブロックエリア ▼各機能ブロックの指定 -新着情報 -現在のカゴの中 -カテゴリ -ガイドリンク -ログイン(サイド用) -検索 -カレンダー -おすすめ商品 - 商品詳細のオススメ商品 [whobought_area] ▼各新規追加ブロックの指定 -TOP用メインスライド -TOP用バナー -おすすめ製品 -ランキング製品 -ニュース -製品を探す -正規取扱ウェブショップ -正規取引店のご案内 -関連商品 -TOP/サイド共通絞り込み検索 */ /* ============================================== ブロック共通 * #container から指定することで、ヘッダー・フッターには適用していない。 /* ============================================= */ .side_column{ /*overflow-x: hidden;*/ /* IE6 表示乱れ防止 */ overflow: visible; } .side_column .block_body, #main_column .block_body{ /*border: solid 1px #ccc; border-top: none;*/ } .side_column .block_body .box{ /*border: solid 1px #ccc; width: 145px;*/ } /* 外枠 ----------------------------------------------- */ #container .block_outer{ padding: 0; /* #container の背景色を欠けさせないため敢えて padding */ } #container #main_column .block_outer{ padding: 0; } #container .side_column .block_outer{ padding: 0; } /* リスト ----------------------------------------------- */ /* ログイン 検索条件 */ #container .block_outer .block_body dl.formlist{ margin-bottom: 8px; } #container .block_outer .block_body dl.formlist dd{ margin-bottom: 5px; } #container .block_outer .block_body dl.formlist dt{ margin-bottom: 3px; padding-left: 15px; background: url("../img/icon/ico_arrow_03.gif") no-repeat left; font-size: 90%; } #container .block_outer .block_body dl.formlist span{ vertical-align: top; } /* タイトル ----------------------------------------------- */ /*#login_area h2, #search_area h2, #calender_area h2, #cart_area h2, #cart h2{ padding: 5px 0 8px 10px; border-style: solid; border-color: #f90 #ccc #ccc; border-width: 1px 1px 0; background: url('../img/background/bg_tit_bloc_01.jpg') repeat-x left bottom; font-size: 14px; } #category_area h2{ border-top: solid 1px #f90; background: url('../img/background/bg_tit_bloc_01.jpg') repeat-x left bottom; padding: 5px 0 8px 10px; font-size: 14px; } #recommend_area h2, #news_area h2{ padding: 5px 0 8px 10px; border-style: solid; border-color: #f90 #ccc #ccc; border-width: 1px 1px 0; background: url('../img/background/bg_btn_bloc_02.jpg') repeat-x left bottom #fef3d8; }*/ /* *********************************************** ▼各機能ブロックの指定 /*********************************************** */ /* =============================================== ▼新着情報 =============================================== */ #news_area .news_contents{ padding: 10px; max-height: 260px; height: auto !important; /* hack? */ height: 260px; /* hack? */ overflow: auto; overflow-y: scroll; } #news_area dl.newslist{ background: url("../img/background/line_dot_01.gif") repeat-x bottom; } #news_area dl.newslist:last-child{ /* IE9 未満では無効 (影響度合いが低いので黙殺) */ background: none; } #news_area dl.newslist dt{ margin-bottom: 5px; } #news_area dl.newslist dd{ margin-bottom: 10px; padding-bottom: 10px; } /* =============================================== ▼現在のカゴの中 =============================================== */ #cart_area .information{ padding: 10px; } #cart_area .postage{ margin-top: 10px; padding-top: 10px; background: url("../img/background/line_dot_01.gif") repeat-x top; } #cart_area .postage .point_announce{ padding: 2px 0 2px 20px; background: url("../img/icon/ico_price.gif") no-repeat left top; } #cart_area .btn{ padding: 10px 0; background: url("../img/background/line_dot_01.gif") repeat-x top #f7f7e6; text-align: center; } /* =============================================== ▼カテゴリ =============================================== */ #container #category_area .block_body{ /*background-color: #fffaf0;*/ } #category_area li{ /*padding-left: 5px;*/ } #category_area li.level1{ /*border-bottom: solid 1px #ccc;*/ } #category_area li.level1 p{ /*padding-left: 20px; margin: 7px 3px;*/ } #category_area li.level1 p{ /*background: url("../img/icon/ico_arrow_01.gif") 2px 3px no-repeat;*/ } #category_area li.level1 li p{ /*background: url("../img/icon/ico_level.gif") 7px 7px no-repeat;*/ } #category_area li a{ display: block; padding: 0; } a.onlink:link{ color: #f00; text-decoration: underline; } a.onlink:visited{ color: #f00; } a.onlink:hover{ color: #f00; } /* =============================================== ▼ガイドリンク =============================================== */ #guide_area{ border: none; } #guide_area li{ margin-bottom: 5px; /*letter-spacing: -0.05em;*/ } ul.button_like li{ margin: 0; padding: 0 0 1px 0; background: url("../img/background/bg_btn_list.jpg") bottom repeat-x; } ul.button_like li a{ margin: 0; padding: 10px 15px 10px 10px; border: 1px solid; border-bottom: none; border-color: #ccc; display: block; background: url("../img/icon/ico_arrow_02.gif") no-repeat right; text-decoration: none; outline: none; } /* =============================================== ▼ログイン(サイド用) ※ヘッダー用はbloc_alpha.css内に記述 =============================================== */ #container div#login_area .block_body{ padding: 10px; } #container div#login_area .block_body p{ margin-bottom: 5px; } #container div#login_area .block_body .btn{ text-align: center; } #container .login_area dl.formlist{ /* margin-bottom: 8px; width: 450px; */ } #container .login_area dl.formlist dt{ margin-bottom: 20px; /* padding-left: 15px; color: #333; background: url("../img/icon/ico_arrow_03.gif") no-repeat left; width: 120px; float: left; font-size: 90%; */ } #container .login_area dl.formlist dd{ margin-bottom: 20px; /* float: right; width: 300px; vertical-align: bottom; text-align: left; */ } #container div#login_area .block_body .mini{ margin-top: 5px; /*letter-spacing: -0.01em;*/ } .login_memory{ margin-top: 20px; position: relative; } .login_memory, .login_memory *{ line-height: 1; } /* =============================================== ▼検索 =============================================== */ #container div#search_area .block_body{ padding: 10px; } #container div#search_area .block_body .btn{ text-align: center; } /* =============================================== ▼カレンダー =============================================== */ #calender_area{ background-color: transparent; border: none; } #calender_area .block_body{ padding: 10px 0; background-color: #f1f9fc; } #calender_area table{ background: #fff; border: none; width: 150px; margin: 0 auto 5px; font-size: 90%; } #calender_area table td{ padding: 1px 3px; border-top: 1px solid #ccc; border-right: none; text-align: center; } #calender_area th{ padding: 1px 3px; background: #fff; border: none; text-align: center; } #calender_area table .month{ margin-bottom: 5px; padding-left: 12px; background: url("../img/icon/ico_arrow_04.gif") no-repeat left; font-size: 120%; } #calender_area .off{ color: #f00; } #calender_area .today{ background-color: #FFF99D; font-weight: bold; } #calender_area .information{ margin-left: 10px; font-size: 90%; } /* =============================================== ▼おすすめ商品 =============================================== */ /* tplファイルのマークアップが同じ項目 メインカラム用 サイドカラム用 [side_column] 商品詳細のオススメ商品 [whobought_area] =============================================== */ /* 共通 ----------------------------------------------- */ #recommend_area .block_body, #whobought_area .product_item{ padding: 10px 0 10px; border: none; background: url("../img/background/line_dot_01.gif") repeat-x bottom; } #recommend_area .block_body p, #whobought_area .product_item p{ margin: 0 0 5px 0; } #recommend_area .block_body img, #whobought_area .product_item img{ margin: 0 5px 0 0; } #recommend_area .block_body h3, #whobought_area .product_item h3{ font-size: 100%; font-weight: normal; } /* サイドカラム用 */ .side_column #recommend_area .product_item{ margin-bottom: 10px; } /* 画像 ----------------------------------------------- */ /* メインカラム用 */ #main_column #recommend_area .block_body .productImage, #whobought_area .product_item .productImage{ margin-bottom: 10px; float: left; width: 90px; } /* サイドカラム用 */ .side_column #recommend_area .block_body .productImage{ float: none; text-align: center; width: auto; } /* 左右の振り分け ----------------------------------------------- */ #main_column #recommend_area .product_item, #whobought_area .product_item{ float: left; width: 47.5%; padding-left: 1%; padding-right: 1%; } /* 商品説明テキスト ----------------------------------------------- */ /* メインカラム用 1カラム時*/ #main_column.colnum1 #recommend_area .block_body .productContents{ float: right; width: 74%; } /* メインカラム用 2カラム時*/ #main_column.colnum2 #recommend_area .block_body .productContents, #main_column.colnum2 #whobought_area .productContents{ float: right; width: 74%; } /* メインカラム用 3カラム時*/ #main_column.colnum3 #recommend_area .block_body .productContents, #main_column.colnum3 #whobought_area .productContents{ float: right; width: 67%; } /* サイドカラム用 */ .side_column #recommend_area .block_body .productContents{ clear: both; } /* *********************************************** ▼各機能ブロックの指定 /*********************************************** */ /* =============================================== ▼TOP用メインスライド =============================================== */ .top_slider_block{ width: 100%; background: #252525; } .top_slider_block .top_slide_wrap{ position: relative; } .topSlide li a img{ width: 100%; height: auto; } /* =============================================== ▼TOP用バナー =============================================== */ .top_bnr_block{ width: 100%; background: #e2edf2; padding: 105px 0 65px 0; } .topBnr{ width: 100%; } .topBnr li{ width: 100%; max-width: 340px; margin-right: 70px; text-align: center; } .topBnr li.last_big_bnr{ width: 100%; max-width: 100%; margin-top: 30px; margin-right: 0; } .topBnr li:nth-of-type(3){ margin-right: 0; } .bnr_rel{ position: relative; } .ColorScaleWrap{ width: 100%; height: auto; overflow: hidden; background: #000; } .ColorScaleWrap a{ display: block; position: relative; z-index: 2; } .ColorScaleWrap img{ display: block; transition: 0.3s; opacity: 0.5; } .topBnr li p{ line-height: 1; font-size: 160%; font-weight: bold; color: #fff; width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; text-shadow: none; transition: 0.3s; } .ColorScaleWrap a:hover img{ transform: scale(1.1); opacity: 1; } .ColorScaleWrap a:hover p{ text-shadow: black 1px 1px 5px, black -1px 1px 5px,black 1px -1px 5px, black -1px -1px 5px; } /* =============================================== ▼おすすめ製品 =============================================== */ .recommend_block{ width: 100%; padding: 35px 0; background: #fff; } .LC_Page_Products_List .recommend_block{ margin-top: 40px; padding: 0; background: transparent; } .LC_Page_Products_Detail .recommend_block{ margin-top: 55px; padding: 0; background: transparent; } .recommend_block ul.productsList{ width: 100%; margin-bottom: 25px !important; } .LC_Page_Index .recommend_block ul.productsList li.slick-slide{ width: 175px; margin: 0 11px; } .LC_Page_Index .recommend_block ul.productsList li .products_color, .LC_Page_Index .recommend_block ul.productsList li .products_battery, .LC_Page_Index .ranking_block ul.rankingSlide li .products_color, .LC_Page_Index .ranking_block ul.rankingSlide li .products_battery{ opacity: 0 !important; display: none !important; } /* =============================================== ▼ランキング製品 =============================================== */ .productsList li a{ display: block; color: #000; width: 100%; } .ranking_block{ width: 100%; padding: 30px 0 80px 0; background: #fff; } .rankingSlide{ width: 100%; } .rankingSlide li.slick-slide{ width: 175px; margin: 0 11px; } .products_img{ position: relative; } .products_logo{ margin-bottom: 15px; } .products_title{ font-size: 12px; font-weight: bold; color: #00295d; line-height: 1.6; margin-bottom: 15px; } .products_length{ font-size: 12px; color: #fff; margin-bottom: 15px; } .products_length span{ display: inline-block; width: auto; background: #00295d; padding: 5px; } .products_length.trans_back{ color: transparent; } .products_length.trans_back span{ background: transparent; } .products_price{ width: 100%; } .products_price dt{ /*width: calc(100% - 60px);*/ width: 100%; color: #00295d; font-size: 12px; margin-bottom: 15px; /*letter-spacing: -0.05em;*/ } .products_price dt strong{ font-size: 140%; } .products_price dd{ /*width: 60px;*/ width: 100%; font-size: 12px; text-align: right; /*letter-spacing: -0.05em;*/ } .products_price dd span.mores{ color: #00295d; text-decoration: underline; } .sold_out{ font-size: 16px; font-weight: bold; color: #ee2113; width: 100%; margin-bottom: 15px; } .icons_wrap{ position: absolute; bottom: 0; right: 5px; } .icons_wrap ol{ width: auto; } .icons_wrap ol li{ width: 48px !important; height: 48px; margin: 0 0 0 5px !important; background: transparent; } .icons_wrap ol li:first-of-type{ margin-left: 0; } .ranking_number{ position: absolute; top: 0; right: 0; z-index: 9998; font-size: 140%; color: #fff; background: #00295d; text-align: center; width: 32px; height: 32px; line-height: 32px; } .ranking_number.number_0{ background: #c2ab6b; } .ranking_number.number_1{ background: #56b5db; } .ranking_number.number_2{ background: #d46565; } /* =============================================== ▼ニュース =============================================== */ .news_twitter_wrap{ padding-top: 40px; padding-bottom: 65px; } .LC_Page_Index .news_block{ width: 830px; padding-right: 20px; } .LC_Page_Index .twitter_block{ width: calc(100% - 830px); } .newsBox{ width: 100%; min-height: 420px; border-top: 5px solid #3d98b8; padding: 40px 20px; background: #fff; } .newsList{ padding-bottom: 10px; } .newsList li{ padding-bottom: 30px; width: 100%; } .newsList li .date{ display: block; width: 100px; } .newsList li .cate{ display: block; text-align: center; padding: 5px; color: #fff; width: 120px; margin-right: 20px; border-radius: 20px; font-size: 80%; } .newsList li .news_link_ttl{ width: calc(100% - 240px); display: block; } .newsList li .news_link_ttl strong{ font-weight: normal; line-height: 1.6; } .newsList li dl{ width: 100%; } .newsList li dl dt{ width: 80px; text-align: center; color: #fff; font-size: 110%; } .newsList li dl dt span{ display: block; background: #000; padding: 8px 0 4px 0; } .newsList li dl dt span.info_shipment{ background: #c2ab6b; } .newsList li dl dt span.info_products{ background: #d46565; } .newsList li dl dd{ width: calc(100% - 80px); padding-left: 20px; color: #00295d; font-size: 110%; } /* =============================================== ▼製品を探す =============================================== */ .search_block{ width: 100%; background: #fff; padding: 60px 0 90px 0; } .refines{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 100%; border-bottom: 1px solid #cdcdcd; padding: 20px 0; } .refines dt{ width: 100px; text-align: center; } .refines dt figure{ padding-bottom: 7px; } .refines dt strong{ display: block; color: #00295d; font-weight: bold; } .refines.searchType01 dd{ width: calc(100% - 100px); padding-left: 180px; } .refines.searchType02 dd .flex-disp:last-of-type{ margin-bottom: 0; } .refines.searchType02 dd.subType{ width: calc(100% - 100px); padding-left: 25px; } .refines.searchType02 dd.subType .variation_refine .variation_foreach_child_wrap{ padding-bottom: 10px; width: 100%; } .refines.searchType02 dd .variation_foreach_left{ width: 155px; } .refines.searchType02 dd .variation_foreach_right{ width: calc(100% - 155px); } .refines.searchType02 dd.subType .variation_refine{ width: 100%; } .refines.searchType02 dd.subType .variation_refine .variation_foreach_child_wrap:last-of-type{ padding-bottom: 0; } .refines.searchType02 dd.subType .variation_refine .variation_foreach_child_wrap .variation_foreach_left i{ display: inline-block; text-align: center; vertical-align: middle; width: 14px; margin-right: 5px; } .refines.searchType02 dd.subType .variation_refine .variation_foreach_child_wrap .variation_foreach_left span{ display: inline-block; vertical-align: middle; font-weight: bold; } .label_foreach_wrap{ width: 100%; } /* .refineBattery dd .label_foreach_wrap label:nth-of-type(2){ opacity: 0 !important; display: none !important; } .so1o{ opacity: 0 !important; display: none !important; } .side_refine_battery dd label:nth-of-type(2){ opacity: 0 !important; display: none !important; } */ /* =============================================== ▼正規取扱ウェブショップ =============================================== */ .shop_block{ width: 100%; background: #00295d; padding: 45px 0 50px 0; } .official_shop_list dl{ width: 100%; margin-bottom: 20px; } .official_shop_list dl:last-of-type{ margin-bottom: 0; } .official_shop_list dt{ width: 140px; background: #f7f7f7; text-align: center; } .official_shop_list dd{ width: calc(100% - 140px); background: #fff; } .official_shop_list dd ul{ width: 100%; } .official_shop_list dd ul li{ width: calc(100% / 6); text-align: center; } .official_shop_list dd ul li span.official_shop_img_logo{ display: block; } /* =============================================== ▼正規取引店のご案内 =============================================== */ .transaction_block{ width: 100%; background: #fff; } .transaction_block .frame{ max-width: 100%; padding-right: 0; padding-left: 0; } .transaction_map{ width: 50%; background: #dae9f1; padding: 54px 36px; } .transaction_map_wrap{ width: 100%; max-width: 544px; margin: 0 0 0 auto; } .map_image{ width: 284px; } .map_list{ width: calc(100% - 284px); } .map_list ul li{ text-align: center; margin-bottom: 20px; } .map_list ul li:last-of-type{ margin-bottom: 0; } .map_list ul li a{ display: block; width: 100%; max-width: 240px; margin: 0 auto; padding: 7px 0; font-weight: bold; letter-spacing: -0.1em; color: #fff; background: #000; border-radius: 20px; } .map_list ul li#area01 a{ background: #0a8fa9; } .map_list ul li#area02 a{ background: #fec867; } .map_list ul li#area03 a{ background: #f67e33; } .map_list ul li#area04 a{ background: #bb034b; } .map_list ul li#area05 a{ background: #4eb333; } .transaction_shop{ width: 50%; background: #badaeb; padding: 54px 36px; } .transaction_shop_wrap{ width: 100%; max-width: 544px; } .transaction_shop ul{ width: 100%; padding-top: 24px; } .transaction_shop ul li{ width: 172px; border: 1px solid #adb4b7; background: #fff; margin-top: 14px; margin-right: 14px; } .transaction_shop ul li:nth-of-type(1), .transaction_shop ul li:nth-of-type(2), .transaction_shop ul li:nth-of-type(3){ margin-top: 0; } .transaction_shop ul li:nth-of-type(3n){ margin-right: 0; } .transaction_shop ul li a{ display: block; } /* =============================================== ▼関連商品 =============================================== */ .related_block{ width: 100%; margin-top: 55px; } /* =============================================== ▼TOP/サイド共通絞り込み検索 =============================================== */ .refines_search_form label{ position: relative; cursor: pointer; border: 1px solid #cdcdcd; background: #fff; padding: 10px 5px 8px 5px; width: 170px; margin-right: 5px; display: block; transition: 0.3s; } .refines_search_form.side_refines_form label{ border: none; padding: 3px 0; margin-right: 0; margin-top: 20px; width: 100%; } .refines_search_form.side_refines_form label:first-of-type{ margin-top: 0; } .refines_search_form label.is-checked{ background: #e2edf2; } .refines_search_form.side_refines_form label.is-checked{ background: #fff; } .refines_search_form label:last-of-type{ margin-right: 0; } .refines_search_form label input[type="checkbox"]{ display: none; } .refines_search_form label input[type="radio"]{ display: none; } .refines_search_form label .check_square{ vertical-align: top; display: inline-block; width: 20px; height: 20px; position: absolute; top: 6px; left: 4px; background: #fff; } .refines_search_form.side_refines_form label .check_square{ top: 0; left: 0; } .refines_search_form label .check_square:before{ content: ""; width: 20px; height: 20px; border: 1px solid #cdcdcd; display: block; } .refines_search_form label .check_square .check_icon{ width: 0px; height: 20px; position: absolute; overflow: hidden; -webkit-transition: 0.4s; transition: 0.4s; top: 1px; left: 1px; } .refines_search_form label .check_square .check_icon:before{ border-bottom: 2px solid #56b5db; border-left: 2px solid #56b5db; content: ""; position: absolute; top: 4px; left: 2px; width: 14px; height: 7px; z-index: 1; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: 0.4s; transition: 0.4s; display: block; } .refines_search_form label input[type="checkbox"]:checked+.check_square .check_icon{ width: 20px; } .refines_search_form label .check_text{ display: inline-block; vertical-align: top; position: relative; padding-left: 30px; font-size: 100%; letter-spacing: normal; } .LC_Page_Index .refines_search_form label .check_text{ letter-spacing: -0.1em; } .refines_search_form .refineColor label .check_text{ padding-left: 50px; } .refines_search_form.side_refines_form .side_refine_color label .check_text{ padding-left: 50px; } .refines_search_form .refineColor dd label{ margin-top: 10px; } .refines_search_form .refineColor dd label:nth-of-type(1), .refines_search_form .refineColor dd label:nth-of-type(2), .refines_search_form .refineColor dd label:nth-of-type(3), .refines_search_form .refineColor dd label:nth-of-type(4), .refines_search_form .refineColor dd label:nth-of-type(5){ margin-top: 0; } .refines_search_form .refineLineup dd label{ margin-top: 10px; } .refines_search_form .refineLineup dd label:nth-of-type(1), .refines_search_form .refineLineup dd label:nth-of-type(2), .refines_search_form .refineLineup dd label:nth-of-type(3), .refines_search_form .refineLineup dd label:nth-of-type(4), .refines_search_form .refineLineup dd label:nth-of-type(5){ margin-top: 0; } .refines_search_form .refineLineup dd label:nth-of-type(5n){ margin-right: 0; } .refines_search_form label input[type="checkbox"]:checked+.check_square.check_icon{ display: none; } .refines_search_form label .check_circle{ vertical-align: top; display: inline-block; width: 20px; height: 20px; position: absolute; top: 6px; left: 4px; background: #fff; border-radius: 50%; } .refines_search_form.side_refines_form label .check_circle{ top: 0; left: 0; } .refines_search_form label .check_circle:before{ content: ""; width: 20px; height: 20px; border: 1px solid #cdcdcd; display: block; border-radius: 50%; } .refines_search_form label .check_circle .check_icon{ width: 0px; height: 20px; position: absolute; overflow: hidden; -webkit-transition: 0.4s; transition: 0.4s; top: 1px; left: 1px; } .refines_search_form label .check_circle .check_icon:before{ content: ""; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; background: #56b5db; border-radius: 50%; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1; display: block; } .refines_search_form label input[type="radio"]:checked+.check_circle .check_icon{ width: 20px; } .refines_search_form label input[type="radio"]:checked+.check_circle.check_icon{ display: none; } .area01, .area02, .area03, .area04, .area05{ opacity: 1; } .area01:hover, .area02:hover, .area03:hover, .area04:hover, .area05:hover{ opacity: 0.7 !important; }