From e332637fa75d4552d0ab589195bf0cced68ab3e9 Mon Sep 17 00:00:00 2001 From: Seasoft Date: Wed, 20 Dec 2023 18:56:59 +0900 Subject: [PATCH 1/3] CSS #783 #784 (PC) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CSS Nesting Module を使った実装 #783 - CSS ファイルをまとめる #784 ``` cat \ html/user_data/packages/default/css/reset.css \ html/user_data/packages/default/css/common.css \ html/user_data/packages/default/css/contents.css \ html/user_data/packages/default/css/table.css \ html/user_data/packages/default/css/bloc.css \ html/user_data/packages/default/css/bloc_alpha.css \ html/user_data/packages/default/css/popup.css \ html/user_data/packages/default/css/print.css \ | sass-convert --indent=4 --from=css --to=scss \ > html/user_data/packages/default/style.css ``` --- .../Smarty/templates/default/popup_header.tpl | 2 +- data/Smarty/templates/default/site_frame.tpl | 2 +- html/user_data/packages/default/css/bloc.css | 421 ---- .../packages/default/css/bloc_alpha.css | 88 - .../user_data/packages/default/css/common.css | 414 ---- .../packages/default/css/contents.css | 731 ------ .../user_data/packages/default/css/import.css | 14 - html/user_data/packages/default/css/popup.css | 111 - html/user_data/packages/default/css/print.css | 11 - html/user_data/packages/default/css/reset.css | 99 - html/user_data/packages/default/css/table.css | 73 - html/user_data/packages/default/style.css | 2148 +++++++++++++++++ 12 files changed, 2150 insertions(+), 1964 deletions(-) delete mode 100644 html/user_data/packages/default/css/bloc.css delete mode 100644 html/user_data/packages/default/css/bloc_alpha.css delete mode 100644 html/user_data/packages/default/css/common.css delete mode 100644 html/user_data/packages/default/css/contents.css delete mode 100644 html/user_data/packages/default/css/import.css delete mode 100644 html/user_data/packages/default/css/popup.css delete mode 100644 html/user_data/packages/default/css/print.css delete mode 100644 html/user_data/packages/default/css/reset.css delete mode 100644 html/user_data/packages/default/css/table.css create mode 100644 html/user_data/packages/default/style.css diff --git a/data/Smarty/templates/default/popup_header.tpl b/data/Smarty/templates/default/popup_header.tpl index 8196da768d..e10727355f 100644 --- a/data/Smarty/templates/default/popup_header.tpl +++ b/data/Smarty/templates/default/popup_header.tpl @@ -26,7 +26,7 @@ - + <!--{$arrSiteInfo.shop_name}-->/<!--{$subtitle|h}--> diff --git a/data/Smarty/templates/default/site_frame.tpl b/data/Smarty/templates/default/site_frame.tpl index df9bc2bfc2..ba8aab6534 100644 --- a/data/Smarty/templates/default/site_frame.tpl +++ b/data/Smarty/templates/default/site_frame.tpl @@ -41,7 +41,7 @@ - + diff --git a/html/user_data/packages/default/css/bloc.css b/html/user_data/packages/default/css/bloc.css deleted file mode 100644 index 67c19f22f4..0000000000 --- a/html/user_data/packages/default/css/bloc.css +++ /dev/null @@ -1,421 +0,0 @@ -@charset "utf-8"; - -/************************************************ - ブロック用 -************************************************ */ -/*** 目次 *** - -▼ブロック共通 -リスト -タイトル -ヘッダー上、フッター下のブロックエリア - -▼各機能ブロックの指定 --新着情報 --現在のカゴの中 --カテゴリ --ガイドリンク --ログイン（サイド用） --検索 --カレンダー --おすすめ商品 - * 商品詳細のオススメ商品 [whobought_area] -*/ - - -/* ============================================== -ブロック共通 - * #container から指定することで、ヘッダー・フッターには適用していない。 -/* ============================================= */ -.side_column { - overflow-x: hidden; /* IE6 表示乱れ防止 */ -} -.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 15px 10px; /* #container の背景色を欠けさせないため敢えて padding */ -} -#container #main_column .block_outer { - padding: 0 0 20px; -} -#container .side_column .block_outer { - padding: 0 7% 10px; -} - -/* リスト ------------------------------------------------ */ -/* ログイン 検索条件 */ -#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: 3px; - 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: 5px; - float: right; - width: 300px; - vertical-align: bottom; - text-align: left; -} -#container div#login_area .block_body .mini { - margin-top: 5px; - letter-spacing: -0.01em; -} - - -/* =============================================== -▼検索 -=============================================== */ -#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; -} diff --git a/html/user_data/packages/default/css/bloc_alpha.css b/html/user_data/packages/default/css/bloc_alpha.css deleted file mode 100644 index 25087c6ccd..0000000000 --- a/html/user_data/packages/default/css/bloc_alpha.css +++ /dev/null @@ -1,88 +0,0 @@ -@charset "utf-8"; - -/************************************************ - インヘッダーブロック -************************************************ */ -#headerInternalColumn { - margin-top: 5px; - float: right; - width: 520px; - height: 35px; -} - -/* ログイン（ヘッダー用） ------------------------------------------------ */ -#header_login_area { - padding: 0 10px; - border: solid 1px #ffc979; - height: 30px; - background: #fef3d3; - letter-spacing: -0.075em; -} -#header_login_area ul.formlist { - margin-top: 5px; -} -#header_login_area ul.formlist li { - float: left; -} -#header_login_area ul.formlist li.mail { - padding-left: 28px; - width: 155px; - background: url("../img/common/ico_arrow_login.gif") no-repeat left; - font-size: 90%; -} -#header_login_area ul.formlist li.password { - padding-right: 5px; -} -#header_login_area ul.formlist li.login_memory { - padding-right: 5px; - font-size: 90%; -} -#header_login_area ul.formlist li.forgot { - margin-top: 3px; - padding-right: 5px; - font-size: 90%; -} -#header_login_area ul.formlist li.btn { - padding-right: 5px; - width: 53px; -} -#header_login_area p.btn { - height: 20px; - padding: 5px 0; - vertical-align: middle; -} -#header_login_area p.btn input[type=image] { - vertical-align: middle; -} - -/* *********************************************** -追加ブロック -************************************************ */ -/* 共通 ------------------------------------------------ */ -#container .block_outer #banner_area .block_body { - border: none; -} - -/* 【メイン】バナーエリア_02 ------------------------------------------------ */ -#main_column .block_outer #banner_area .block_body ul { - width: 100%; -} -#main_column .block_outer #banner_area .block_body ul li { - float: left; -} -#main_column .block_outer #banner_area .block_body ul li.sub_01 { - padding-right: 8px; -} - -/* 【サイド】バナーエリア_01 ------------------------------------------------ */ -/* 【サイド】バナーエリア_02 ------------------------------------------------ */ -#leftcolumn .block_outer #banner_area .block_body ul li, -#rightcolumn .block_outer #banner_area .block_body ul li { - margin-bottom: 8px; -} - diff --git a/html/user_data/packages/default/css/common.css b/html/user_data/packages/default/css/common.css deleted file mode 100644 index c5826efc01..0000000000 --- a/html/user_data/packages/default/css/common.css +++ /dev/null @@ -1,414 +0,0 @@ -@charset "utf-8"; - -/************************************************ - 共通設定 -************************************************ */ -body { - color: #666; - font-family: Verdana,Arial,Helvetica,sans-serif; - background-color: #f5f5f5; - font-size: 72.5%; - line-height: 150%; - letter-spacing: 0.1em; -} - -/* 写真 */ -img.picture { - border: 1px solid #ccc; -} - - -/* ============================================== - フレーム -=============================================== */ -/* 全体を包括 */ -.frame_outer { - margin: 0 auto; - width: 100%; - text-align: center; -} - -/* コンテンツ */ -#container { - margin: 0 auto; - padding: 0 0 30px; - width: 980px; - background: #fff; - text-align: left; -} - - -/* ============================================== - カラム指定 -=============================================== */ - -/* メイン部 ------------------------------------------------ */ -#main_column { - padding: 10px 0 0; -} - -/* 1カラム時 */ -#main_column.colnum1 { - margin: 0 auto; - width: 80%; -} - -/* 2カラム時 (共通) */ -#main_column.colnum2 { - width: 78%; -} - -/* 2カラム時 (メイン部が左) */ -#main_column.colnum2.left { - padding-left: 1.5%; - float: left; -} - -/* 2カラム時 (メイン部が右) */ -#main_column.colnum2.right { - padding-right: 1.5%; - float: right; -} - -/* 3カラム時 */ -#main_column.colnum3 { - padding-left: 0.5%; - width: 59%; - float: left; -} - -/* サイドカラム ------------------------------------------------ */ -.side_column { - padding: 10px 0 0; -} -#leftcolumn { - float: left; - width: 20%; -} -#rightcolumn { - float: right; - width: 20%; -} - -/* 他 ------------------------------------------------ */ -/* ヘッダーとフッターの上下 */ -#topcolumn, -#bottomcolumn, -#footerbottomcolumn { - margin: 0px; - background: #fff; - text-align: left; - clear: both; -} - -/* 下層コンテンツ */ -#undercolumn { - width: 100%; - margin: 0 0 30px 0; -} - - -/* ============================================== - ユーティリティ -=============================================== */ -/* フロート回り込み解除 ------------------------------------------------ */ -.clearfix:after { - display: block; - clear: both; - height: 0px; - line-height: 0px; - visibility: hidden; - content: "."; -} -.clearfix { - display: block; /* for IE8 */ -} -.clear { - clear: both; -} - -/* リンク指定 ------------------------------------------------ */ -a:link, -a:visited { - color: #39c; - text-decoration: none; -} -a:link:hover, -a[href]:hover { - color: #f60; - text-decoration: underline; -} - - -/* フォント ------------------------------------------------ */ -h1, -h2, -h3, -h4, -h5 { - font-size: 100%; - line-height: 150%; -} -.sale_price { - color: #f00; -} -.normal_price { - font-size: 90%; -} -.point { - color: #f00; - font-weight: bold; -} -.user_name { - font-weight: bold; -} -.recommend_level { - color: #ecbd00; -} - -.attention { - color: #f00; -} -.attentionSt { - color: #f00; - font-weight: bold; -} -.st { - font-weight: bold; -} -.mini { - font-size: 90%; -} - - -/* 行揃え ------------------------------------------------ */ -.alignC { - text-align: center; -} -.alignR { - text-align: right; -} -.alignL { - text-align: left; -} -.pricetd em { - font-weight: bold; -} - - -/* フォーム ------------------------------------------------ */ -select { - border: solid 1px #ccc; -} -input[type='text'], -input[type='password'] { - border: solid 1px #ccc; - padding: 2px; -} - -.box40 { - width: 40px; -} -.box60 { - width: 60px; -} -.box100 { - width: 100px; -} -.box120 { - width: 120px; -} -.box140 { - width: 140px; -} -.box145 { - width: 145px; -} -.box150 { - width: 150px; -} -.box240 { - width: 240px; -} -.box300 { - width: 300px; -} -.box320 { - width: 320px; -} -.box350 { - width: 350px; -} -.box380 { - width: 380px; -} - -/* フォームが縦に重なり合う場合に併用する余白 */ -.top { /* FIXME 簡素な単語は、単独で、込み入った指定に使用しない */ - margin-bottom: 5px; -} - - -/* タイトル ------------------------------------------------ */ -h2.title { - margin-bottom: 10px; - padding: 8px; - border-top: solid 1px #ebeced; - color: #f60; - background: url("../img/background/bg_tit_sub_01.jpg") repeat-x left bottom; - background-color: #fef3d8; - font-size: 170%; -} - -#main_column .sub_area h3, -#undercolumn_login .login_area h3, -#undercolumn_shopping h3, -#mypagecolumn h3, -#undercolumn_cart h3 { - margin: 0 0 10px 0; - padding: 5px 0 10px; - color: #f60; - background: url("../img/background/line_01.gif") repeat-x left bottom; - font-size: 120%; -} - -div#undercolumn_login .login_area h4 { - padding-left: 15px; - background: url("../img/icon/ico_arrow_05.gif") no-repeat left; -} - - -/* ============================================== - ヘッダー -=============================================== */ -/* レイアウト ------------------------------------------------ */ -#header_wrap { - border-top: solid 3px #f90; - min-height: 82px; - background: url("../img/common/bg_header.gif") repeat-x bottom #fffaf0; -} -#header { - margin: auto; - width: 980px; -} -#header_utility { - float: right; - width: 580px; -} -#errorHeader { - color: #F00; - font-weight: bold; - font-size: 12px; - background-color: #FEB; - text-align: center; - padding: 5px; -} - - -/* ロゴ ------------------------------------------------ */ -#logo_area { - padding-left: 10px; - float: left; - width: 390px; - text-align: left; -} -#site_description { - font-size: 90%; -} - - -/* ヘッダーナビ ------------------------------------------------ */ -div#header_navi { - float: right; - width: 409px; - height: 38px; -} -div#header_navi ul li { - display: block; - float: left; -} -div#header_navi ul li.mypage, -div#header_navi ul li.entry { - margin-top: 6px; -} - - -/* ============================================== - フッター -=============================================== */ -#footer_wrap { - margin: 0 auto; - width: 980px; - height: 80px; - background: #fff; -} -#footer { - margin: auto; - padding-top: 10px; - border-top: solid 1px #ccc; - width: 950px; -} -#pagetop { - width: 210px; - float: right; - text-align: right; -} -#copyright { - width: 740px; - float: left; - text-align: left; - font-size: 97%; -} - - -/* ============================================== - パーツ -=============================================== */ -/* ボタン ------------------------------------------------ */ -.btn_area { - margin-top: 10px; - width: 100%; - text-align: center; -} - -.btn_area li { - padding-right: 10px; - display: inline; -} - - -/* 完了メッセージ ------------------------------------------------ */ -div#complete_area { - margin-bottom: 20px; -} -div#complete_area .message, -div#undercolumn_entry .message { - margin-bottom: 20px; - line-height: 150%; - font-weight: bold; - font-size: 120%; -} -div#complete_area .shop_information { - margin-top: 40px; - padding: 20px 0 0 0; - border-top: solid 1px #ccc; -} -div#complete_area .shop_information .name { - margin-bottom: 10px; - font-weight: bold; - font-size: 140%; -} diff --git a/html/user_data/packages/default/css/contents.css b/html/user_data/packages/default/css/contents.css deleted file mode 100644 index 63ace223f9..0000000000 --- a/html/user_data/packages/default/css/contents.css +++ /dev/null @@ -1,731 +0,0 @@ -@charset "utf-8"; - -/************************************************ - 各ページコンテンツ用 -************************************************ */ -/* ============================================== -▼TOP -=============================================== */ -/* メインイメージ ------------------------------------------------ */ -#main_image { - margin-bottom: 10px; - text-align: center; -} - -/* ============================================== -▼下層 -=============================================== */ -/* ============================================== -▼ガイド -=============================================== */ -/* ◎◎について ------------------------------------------------ */ -div#undercolumn_aboutus { -} - -/* 特定商取引法 ------------------------------------------------ */ -div#undercolumn_order { -} - -/* お問い合わせ ------------------------------------------------ */ -div#undercolumn_contact { - margin: 0 auto; - width: 100%; -} - -.zipimg img { - vertical-align: middle; -} - - -/* ============================================== -▼MYページ -=============================================== */ -/* 共通設定 ------------------------------------------------ */ -div#mypagecolumn { - width: 100%; -} - -div#mynavi_area { - width: 100%; -} - -div#mycontents_area { - width: 100%; -} -div#mynavi_area .mynavi_list { - margin-bottom: 20px; - width: 100%; -} -div#mynavi_area .mynavi_list li { - margin: 0 15px 5px 0; - padding-left: 15px; - float: left; - background: url('../img/icon/ico_arrow_01.gif') no-repeat left ; - font-size: 120%; -} - -div#mynavi_area div.point_announce { - margin-bottom: 30px; - padding: 10px; - border: solid 1px #ffcc62; - background-color: #fffaf0; -} -div#mynavi_area div.point_announce p { - padding-left: 20px; - background: url('../img/icon/ico_point.gif') no-repeat left ; -} - -div#mycontents_area p.inforamtion { - margin-bottom: 20px; -} - -div#mypagecolumn h4 { - margin: 10px auto; - border-bottom: 1px solid #999; - text-align: left; - font-size: 120%; -} - - -/* 購入履歴一覧/詳細 ------------------------------------------------ */ -div#mycontents_area div.mycondition_area { - margin: 0 auto 20px 0; - padding: 10px; - border: solid 1px #ccc; - width: 97%; - background: #f9f9f9; -} -div#mycontents_area div.mycondition_area p { - float: left; -} -div#mycontents_area div.mycondition_area .btn { - width: 160px; - margin-top: 15px; - float: right; -} -.add_address { - margin-bottom: 20px; -} - - -/* 会員登録内容変更/退会 ------------------------------------------------ */ -div#mycontents_area .message_area { - margin: 30px auto; - padding: 30px; - border: 1px solid #ccc; - text-align: center; -} - -div#mycontents_area .message_area p { - margin-bottom: 20px; -} - -/* ============================================== -▼会員登録 -=============================================== */ -div#undercolumn_entry { - width: 100%; -} - -div#undercolumn_entry .kiyaku_text { - margin: 20px auto; - padding: 10px; - border: solid 1px #ccc; - width: 94%; - background: #fff; -} - - -/* ============================================== -▼ログイン -=============================================== */ -div#undercolumn_login { - margin: 0 auto; - width: 100%; -} - -div#undercolumn_login .login_area { - margin-bottom: 30px; -} - -div#undercolumn_login .login_area .inputbox { - margin: 15px auto 15px auto; - padding: 15px 20px 10px 20px; - background: #f0f0f0; -} - -div#undercolumn_login .login_area .inputbox .btn_area { - margin-top: 0; -} - - -/* ============================================== -▼エラー -=============================================== */ -div#undercolumn_error .message_area { - width: 80%; - margin: 30px auto; - padding: 30px; - border: 1px solid #ccc; - text-align: center; -} - -div#undercolumn_error .message_area .error { - padding: 120px 0; -} - - -/* ============================================== -▼商品一覧 -=============================================== */ -/* ページ送り ------------------------------------------------ */ -.pagenumber_area { - padding-bottom: 10px; - background: url("../img/background/line_dot_01.gif") repeat-x bottom ; -} -.pagecond_area { - margin-bottom: 20px; - padding: 10px; -} -.pagenumber_area { - margin: 20px 0; -} -.pagecond_area { - border: 1px solid #ccc; -} -.pagenumber_area .navi { - width: 100%; - text-align: left; -} -.pagenumber_area .navi li { - display: inline; -} -.pagenumber_area .change { - float: right; - text-align: right; - white-space: nowrap; -} - - -/* レイアウト ------------------------------------------------ */ -div.list_area { - padding: 0 0 30px 0; - width: 100%; - overflow: auto; -} - -div.listphoto { - float: left; -} - -/* メインカラム用 1カラム時*/ -#main_column.colnum1 div.listrightbloc { - float: right; - width: 74%; -} - -/* メインカラム用 2カラム時*/ -#main_column.colnum2 div.listrightbloc { - float: right; - width: 80%; -} - -/* メインカラム用 3カラム時*/ -#main_column.colnum3 div.listrightbloc { - float: right; - width: 74%; -} - - -/* 商品情報 各種設定 ------------------------------------------------ */ -/* 商品ステータス */ -div.listrightbloc ul.status_icon { - margin-bottom: 10px; - width: 100%; -} -div.listrightbloc ul.status_icon li { - margin-right: 5px; - float: left; -} - -/* 商品名 */ -div.listrightbloc h3 { - font-weight: bold; - font-size: 120%; -} - -/* コメント */ -div.listrightbloc .listcomment { - margin: 0 0 10px 0; - text-align: left; -} - -/* 商品詳細を見る */ -div.listrightbloc .detail_btn { - margin-bottom: 20px; -} - -/* 価格 */ -div.listrightbloc .pricebox { - margin: 0 0 10px 0; -} - -/* 買い物カゴ */ -div.listrightbloc .cart_area { - padding: 10px; - border: 1px solid #cef0f4; - background-color: #ecf5ff; - width: 94%; -} - -/* 規格 */ -div.listrightbloc .classlist { - margin-bottom: 10px; - padding-bottom: 10px; - background: url("../img/background/line_dot_02.gif") repeat-x bottom ; -} -div.listrightbloc dl { - width: 100%; -} -div.listrightbloc dt { - display: inline-block; - vertical-align: top; -} -div.listrightbloc dd { - padding-bottom: 10px; - display: inline-block; -} -div.listrightbloc dd p.attention { - margin-top: 5px; -} - -/* カゴに入れる */ -div.listrightbloc .cartin { - margin: 0; - float :right; -} -div.listrightbloc .cartin .quantity { - padding: 3px 10px 0 0; - width: 150px; - float :left; - text-align: right; -} -div.listrightbloc .cartin .quantity .box { - width: 70px; -} -div.listrightbloc .cartin_btn { - width: 160px; - float :left; -} - - -/* ============================================== -▼商品詳細 -=============================================== */ -/* レイアウト - - tplファイルのマークアップが同じ項目 - * 1カラム時 - * 2カラム時 - * 3カラム時 - ------------------------------------------------ */ -#detailarea, -.sub_area { - margin-bottom: 20px; - width: 100%; -} - -/* レイアウト ------------------------------------------------ */ -/* 1カラム用 */ -#main_column.colnum1 div#detailphotobloc { - width: 37%; - float: left; -} -#main_column.colnum1 #detailrightbloc { - width: 63%; - float: right; -} -#main_column.colnum1 div.subtext { - margin-bottom: 20px; - float: left; - width: 69%; -} -#main_column.colnum1 div.subphotoimg { - float: right; - width: 25%; - text-align: right; -} -#main_column.colnum1 p.subtext { - margin-bottom: 20px; -} - -/* 2カラム用 */ -#main_column.colnum2 div#detailphotobloc { - float: left; - width: 37%; -} -#main_column.colnum2 #detailrightbloc { - float: right; - width: 63%; -} -#main_column.colnum2 div.subtext { - margin-bottom: 20px; - float: left; - width: 73%; -} -#main_column.colnum2 p.subtext { - margin-bottom: 20px; -} -#main_column.colnum2 div.subphotoimg { - float: right; - width: 25%; - text-align: right; -} - -/* 3カラム用 */ -#main_column.colnum3 div#detailphotobloc { - float: left; - width: 49%; -} -#main_column.colnum3 #detailrightbloc { - float: right; - width: 50%; -} -#main_column.colnum3 div.subtext { - margin-bottom: 20px; - float: left; - width: 63%; -} -#main_column.colnum3 p.subtext { - margin-bottom: 20px; -} -#main_column.colnum3 div.subphotoimg { - float: right; - width: 35%; - text-align: right; -} - -/* 商品情報 各種設定 ------------------------------------------------ */ -#detailrightbloc h2 { - margin: 0 0 10px 0; - padding: 0 0 15px 0; - color: #666; - background: url("../img/background/line_dot_01.gif") repeat-x bottom ; - font-weight: bold; - font-size: 160%; -} -#detailrightbloc .point, -#detailrightbloc .relative_cat { - margin: 0 0 10px 0; - padding: 0 0 10px 0; - background: url("../img/background/line_dot_01.gif") repeat-x bottom ; -} -#detailrightbloc .main_comment { - margin-bottom: 20px; -} - -/* 商品コード */ -#detailrightbloc .product_code dt, -#detailrightbloc .product_code dd { - display: inline; -} - -/* 商品ステータス */ -#detailrightbloc ul.status_icon { - margin-bottom: 10px; - width: 100%; -} -#detailrightbloc ul.status_icon li { - margin-right: 5px; - margin-bottom: 3px; - float: left; -} - -/* 通常価格 */ -#detailrightbloc .normal_price dt, -#detailrightbloc .normal_price dd { - display: inline; -} - -/* 販売価格 */ -#detailrightbloc .sale_price dt, -#detailrightbloc .sale_price dd { - display: inline; -} - -/* ポイント */ -#detailrightbloc .point dt, -#detailrightbloc .point dd { - display: inline; -} - -/* 規格 */ -#detailrightbloc div.classlist { - margin-bottom: 10px; - padding-bottom: 10px; - width: 100%; - background: url("../img/background/line_dot_02.gif") repeat-x bottom ; -} -#detailrightbloc .classlist { - margin-bottom: 5px; -} -#detailrightbloc ul { - margin-bottom: 10px; - width: 100%; -} -#detailrightbloc ul li { - vertical-align: top; - float: left; -} - -/* メーカー */ -#detailrightbloc .maker dt, -#detailrightbloc .maker dd { - display: inline; -} - -/* メーカーURL */ -#detailrightbloc .comment1 dt, -#detailrightbloc .comment1 dd { - display: inline; -} - -/* 関連カテゴリ */ -#detailrightbloc .relative_cat dd { - margin-left: 1em; -} - -/* 買い物カゴ */ -#detailrightbloc .cart_area { - padding: 10px; - background-color: #ecf5ff; - border: 1px solid #cef0f4; -} -#detailrightbloc .quantity dt, -#detailrightbloc .quantity dd { - display: inline; -} -#detailrightbloc .cartin { - text-align: center; -} -#detailrightbloc .cartin_btn { - text-align: center; -} -#detailrightbloc .favorite_btn { - text-align: center; - margin-top: 10px; -} - - -/* お客様の声 ------------------------------------------------ */ -div#customervoice_area { - clear: both; - padding: 35px 0 0 0; -} - -div#customervoice_area h2 { - margin-bottom: 20px; - padding: 6px 0 8px 10px; - border-top: solid 1px #f90; - background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom; -} - -div#customervoice_area .review_bloc { - margin-bottom: 20px; - padding: 10px; - background-color: #f6f6f6; -} - -div#customervoice_area .review_bloc p { - padding-top: 3px; - margin-right: 10px; - float: left; -} - -div#customervoice_area .review_bloc .review_btn { - float: right; - width: 160px; -} - -div#customervoice_area ul li { - padding-bottom: 15px; - margin-bottom: 15px; - background: url("../img/background/line_dot_01.gif") repeat-x bottom ; -} - -div#customervoice_area .voicetitle { - margin-bottom: 5px; - color: #333; - font-weight: bold; -} - -div#customervoice_area .voicedate { - margin-bottom: 10px; -} - - -/* 関連商品（商品部分はbloc.cssのおすすめ商品と共通） ------------------------------------------------ */ -div#whobought_area { - clear: both; - padding: 35px 0 0 0; -} - -div#whobought_area h2 { - border-top: solid 1px #f90; - background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom; - padding: 5px 0 8px 10px; - font-size: 14px; -} - - -/* *********************************************** -▼カートの中 -/*********************************************** */ -/* 現在のカゴの中 ------------------------------------------------ */ -div#undercolumn_cart .point_announce { - padding: 20px; - margin-bottom: 20px; - border: solid 1px #ffcc62; - background: #fffaf0; - font-size: 120%; - text-align: center; - line-height: 140%; -} -div#undercolumn_cart .totalmoney_area { - margin-bottom: 20px; -} - -div#undercolumn_cart p { - margin: 10px 5px; -} - -div#undercolumn ul#quantity_level li { - padding: 3px; - display: inline; -} - -div#undercolumn .empty { - text-align: left; -} - -div.form_area { - margin-bottom: 30px; -} - - -/* お客様情報入力 ------------------------------------------------ */ -div#undercolumn_customer { -} - -.flow_area { - margin: 0 0 20px 0; -} - -div#undercolumn_customer th em { - color: #000; - font-weight: bold; -} - - -/* お支払い方法・お届け時間等の指定 ------------------------------------------------ */ -div#undercolumn_shopping .pay_area { - margin: 0 auto 30px; - width: 100%; -} -div#undercolumn_shopping .pay_area02 { - margin: 40px auto 30px auto; -} -div#undercolumn_shopping .pay_area02 .txtarea { - margin: 5px 0 0 0; - padding: 2px; - border: 1px solid #ccc; - width: 99%; - height: 150px; -} -div#undercolumn_shopping .pay_area02 .select-msg { - margin-bottom: 10px; -} - -div#undercolumn_shopping .point_area { - margin: 40px auto 0 auto; -} - -div#undercolumn_shopping .point_area .point_announce { - padding: 20px; - border: 1px solid #ccc; -} - -div#undercolumn_shopping .point_area p { - margin-bottom: 20px; -} - -div#undercolumn_shopping .point_area .point_announce li { - margin-bottom: 5px; -} - - -/* お届け先の指定 ------------------------------------------------ */ -#address_area { - margin-bottom: 10px; - width: 100%; -} - -#address_area .information { - width: 65%; - float: left; -} - -#undercolumn_shopping .information { - margin-bottom: 15px; -} - -#address_area .add_multiple { - padding: 15px 10px; - border: 1px solid #ffcc62; - float: right; - width: 30%; - color: #555; - background: #fffaf0; - text-align: center; - font-weight: bold; -} - -#address_area .add_multiple p { - margin-bottom: 10px; -} - -#address_area p.addbtn { - font-weight: bold; - font-size: 10px; -} - - -/* ============================================== -▼検索結果 -=============================================== */ -p.condition_area { - margin: 0 auto; - padding: 5px; - border: solid 1px #333; - width: 566px; -} - diff --git a/html/user_data/packages/default/css/import.css b/html/user_data/packages/default/css/import.css deleted file mode 100644 index 074fa3e4df..0000000000 --- a/html/user_data/packages/default/css/import.css +++ /dev/null @@ -1,14 +0,0 @@ -@charset "utf-8"; - -/************************************************ - import css -************************************************ */ -@import url("./reset.css"); -@import url("./common.css"); -@import url("./contents.css"); -@import url("./table.css"); -@import url("./bloc.css"); -@import url("./bloc_alpha.css"); -@import url("./popup.css"); - -@import url("./print.css"); diff --git a/html/user_data/packages/default/css/popup.css b/html/user_data/packages/default/css/popup.css deleted file mode 100644 index 7d1d5ac207..0000000000 --- a/html/user_data/packages/default/css/popup.css +++ /dev/null @@ -1,111 +0,0 @@ -@charset "utf-8"; - -/************************************************ - ポップアップウィンドウ -************************************************ */ -/* 共通 ------------------------------------------------ */ -div#windowcolumn { - border-top: solid 3px #f90; - width: 560px; - height: 100%; - margin: 15px 15px 0 15px; - background: #fff; -} - -div#windowcolumn h2 { - margin-bottom: 10px; - padding: 8px; - border-top: solid 1px #ebeced; - color: #f60; - background: url("../img/background/bg_tit_sub_01.jpg") repeat-x left bottom; - background-color: #fef3d8; - font-size: 170%; -} - -div#window_area { - margin: 15px auto 0 auto; - padding-bottom: 20px; - width: 540px; - min-height: 300px; - height: auto !important; -} - -div#window_area p.information { - margin-bottom: 20px; -} - -div#window_area .message { - margin-bottom: 20px; - color: #f60; - line-height: 150%; - font-weight: bold; - font-size: 140%; -} -div#window_area table { - width: 540px; -} - -/* お客様の声の書き込み、新しいお届け先の追加・変更 ------------------------------------------------ */ -div#window_area #forgot { - margin: 0 auto; - padding: 20px; - width: 440px; - border: 1px solid #ccc; - text-align: left; -} -div#window_area #forgot .mailaddres { - margin-bottom: 10px; -} - -div#window_area #forgot p { - text-align: center; -} - - -/* 商品詳細拡大写真、カート拡大写真 ------------------------------------------------ */ -div#bigimage, -div#cartimage { - margin-top: 15px; - background-color: #fff; - text-align: center; -} - -div#bigimage img, -div#cartimage img { - padding: 10px; - background-color: #fff; -} - -/* 郵便番号検索 ------------------------------------------------ */ -div#zipsearchcolumn { - margin: 15px auto 0 auto; - border-top: 5px solid #ffa85c; - border-bottom: 5px solid #ffa85c; - width: 460px; - background-color: #fff; -} - -div#zipsearchcolumn h2 { - margin: 0 0 15px 0; - width: 460px; -} - -div#zipsearch_area { - margin: 15px auto 0 auto; - width: 460px; -} - -div#zipsearchcolumn .btn { - margin: 15px 0 30px 0; - text-align: center; -} - -div#zipsearch_area #completebox p { - padding: 60px 5px; - text-align: center; -} - diff --git a/html/user_data/packages/default/css/print.css b/html/user_data/packages/default/css/print.css deleted file mode 100644 index 700fe88029..0000000000 --- a/html/user_data/packages/default/css/print.css +++ /dev/null @@ -1,11 +0,0 @@ -@charset "utf-8"; - -/************************************************ - 印刷用 -************************************************ */ - -@media print { - body { - zoom: 75%; - } -} diff --git a/html/user_data/packages/default/css/reset.css b/html/user_data/packages/default/css/reset.css deleted file mode 100644 index 0e974c9bcc..0000000000 --- a/html/user_data/packages/default/css/reset.css +++ /dev/null @@ -1,99 +0,0 @@ -@charset "utf-8"; - -/************************************************ - ブラウザリセット -************************************************ */ -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -font, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td { - margin: 0; - padding: 0; - border: 0; -} - -table, -caption, -th, -td { - margin: 0; - padding: 0; - border: 0; - border-collapse : collapse ; - border-spacing: 0px; - empty-cells: show; - text-align: left; - font-weight: normal; -} - -a img, -iframe { - border: none; -} -ol, -ul, -li { - list-style: none; -} - -input, -textarea, -select, -button { - font-size: 100%; - font-family: inherit; -} diff --git a/html/user_data/packages/default/css/table.css b/html/user_data/packages/default/css/table.css deleted file mode 100644 index 3f5046dd8c..0000000000 --- a/html/user_data/packages/default/css/table.css +++ /dev/null @@ -1,73 +0,0 @@ -@charset "utf-8"; - -/************************************************ - tables -************************************************ */ -/* デフォルトテーブル ------------------------------------------------ */ -table { - margin: 15px auto 20px auto; - border-top: 1px solid #ccc; - border-left: 1px solid #ccc; - width: 100%; - border-collapse: collapse; - text-align: left; -} -table th { - padding: 8px; - border-right: 1px solid #ccc; - border-bottom: 1px solid #ccc; - color: #333; - background-color: #f0f0f0; - font-weight: normal; -} -table td { - padding: 8px; - border-right: 1px solid #ccc; - border-bottom: 1px solid #ccc; -} - -/* 見出し ------------------------------------------------ */ -div#undercolumn_shopping table th[scope=col] { - text-align: center; -} -div#undercolumn_shopping table.delivname th { - width: 155px; -} - -/* MYページ */ -div#mycontents_area table th { - text-align: left; -} -div#mycontents_area table th.alignR { - text-align: right; -} -div#mycontents_area table th.alignL { - text-align: left; -} -div#mycontents_area table th.alignC { - text-align: center; -} -div#mycontents_area table th.resulttd { - text-align: right; -} -div#mycontents_area table caption { - padding: 8px; - border-top: 1px solid #ccc; - border-right: 1px solid #ccc; - border-left: 1px solid #ccc; - color: #000; - background-color: #f0f0f0; - text-align: left; - font-weight: bold; -} - - -/* その他 ------------------------------------------------ */ -table select { - margin-bottom: 7px; - border: solid 1px #ccc; -} - diff --git a/html/user_data/packages/default/style.css b/html/user_data/packages/default/style.css new file mode 100644 index 0000000000..81fa73eb28 --- /dev/null +++ b/html/user_data/packages/default/style.css @@ -0,0 +1,2148 @@ +@charset "utf-8"; + +/************************************************ + ブラウザリセット +************************************************ */ + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; +} + +table, caption, th, td { + margin: 0; + padding: 0; + border: 0; + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + text-align: left; + font-weight: normal; +} + +a img, iframe { + border: none; +} + +ol, ul, li { + list-style: none; +} + +input, textarea, select, button { + font-size: 100%; + font-family: inherit; +} + +@charset "utf-8"; + +/************************************************ + 共通設定 +************************************************ */ + +body { + color: #666; + font-family: Verdana,Arial,Helvetica,sans-serif; + background-color: #f5f5f5; + font-size: 72.5%; + line-height: 150%; + letter-spacing: 0.1em; +} + +/* 写真 */ + +img.picture { + border: 1px solid #ccc; +} + +/* ============================================== + フレーム +=============================================== */ +/* 全体を包括 */ + +.frame_outer { + margin: 0 auto; + width: 100%; + text-align: center; +} + +/* コンテンツ */ + +#container { + margin: 0 auto; + padding: 0 0 30px; + width: 980px; + background: #fff; + text-align: left; +} + +/* ============================================== + カラム指定 +=============================================== */ + +/* メイン部 +----------------------------------------------- */ + +#main_column { + padding: 10px 0 0; + + &.colnum1 { + margin: 0 auto; + width: 80%; + } + + &.colnum2 { + width: 78%; + + &.left { + padding-left: 1.5%; + float: left; + } + + &.right { + padding-right: 1.5%; + float: right; + } + } + + &.colnum3 { + padding-left: 0.5%; + width: 59%; + float: left; + } +} + +/* 1カラム時 */ + +/* 2カラム時 (共通) */ + +/* 2カラム時 (メイン部が左) */ + +/* 2カラム時 (メイン部が右) */ + +/* 3カラム時 */ + +/* サイドカラム +----------------------------------------------- */ + +.side_column { + padding: 10px 0 0; +} + +#leftcolumn { + float: left; + width: 20%; +} + +#rightcolumn { + float: right; + width: 20%; +} + +/* 他 +----------------------------------------------- */ +/* ヘッダーとフッターの上下 */ + +#topcolumn, #bottomcolumn, #footerbottomcolumn { + margin: 0px; + background: #fff; + text-align: left; + clear: both; +} + +/* 下層コンテンツ */ + +#undercolumn { + width: 100%; + margin: 0 0 30px 0; +} + +/* ============================================== + ユーティリティ +=============================================== */ +/* フロート回り込み解除 +----------------------------------------------- */ + +.clearfix { + &:after { + display: block; + clear: both; + height: 0px; + line-height: 0px; + visibility: hidden; + content: "."; + } + + display: block; + + /* for IE8 */ +} + +.clear { + clear: both; +} + +/* リンク指定 +----------------------------------------------- */ + +a { + &:link, &:visited { + color: #39c; + text-decoration: none; + } + + &:link:hover, &[href]:hover { + color: #f60; + text-decoration: underline; + } +} + +/* フォント +----------------------------------------------- */ + +h1, h2, h3, h4, h5 { + font-size: 100%; + line-height: 150%; +} + +.sale_price { + color: #f00; +} + +.normal_price { + font-size: 90%; +} + +.point { + color: #f00; + font-weight: bold; +} + +.user_name { + font-weight: bold; +} + +.recommend_level { + color: #ecbd00; +} + +.attention { + color: #f00; +} + +.attentionSt { + color: #f00; + font-weight: bold; +} + +.st { + font-weight: bold; +} + +.mini { + font-size: 90%; +} + +/* 行揃え +----------------------------------------------- */ + +.alignC { + text-align: center; +} + +.alignR { + text-align: right; +} + +.alignL { + text-align: left; +} + +.pricetd em { + font-weight: bold; +} + +/* フォーム +----------------------------------------------- */ + +select { + border: solid 1px #ccc; +} + +input { + &[type='text'], &[type='password'] { + border: solid 1px #ccc; + padding: 2px; + } +} + +.box40 { + width: 40px; +} + +.box60 { + width: 60px; +} + +.box100 { + width: 100px; +} + +.box120 { + width: 120px; +} + +.box140 { + width: 140px; +} + +.box145 { + width: 145px; +} + +.box150 { + width: 150px; +} + +.box240 { + width: 240px; +} + +.box300 { + width: 300px; +} + +.box320 { + width: 320px; +} + +.box350 { + width: 350px; +} + +.box380 { + width: 380px; +} + +/* フォームが縦に重なり合う場合に併用する余白 */ + +.top { + /* FIXME 簡素な単語は、単独で、込み入った指定に使用しない */ + margin-bottom: 5px; +} + +/* タイトル +----------------------------------------------- */ + +h2.title { + margin-bottom: 10px; + padding: 8px; + border-top: solid 1px #ebeced; + color: #f60; + background: url("../img/background/bg_tit_sub_01.jpg") repeat-x left bottom; + background-color: #fef3d8; + font-size: 170%; +} + +#main_column .sub_area h3, #undercolumn_login .login_area h3, #undercolumn_shopping h3, #mypagecolumn h3, #undercolumn_cart h3 { + margin: 0 0 10px 0; + padding: 5px 0 10px; + color: #f60; + background: url("../img/background/line_01.gif") repeat-x left bottom; + font-size: 120%; +} + +div#undercolumn_login .login_area h4 { + padding-left: 15px; + background: url("../img/icon/ico_arrow_05.gif") no-repeat left; +} + +/* ============================================== + ヘッダー +=============================================== */ +/* レイアウト +----------------------------------------------- */ + +#header_wrap { + border-top: solid 3px #f90; + min-height: 82px; + background: url("../img/common/bg_header.gif") repeat-x bottom #fffaf0; +} + +#header { + margin: auto; + width: 980px; +} + +#header_utility { + float: right; + width: 580px; +} + +#errorHeader { + color: #F00; + font-weight: bold; + font-size: 12px; + background-color: #FEB; + text-align: center; + padding: 5px; +} + +/* ロゴ +----------------------------------------------- */ + +#logo_area { + padding-left: 10px; + float: left; + width: 390px; + text-align: left; +} + +#site_description { + font-size: 90%; +} + +/* ヘッダーナビ +----------------------------------------------- */ + +div#header_navi { + float: right; + width: 409px; + height: 38px; + + ul li { + display: block; + float: left; + + &.mypage, &.entry { + margin-top: 6px; + } + } +} + +/* ============================================== + フッター +=============================================== */ + +#footer_wrap { + margin: 0 auto; + width: 980px; + height: 80px; + background: #fff; +} + +#footer { + margin: auto; + padding-top: 10px; + border-top: solid 1px #ccc; + width: 950px; +} + +#pagetop { + width: 210px; + float: right; + text-align: right; +} + +#copyright { + width: 740px; + float: left; + text-align: left; + font-size: 97%; +} + +/* ============================================== + パーツ +=============================================== */ +/* ボタン +----------------------------------------------- */ + +.btn_area { + margin-top: 10px; + width: 100%; + text-align: center; + + li { + padding-right: 10px; + display: inline; + } +} + +/* 完了メッセージ +----------------------------------------------- */ + +div { + &#complete_area { + margin-bottom: 20px; + + .message { + margin-bottom: 20px; + line-height: 150%; + font-weight: bold; + font-size: 120%; + } + } + + &#undercolumn_entry .message { + margin-bottom: 20px; + line-height: 150%; + font-weight: bold; + font-size: 120%; + } + + &#complete_area .shop_information { + margin-top: 40px; + padding: 20px 0 0 0; + border-top: solid 1px #ccc; + + .name { + margin-bottom: 10px; + font-weight: bold; + font-size: 140%; + } + } +} + +@charset "utf-8"; + +/************************************************ + 各ページコンテンツ用 +************************************************ */ +/* ============================================== +▼TOP +=============================================== */ +/* メインイメージ +----------------------------------------------- */ + +#main_image { + margin-bottom: 10px; + text-align: center; +} + +/* ============================================== +▼下層 +=============================================== */ +/* ============================================== +▼ガイド +=============================================== */ +/* ◎◎について +----------------------------------------------- */ + +div { + &#undercolumn_aboutus, &#undercolumn_order {} + + &#undercolumn_contact { + margin: 0 auto; + width: 100%; + } +} + +/* 特定商取引法 +----------------------------------------------- */ + +/* お問い合わせ +----------------------------------------------- */ + +.zipimg img { + vertical-align: middle; +} + +/* ============================================== +▼MYページ +=============================================== */ +/* 共通設定 +----------------------------------------------- */ + +div { + &#mypagecolumn, &#mynavi_area, &#mycontents_area { + width: 100%; + } + + &#mynavi_area { + .mynavi_list { + margin-bottom: 20px; + width: 100%; + + li { + margin: 0 15px 5px 0; + padding-left: 15px; + float: left; + background: url('../img/icon/ico_arrow_01.gif') no-repeat left; + font-size: 120%; + } + } + + div.point_announce { + margin-bottom: 30px; + padding: 10px; + border: solid 1px #ffcc62; + background-color: #fffaf0; + + p { + padding-left: 20px; + background: url('../img/icon/ico_point.gif') no-repeat left; + } + } + } + + &#mycontents_area p.inforamtion { + margin-bottom: 20px; + } + + &#mypagecolumn h4 { + margin: 10px auto; + border-bottom: 1px solid #999; + text-align: left; + font-size: 120%; + } + + &#mycontents_area div.mycondition_area { + margin: 0 auto 20px 0; + padding: 10px; + border: solid 1px #ccc; + width: 97%; + background: #f9f9f9; + + p { + float: left; + } + + .btn { + width: 160px; + margin-top: 15px; + float: right; + } + } +} + +/* 購入履歴一覧/詳細 +----------------------------------------------- */ + +.add_address { + margin-bottom: 20px; +} + +/* 会員登録内容変更/退会 +----------------------------------------------- */ + +div { + &#mycontents_area .message_area { + margin: 30px auto; + padding: 30px; + border: 1px solid #ccc; + text-align: center; + + p { + margin-bottom: 20px; + } + } + + &#undercolumn_entry { + width: 100%; + + .kiyaku_text { + margin: 20px auto; + padding: 10px; + border: solid 1px #ccc; + width: 94%; + background: #fff; + } + } + + &#undercolumn_login { + margin: 0 auto; + width: 100%; + + .login_area { + margin-bottom: 30px; + + .inputbox { + margin: 15px auto 15px auto; + padding: 15px 20px 10px 20px; + background: #f0f0f0; + + .btn_area { + margin-top: 0; + } + } + } + } + + &#undercolumn_error .message_area { + width: 80%; + margin: 30px auto; + padding: 30px; + border: 1px solid #ccc; + text-align: center; + + .error { + padding: 120px 0; + } + } +} + +/* ============================================== +▼会員登録 +=============================================== */ + +/* ============================================== +▼ログイン +=============================================== */ + +/* ============================================== +▼エラー +=============================================== */ + +/* ============================================== +▼商品一覧 +=============================================== */ +/* ページ送り +----------------------------------------------- */ + +.pagenumber_area { + padding-bottom: 10px; + background: url("../img/background/line_dot_01.gif") repeat-x bottom; +} + +.pagecond_area { + margin-bottom: 20px; + padding: 10px; +} + +.pagenumber_area { + margin: 20px 0; +} + +.pagecond_area { + border: 1px solid #ccc; +} + +.pagenumber_area { + .navi { + width: 100%; + text-align: left; + + li { + display: inline; + } + } + + .change { + float: right; + text-align: right; + white-space: nowrap; + } +} + +/* レイアウト +----------------------------------------------- */ + +div { + &.list_area { + padding: 0 0 30px 0; + width: 100%; + overflow: auto; + } + + &.listphoto { + float: left; + } +} + +/* メインカラム用 1カラム時*/ + +#main_column { + &.colnum1 div.listrightbloc { + float: right; + width: 74%; + } + + &.colnum2 div.listrightbloc { + float: right; + width: 80%; + } + + &.colnum3 div.listrightbloc { + float: right; + width: 74%; + } +} + +/* メインカラム用 2カラム時*/ + +/* メインカラム用 3カラム時*/ + +/* 商品情報 各種設定 +----------------------------------------------- */ +/* 商品ステータス */ + +div.listrightbloc { + ul.status_icon { + margin-bottom: 10px; + width: 100%; + + li { + margin-right: 5px; + float: left; + } + } + + h3 { + font-weight: bold; + font-size: 120%; + } + + .listcomment { + margin: 0 0 10px 0; + text-align: left; + } + + .detail_btn { + margin-bottom: 20px; + } + + .pricebox { + margin: 0 0 10px 0; + } + + .cart_area { + padding: 10px; + border: 1px solid #cef0f4; + background-color: #ecf5ff; + width: 94%; + } + + .classlist { + margin-bottom: 10px; + padding-bottom: 10px; + background: url("../img/background/line_dot_02.gif") repeat-x bottom; + } + + dl { + width: 100%; + } + + dt { + display: inline-block; + vertical-align: top; + } + + dd { + padding-bottom: 10px; + display: inline-block; + + p.attention { + margin-top: 5px; + } + } + + .cartin { + margin: 0; + float: right; + + .quantity { + padding: 3px 10px 0 0; + width: 150px; + float: left; + text-align: right; + + .box { + width: 70px; + } + } + } + + .cartin_btn { + width: 160px; + float: left; + } +} + +/* 商品名 */ + +/* コメント */ + +/* 商品詳細を見る */ + +/* 価格 */ + +/* 買い物カゴ */ + +/* 規格 */ + +/* カゴに入れる */ + +/* ============================================== +▼商品詳細 +=============================================== */ +/* レイアウト + + tplファイルのマークアップが同じ項目 + * 1カラム時 + * 2カラム時 + * 3カラム時 + +----------------------------------------------- */ + +#detailarea, .sub_area { + margin-bottom: 20px; + width: 100%; +} + +/* レイアウト +----------------------------------------------- */ +/* 1カラム用 */ + +#main_column { + &.colnum1 { + div#detailphotobloc { + width: 37%; + float: left; + } + + #detailrightbloc { + width: 63%; + float: right; + } + + div { + &.subtext { + margin-bottom: 20px; + float: left; + width: 69%; + } + + &.subphotoimg { + float: right; + width: 25%; + text-align: right; + } + } + + p.subtext { + margin-bottom: 20px; + } + } + + &.colnum2 { + div#detailphotobloc { + float: left; + width: 37%; + } + + #detailrightbloc { + float: right; + width: 63%; + } + + div.subtext { + margin-bottom: 20px; + float: left; + width: 73%; + } + + p.subtext { + margin-bottom: 20px; + } + + div.subphotoimg { + float: right; + width: 25%; + text-align: right; + } + } + + &.colnum3 { + div#detailphotobloc { + float: left; + width: 49%; + } + + #detailrightbloc { + float: right; + width: 50%; + } + + div.subtext { + margin-bottom: 20px; + float: left; + width: 63%; + } + + p.subtext { + margin-bottom: 20px; + } + + div.subphotoimg { + float: right; + width: 35%; + text-align: right; + } + } +} + +/* 2カラム用 */ + +/* 3カラム用 */ + +/* 商品情報 各種設定 +----------------------------------------------- */ + +#detailrightbloc { + h2 { + margin: 0 0 10px 0; + padding: 0 0 15px 0; + color: #666; + background: url("../img/background/line_dot_01.gif") repeat-x bottom; + font-weight: bold; + font-size: 160%; + } + + .point, .relative_cat { + margin: 0 0 10px 0; + padding: 0 0 10px 0; + background: url("../img/background/line_dot_01.gif") repeat-x bottom; + } + + .main_comment { + margin-bottom: 20px; + } + + .product_code { + dt, dd { + display: inline; + } + } + + ul.status_icon { + margin-bottom: 10px; + width: 100%; + + li { + margin-right: 5px; + margin-bottom: 3px; + float: left; + } + } + + .normal_price { + dt, dd { + display: inline; + } + } + + .sale_price { + dt, dd { + display: inline; + } + } + + .point { + dt, dd { + display: inline; + } + } + + div.classlist { + margin-bottom: 10px; + padding-bottom: 10px; + width: 100%; + background: url("../img/background/line_dot_02.gif") repeat-x bottom; + } + + .classlist { + margin-bottom: 5px; + } + + ul { + margin-bottom: 10px; + width: 100%; + + li { + vertical-align: top; + float: left; + } + } + + .maker { + dt, dd { + display: inline; + } + } + + .comment1 { + dt, dd { + display: inline; + } + } + + .relative_cat dd { + margin-left: 1em; + } + + .cart_area { + padding: 10px; + background-color: #ecf5ff; + border: 1px solid #cef0f4; + } + + .quantity { + dt, dd { + display: inline; + } + } + + .cartin, .cartin_btn { + text-align: center; + } + + .favorite_btn { + text-align: center; + margin-top: 10px; + } +} + +/* 商品コード */ + +/* 商品ステータス */ + +/* 通常価格 */ + +/* 販売価格 */ + +/* ポイント */ + +/* 規格 */ + +/* メーカー */ + +/* メーカーURL */ + +/* 関連カテゴリ */ + +/* 買い物カゴ */ + +/* お客様の声 +----------------------------------------------- */ + +div { + &#customervoice_area { + clear: both; + padding: 35px 0 0 0; + + h2 { + margin-bottom: 20px; + padding: 6px 0 8px 10px; + border-top: solid 1px #f90; + background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom; + } + + .review_bloc { + margin-bottom: 20px; + padding: 10px; + background-color: #f6f6f6; + + p { + padding-top: 3px; + margin-right: 10px; + float: left; + } + + .review_btn { + float: right; + width: 160px; + } + } + + ul li { + padding-bottom: 15px; + margin-bottom: 15px; + background: url("../img/background/line_dot_01.gif") repeat-x bottom; + } + + .voicetitle { + margin-bottom: 5px; + color: #333; + font-weight: bold; + } + + .voicedate { + margin-bottom: 10px; + } + } + + &#whobought_area { + clear: both; + padding: 35px 0 0 0; + + h2 { + border-top: solid 1px #f90; + background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom; + padding: 5px 0 8px 10px; + font-size: 14px; + } + } + + &#undercolumn_cart { + .point_announce { + padding: 20px; + margin-bottom: 20px; + border: solid 1px #ffcc62; + background: #fffaf0; + font-size: 120%; + text-align: center; + line-height: 140%; + } + + .totalmoney_area { + margin-bottom: 20px; + } + + p { + margin: 10px 5px; + } + } + + &#undercolumn { + ul#quantity_level li { + padding: 3px; + display: inline; + } + + .empty { + text-align: left; + } + } + + &.form_area { + margin-bottom: 30px; + } + + &#undercolumn_customer {} +} + +/* 関連商品（商品部分はbloc.cssのおすすめ商品と共通） +----------------------------------------------- */ + +/* *********************************************** +▼カートの中 +/*********************************************** */ +/* 現在のカゴの中 +----------------------------------------------- */ + +/* お客様情報入力 +----------------------------------------------- */ + +.flow_area { + margin: 0 0 20px 0; +} + +div { + &#undercolumn_customer th em { + color: #000; + font-weight: bold; + } + + &#undercolumn_shopping { + .pay_area { + margin: 0 auto 30px; + width: 100%; + } + + .pay_area02 { + margin: 40px auto 30px auto; + + .txtarea { + margin: 5px 0 0 0; + padding: 2px; + border: 1px solid #ccc; + width: 99%; + height: 150px; + } + + .select-msg { + margin-bottom: 10px; + } + } + + .point_area { + margin: 40px auto 0 auto; + + .point_announce { + padding: 20px; + border: 1px solid #ccc; + } + + p { + margin-bottom: 20px; + } + + .point_announce li { + margin-bottom: 5px; + } + } + } +} + +/* お支払い方法・お届け時間等の指定 +----------------------------------------------- */ + +/* お届け先の指定 +----------------------------------------------- */ + +#address_area { + margin-bottom: 10px; + width: 100%; + + .information { + width: 65%; + float: left; + } +} + +#undercolumn_shopping .information { + margin-bottom: 15px; +} + +#address_area { + .add_multiple { + padding: 15px 10px; + border: 1px solid #ffcc62; + float: right; + width: 30%; + color: #555; + background: #fffaf0; + text-align: center; + font-weight: bold; + + p { + margin-bottom: 10px; + } + } + + p.addbtn { + font-weight: bold; + font-size: 10px; + } +} + +/* ============================================== +▼検索結果 +=============================================== */ + +p.condition_area { + margin: 0 auto; + padding: 5px; + border: solid 1px #333; + width: 566px; +} + +@charset "utf-8"; + +/************************************************ + tables +************************************************ */ +/* デフォルトテーブル +----------------------------------------------- */ + +table { + margin: 15px auto 20px auto; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; + width: 100%; + border-collapse: collapse; + text-align: left; + + th { + padding: 8px; + border-right: 1px solid #ccc; + border-bottom: 1px solid #ccc; + color: #333; + background-color: #f0f0f0; + font-weight: normal; + } + + td { + padding: 8px; + border-right: 1px solid #ccc; + border-bottom: 1px solid #ccc; + } +} + +/* 見出し +----------------------------------------------- */ + +div { + &#undercolumn_shopping table { + th[scope=col] { + text-align: center; + } + + &.delivname th { + width: 155px; + } + } + + &#mycontents_area table { + th { + text-align: left; + + &.alignR { + text-align: right; + } + + &.alignL { + text-align: left; + } + + &.alignC { + text-align: center; + } + + &.resulttd { + text-align: right; + } + } + + caption { + padding: 8px; + border-top: 1px solid #ccc; + border-right: 1px solid #ccc; + border-left: 1px solid #ccc; + color: #000; + background-color: #f0f0f0; + text-align: left; + font-weight: bold; + } + } +} + +/* MYページ */ + +/* その他 +----------------------------------------------- */ + +table select { + margin-bottom: 7px; + border: solid 1px #ccc; +} + +@charset "utf-8"; + +/************************************************ + ブロック用 +************************************************ */ +/*** 目次 *** + +▼ブロック共通 +リスト +タイトル +ヘッダー上、フッター下のブロックエリア + +▼各機能ブロックの指定 +-新着情報 +-現在のカゴの中 +-カテゴリ +-ガイドリンク +-ログイン（サイド用） +-検索 +-カレンダー +-おすすめ商品 + * 商品詳細のオススメ商品 [whobought_area] +*/ + +/* ============================================== +ブロック共通 + * #container から指定することで、ヘッダー・フッターには適用していない。 +/* ============================================= */ + +.side_column { + overflow-x: hidden; + + /* IE6 表示乱れ防止 */ + + .block_body { + border: solid 1px #ccc; + border-top: none; + } +} + +#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 15px 10px; + + /* #container の背景色を欠けさせないため敢えて padding */ + } + + #main_column .block_outer { + padding: 0 0 20px; + } + + .side_column .block_outer { + padding: 0 7% 10px; + } + + .block_outer .block_body dl.formlist { + margin-bottom: 8px; + + dd { + margin-bottom: 5px; + } + + dt { + margin-bottom: 3px; + padding-left: 15px; + background: url("../img/icon/ico_arrow_03.gif") no-repeat left; + font-size: 90%; + } + + 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 { + 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 { + 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_contents { + padding: 10px; + max-height: 260px; + height: auto !important; + + /* hack? */ + height: 260px; + + /* hack? */ + overflow: auto; + overflow-y: scroll; + } + + dl.newslist { + background: url("../img/background/line_dot_01.gif") repeat-x bottom; + + &:last-child { + /* IE9 未満では無効 (影響度合いが低いので黙殺) */ + background: none; + } + + dt { + margin-bottom: 5px; + } + + dd { + margin-bottom: 10px; + padding-bottom: 10px; + } + } +} + +/* *********************************************** +▼各機能ブロックの指定 +/*********************************************** */ + +/* =============================================== +▼新着情報 +=============================================== */ + +/* =============================================== +▼現在のカゴの中 +=============================================== */ + +#cart_area { + .information { + padding: 10px; + } + + .postage { + margin-top: 10px; + padding-top: 10px; + background: url("../img/background/line_dot_01.gif") repeat-x top; + + .point_announce { + padding: 2px 0 2px 20px; + background: url("../img/icon/ico_price.gif") no-repeat left top; + } + } + + .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; + + &.level1 { + border-bottom: solid 1px #ccc; + + p { + padding-left: 20px; + margin: 7px 3px; + background: url("../img/icon/ico_arrow_01.gif") 2px 3px no-repeat; + } + + li p { + background: url("../img/icon/ico_level.gif") 7px 7px no-repeat; + } + } + + a { + display: block; + padding: 0; + } +} + +a.onlink { + &:link { + color: #f00; + text-decoration: underline; + } + + &:visited, &:hover { + color: #f00; + } +} + +/* =============================================== +▼ガイドリンク +=============================================== */ + +#guide_area { + border: none; + + 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; + + 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; + + p { + margin-bottom: 5px; + } + + .btn { + text-align: center; + } + } + + .login_area dl.formlist { + margin-bottom: 8px; + width: 450px; + + dt { + margin-bottom: 3px; + padding-left: 15px; + color: #333; + background: url("../img/icon/ico_arrow_03.gif") no-repeat left; + width: 120px; + float: left; + font-size: 90%; + } + + dd { + margin-bottom: 5px; + float: right; + width: 300px; + vertical-align: bottom; + text-align: left; + } + } + + div { + &#login_area .block_body .mini { + margin-top: 5px; + letter-spacing: -0.01em; + } + + &#search_area .block_body { + padding: 10px; + + .btn { + text-align: center; + } + } + } +} + +/* =============================================== +▼検索 +=============================================== */ + +/* =============================================== +▼カレンダー +=============================================== */ + +#calender_area { + background-color: transparent; + border: none; + + .block_body { + padding: 10px 0; + background-color: #f1f9fc; + } + + table { + background: #fff; + border: none; + width: 150px; + margin: 0 auto 5px; + font-size: 90%; + + td { + padding: 1px 3px; + border-top: 1px solid #ccc; + border-right: none; + text-align: center; + } + } + + th { + padding: 1px 3px; + background: #fff; + border: none; + text-align: center; + } + + table .month { + margin-bottom: 5px; + padding-left: 12px; + background: url("../img/icon/ico_arrow_04.gif") no-repeat left; + font-size: 120%; + } + + .off { + color: #f00; + } + + .today { + background-color: #FFF99D; + font-weight: bold; + } + + .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%; + } + + &.colnum2 { + #recommend_area .block_body .productContents, #whobought_area .productContents { + float: right; + width: 74%; + } + } + + &.colnum3 { + #recommend_area .block_body .productContents, #whobought_area .productContents { + float: right; + width: 67%; + } + } +} + +/* メインカラム用 2カラム時*/ + +/* メインカラム用 3カラム時*/ + +/* サイドカラム用 */ + +.side_column #recommend_area .block_body .productContents { + clear: both; +} + +@charset "utf-8"; + +/************************************************ + インヘッダーブロック +************************************************ */ + +#headerInternalColumn { + margin-top: 5px; + float: right; + width: 520px; + height: 35px; +} + +/* ログイン（ヘッダー用） +----------------------------------------------- */ + +#header_login_area { + padding: 0 10px; + border: solid 1px #ffc979; + height: 30px; + background: #fef3d3; + letter-spacing: -0.075em; + + ul.formlist { + margin-top: 5px; + + li { + float: left; + + &.mail { + padding-left: 28px; + width: 155px; + background: url("../img/common/ico_arrow_login.gif") no-repeat left; + font-size: 90%; + } + + &.password { + padding-right: 5px; + } + + &.login_memory { + padding-right: 5px; + font-size: 90%; + } + + &.forgot { + margin-top: 3px; + padding-right: 5px; + font-size: 90%; + } + + &.btn { + padding-right: 5px; + width: 53px; + } + } + } + + p.btn { + height: 20px; + padding: 5px 0; + vertical-align: middle; + + input[type=image] { + vertical-align: middle; + } + } +} + +/* *********************************************** +追加ブロック +************************************************ */ +/* 共通 +----------------------------------------------- */ + +#container .block_outer #banner_area .block_body { + border: none; +} + +/* 【メイン】バナーエリア_02 +----------------------------------------------- */ + +#main_column .block_outer #banner_area .block_body ul { + width: 100%; + + li { + float: left; + + &.sub_01 { + padding-right: 8px; + } + } +} + +/* 【サイド】バナーエリア_01 +----------------------------------------------- */ +/* 【サイド】バナーエリア_02 +----------------------------------------------- */ + +#leftcolumn .block_outer #banner_area .block_body ul li, #rightcolumn .block_outer #banner_area .block_body ul li { + margin-bottom: 8px; +} + +@charset "utf-8"; + +/************************************************ + ポップアップウィンドウ +************************************************ */ +/* 共通 +----------------------------------------------- */ + +div { + &#windowcolumn { + border-top: solid 3px #f90; + width: 560px; + height: 100%; + margin: 15px 15px 0 15px; + background: #fff; + + h2 { + margin-bottom: 10px; + padding: 8px; + border-top: solid 1px #ebeced; + color: #f60; + background: url("../img/background/bg_tit_sub_01.jpg") repeat-x left bottom; + background-color: #fef3d8; + font-size: 170%; + } + } + + &#window_area { + margin: 15px auto 0 auto; + padding-bottom: 20px; + width: 540px; + min-height: 300px; + height: auto !important; + + p.information { + margin-bottom: 20px; + } + + .message { + margin-bottom: 20px; + color: #f60; + line-height: 150%; + font-weight: bold; + font-size: 140%; + } + + table { + width: 540px; + } + + #forgot { + margin: 0 auto; + padding: 20px; + width: 440px; + border: 1px solid #ccc; + text-align: left; + + .mailaddres { + margin-bottom: 10px; + } + + p { + text-align: center; + } + } + } + + &#bigimage, &#cartimage { + margin-top: 15px; + background-color: #fff; + text-align: center; + } + + &#bigimage img, &#cartimage img { + padding: 10px; + background-color: #fff; + } + + &#zipsearchcolumn { + margin: 15px auto 0 auto; + border-top: 5px solid #ffa85c; + border-bottom: 5px solid #ffa85c; + width: 460px; + background-color: #fff; + + h2 { + margin: 0 0 15px 0; + width: 460px; + } + } + + &#zipsearch_area { + margin: 15px auto 0 auto; + width: 460px; + } + + &#zipsearchcolumn .btn { + margin: 15px 0 30px 0; + text-align: center; + } + + &#zipsearch_area #completebox p { + padding: 60px 5px; + text-align: center; + } +} + +/* お客様の声の書き込み、新しいお届け先の追加・変更 +----------------------------------------------- */ + +/* 商品詳細拡大写真、カート拡大写真 +----------------------------------------------- */ + +/* 郵便番号検索 +----------------------------------------------- */ + +@charset "utf-8"; + +/************************************************ + 印刷用 +************************************************ */ + +@media print { + body { + zoom: 75%; + } +} From 84e65a713289ced15b856ec6c10168bfd7636284 Mon Sep 17 00:00:00 2001 From: Seasoft Date: Wed, 20 Dec 2023 19:50:58 +0900 Subject: [PATCH 2/3] =?UTF-8?q?CSS=20Nesting=20Module=20=E3=82=92=E4=BD=BF?= =?UTF-8?q?=E3=81=A3=E3=81=9F=E5=AE=9F=E8=A3=85=20#783=20(PC)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 目視で気になった点を調整した。 --- html/user_data/packages/default/style.css | 1148 +++++++++++---------- 1 file changed, 606 insertions(+), 542 deletions(-) diff --git a/html/user_data/packages/default/style.css b/html/user_data/packages/default/style.css index 81fa73eb28..43b59696f6 100644 --- a/html/user_data/packages/default/style.css +++ b/html/user_data/packages/default/style.css @@ -4,13 +4,73 @@ ブラウザリセット ************************************************ */ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +font, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { margin: 0; padding: 0; border: 0; } -table, caption, th, td { +table, +caption, +th, +td { margin: 0; padding: 0; border: 0; @@ -21,28 +81,32 @@ table, caption, th, td { font-weight: normal; } -a img, iframe { +a img, +iframe { border: none; } -ol, ul, li { +ol, +ul, +li { list-style: none; } -input, textarea, select, button { +input, +textarea, +select, +button { font-size: 100%; font-family: inherit; } -@charset "utf-8"; - /************************************************ 共通設定 ************************************************ */ body { color: #666; - font-family: Verdana,Arial,Helvetica,sans-serif; + font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #f5f5f5; font-size: 72.5%; line-height: 150%; @@ -86,25 +150,30 @@ img.picture { #main_column { padding: 10px 0 0; + /* 1カラム時 */ &.colnum1 { margin: 0 auto; width: 80%; } + /* 2カラム時 (共通) */ &.colnum2 { width: 78%; + /* 2カラム時 (メイン部が左) */ &.left { padding-left: 1.5%; float: left; } + /* 2カラム時 (メイン部が右) */ &.right { padding-right: 1.5%; float: right; } } + /* 3カラム時 */ &.colnum3 { padding-left: 0.5%; width: 59%; @@ -112,16 +181,6 @@ img.picture { } } -/* 1カラム時 */ - -/* 2カラム時 (共通) */ - -/* 2カラム時 (メイン部が左) */ - -/* 2カラム時 (メイン部が右) */ - -/* 3カラム時 */ - /* サイドカラム ----------------------------------------------- */ @@ -143,7 +202,9 @@ img.picture { ----------------------------------------------- */ /* ヘッダーとフッターの上下 */ -#topcolumn, #bottomcolumn, #footerbottomcolumn { +#topcolumn, +#bottomcolumn, +#footerbottomcolumn { margin: 0px; background: #fff; text-align: left; @@ -172,10 +233,6 @@ img.picture { visibility: hidden; content: "."; } - - display: block; - - /* for IE8 */ } .clear { @@ -186,12 +243,15 @@ img.picture { ----------------------------------------------- */ a { - &:link, &:visited { + + &:link, + &:visited { color: #39c; text-decoration: none; } - &:link:hover, &[href]:hover { + &:link:hover, + &[href]:hover { color: #f60; text-decoration: underline; } @@ -200,7 +260,11 @@ a { /* フォント ----------------------------------------------- */ -h1, h2, h3, h4, h5 { +h1, +h2, +h3, +h4, +h5 { font-size: 100%; line-height: 150%; } @@ -270,7 +334,9 @@ select { } input { - &[type='text'], &[type='password'] { + + &[type='text'], + &[type='password'] { border: solid 1px #ccc; padding: 2px; } @@ -325,9 +391,9 @@ input { } /* フォームが縦に重なり合う場合に併用する余白 */ +/* FIXME 簡素な単語は、単独で、込み入った指定に使用しない */ .top { - /* FIXME 簡素な単語は、単独で、込み入った指定に使用しない */ margin-bottom: 5px; } @@ -339,22 +405,26 @@ h2.title { padding: 8px; border-top: solid 1px #ebeced; color: #f60; - background: url("../img/background/bg_tit_sub_01.jpg") repeat-x left bottom; + background: url("img/background/bg_tit_sub_01.jpg") repeat-x left bottom; background-color: #fef3d8; font-size: 170%; } -#main_column .sub_area h3, #undercolumn_login .login_area h3, #undercolumn_shopping h3, #mypagecolumn h3, #undercolumn_cart h3 { +#main_column .sub_area h3, +#undercolumn_login .login_area h3, +#undercolumn_shopping h3, +#mypagecolumn h3, +#undercolumn_cart h3 { margin: 0 0 10px 0; padding: 5px 0 10px; color: #f60; - background: url("../img/background/line_01.gif") repeat-x left bottom; + background: url("img/background/line_01.gif") repeat-x left bottom; font-size: 120%; } -div#undercolumn_login .login_area h4 { +#undercolumn_login .login_area h4 { padding-left: 15px; - background: url("../img/icon/ico_arrow_05.gif") no-repeat left; + background: url("img/icon/ico_arrow_05.gif") no-repeat left; } /* ============================================== @@ -366,7 +436,7 @@ div#undercolumn_login .login_area h4 { #header_wrap { border-top: solid 3px #f90; min-height: 82px; - background: url("../img/common/bg_header.gif") repeat-x bottom #fffaf0; + background: url("img/common/bg_header.gif") repeat-x bottom #fffaf0; } #header { @@ -405,7 +475,7 @@ div#undercolumn_login .login_area h4 { /* ヘッダーナビ ----------------------------------------------- */ -div#header_navi { +#header_navi { float: right; width: 409px; height: 38px; @@ -414,7 +484,8 @@ div#header_navi { display: block; float: left; - &.mypage, &.entry { + &.mypage, + &.entry { margin-top: 6px; } } @@ -503,8 +574,6 @@ div { } } -@charset "utf-8"; - /************************************************ 各ページコンテンツ用 ************************************************ */ @@ -527,21 +596,20 @@ div { =============================================== */ /* ◎◎について ----------------------------------------------- */ - -div { - &#undercolumn_aboutus, &#undercolumn_order {} - - &#undercolumn_contact { - margin: 0 auto; - width: 100%; - } +#undercolumn_aboutus { } /* 特定商取引法 ----------------------------------------------- */ +#undercolumn_order { +} /* お問い合わせ ----------------------------------------------- */ +#undercolumn_contact { + margin: 0 auto; + width: 100%; +} .zipimg img { vertical-align: middle; @@ -553,71 +621,77 @@ div { /* 共通設定 ----------------------------------------------- */ -div { - &#mypagecolumn, &#mynavi_area, &#mycontents_area { - width: 100%; - } - - &#mynavi_area { - .mynavi_list { - margin-bottom: 20px; - width: 100%; - - li { - margin: 0 15px 5px 0; - padding-left: 15px; - float: left; - background: url('../img/icon/ico_arrow_01.gif') no-repeat left; - font-size: 120%; - } - } +#mypagecolumn { + width: 100%; +} - div.point_announce { - margin-bottom: 30px; - padding: 10px; - border: solid 1px #ffcc62; - background-color: #fffaf0; +#mynavi_area { + width: 100%; +} - p { - padding-left: 20px; - background: url('../img/icon/ico_point.gif') no-repeat left; - } - } - } +#mycontents_area { + width: 100%; +} - &#mycontents_area p.inforamtion { +#mynavi_area { + .mynavi_list { margin-bottom: 20px; - } + width: 100%; - &#mypagecolumn h4 { - margin: 10px auto; - border-bottom: 1px solid #999; - text-align: left; - font-size: 120%; + li { + margin: 0 15px 5px 0; + padding-left: 15px; + float: left; + background: url('img/icon/ico_arrow_01.gif') no-repeat left; + font-size: 120%; + } } - &#mycontents_area div.mycondition_area { - margin: 0 auto 20px 0; + div.point_announce { + margin-bottom: 30px; padding: 10px; - border: solid 1px #ccc; - width: 97%; - background: #f9f9f9; + border: solid 1px #ffcc62; + background-color: #fffaf0; p { - float: left; - } - - .btn { - width: 160px; - margin-top: 15px; - float: right; + padding-left: 20px; + background: url('img/icon/ico_point.gif') no-repeat left; } } } +#mycontents_area p.inforamtion { + margin-bottom: 20px; +} + +#mypagecolumn h4 { + margin: 10px auto; + border-bottom: 1px solid #999; + text-align: left; + font-size: 120%; +} + /* 購入履歴一覧/詳細 ----------------------------------------------- */ +#mycontents_area div.mycondition_area { + margin: 0 auto 20px 0; + padding: 10px; + border: solid 1px #ccc; + width: 97%; + background: #f9f9f9; + + p { + float: left; + } + + .btn { + width: 160px; + margin-top: 15px; + float: right; + } +} + .add_address { margin-bottom: 20px; } @@ -625,73 +699,71 @@ div { /* 会員登録内容変更/退会 ----------------------------------------------- */ -div { - &#mycontents_area .message_area { - margin: 30px auto; - padding: 30px; - border: 1px solid #ccc; - text-align: center; +#mycontents_area .message_area { + margin: 30px auto; + padding: 30px; + border: 1px solid #ccc; + text-align: center; - p { - margin-bottom: 20px; - } + p { + margin-bottom: 20px; } +} - &#undercolumn_entry { - width: 100%; +/* ============================================== +▼会員登録 +=============================================== */ - .kiyaku_text { - margin: 20px auto; - padding: 10px; - border: solid 1px #ccc; - width: 94%; - background: #fff; - } - } +#undercolumn_entry { + width: 100%; - &#undercolumn_login { - margin: 0 auto; - width: 100%; + .kiyaku_text { + margin: 20px auto; + padding: 10px; + border: solid 1px #ccc; + width: 94%; + background: #fff; + } +} - .login_area { - margin-bottom: 30px; +/* ============================================== +▼ログイン +=============================================== */ - .inputbox { - margin: 15px auto 15px auto; - padding: 15px 20px 10px 20px; - background: #f0f0f0; +#undercolumn_login { + margin: 0 auto; + width: 100%; - .btn_area { - margin-top: 0; - } - } - } - } + .login_area { + margin-bottom: 30px; - &#undercolumn_error .message_area { - width: 80%; - margin: 30px auto; - padding: 30px; - border: 1px solid #ccc; - text-align: center; + .inputbox { + margin: 15px auto 15px auto; + padding: 15px 20px 10px 20px; + background: #f0f0f0; - .error { - padding: 120px 0; + .btn_area { + margin-top: 0; + } } } } /* ============================================== -▼会員登録 +▼エラー =============================================== */ -/* ============================================== -▼ログイン -=============================================== */ +#undercolumn_error .message_area { + width: 80%; + margin: 30px auto; + padding: 30px; + border: 1px solid #ccc; + text-align: center; -/* ============================================== -▼エラー -=============================================== */ + .error { + padding: 120px 0; + } +} /* ============================================== ▼商品一覧 @@ -701,7 +773,7 @@ div { .pagenumber_area { padding-bottom: 10px; - background: url("../img/background/line_dot_01.gif") repeat-x bottom; + background: url("img/background/line_dot_01.gif") repeat-x bottom; } .pagecond_area { @@ -737,40 +809,40 @@ div { /* レイアウト ----------------------------------------------- */ -div { - &.list_area { - padding: 0 0 30px 0; - width: 100%; - overflow: auto; - } +div.list_area { + padding: 0 0 30px 0; + width: 100%; + overflow: auto; +} - &.listphoto { - float: left; - } +div.listphoto { + float: left; } -/* メインカラム用 1カラム時*/ +/* メインカラム */ #main_column { + + /* 1カラム時 */ &.colnum1 div.listrightbloc { float: right; width: 74%; } + /* 2カラム時 */ &.colnum2 div.listrightbloc { float: right; width: 80%; } + /* 3カラム時 */ &.colnum3 div.listrightbloc { float: right; width: 74%; } } -/* メインカラム用 2カラム時*/ -/* メインカラム用 3カラム時*/ /* 商品情報 各種設定 ----------------------------------------------- */ @@ -787,24 +859,29 @@ div.listrightbloc { } } + /* 商品名 */ h3 { font-weight: bold; font-size: 120%; } + /* コメント */ .listcomment { margin: 0 0 10px 0; text-align: left; } + /* 商品詳細を見る */ .detail_btn { margin-bottom: 20px; } + /* 価格 */ .pricebox { margin: 0 0 10px 0; } + /* 買い物カゴ */ .cart_area { padding: 10px; border: 1px solid #cef0f4; @@ -812,10 +889,11 @@ div.listrightbloc { width: 94%; } + /* 規格 */ .classlist { margin-bottom: 10px; padding-bottom: 10px; - background: url("../img/background/line_dot_02.gif") repeat-x bottom; + background: url("img/background/line_dot_02.gif") repeat-x bottom; } dl { @@ -836,6 +914,7 @@ div.listrightbloc { } } + /* カゴに入れる */ .cartin { margin: 0; float: right; @@ -858,20 +937,6 @@ div.listrightbloc { } } -/* 商品名 */ - -/* コメント */ - -/* 商品詳細を見る */ - -/* 価格 */ - -/* 買い物カゴ */ - -/* 規格 */ - -/* カゴに入れる */ - /* ============================================== ▼商品詳細 =============================================== */ @@ -884,18 +949,20 @@ div.listrightbloc { ----------------------------------------------- */ -#detailarea, .sub_area { +#detailarea, +.sub_area { margin-bottom: 20px; width: 100%; } /* レイアウト ----------------------------------------------- */ -/* 1カラム用 */ #main_column { + + /* 1カラム用 */ &.colnum1 { - div#detailphotobloc { + #detailphotobloc { width: 37%; float: left; } @@ -924,8 +991,9 @@ div.listrightbloc { } } + /* 2カラム用 */ &.colnum2 { - div#detailphotobloc { + #detailphotobloc { float: left; width: 37%; } @@ -952,8 +1020,9 @@ div.listrightbloc { } } + /* 3カラム用 */ &.colnum3 { - div#detailphotobloc { + #detailphotobloc { float: left; width: 49%; } @@ -981,10 +1050,6 @@ div.listrightbloc { } } -/* 2カラム用 */ - -/* 3カラム用 */ - /* 商品情報 各種設定 ----------------------------------------------- */ @@ -993,27 +1058,32 @@ div.listrightbloc { margin: 0 0 10px 0; padding: 0 0 15px 0; color: #666; - background: url("../img/background/line_dot_01.gif") repeat-x bottom; + background: url("img/background/line_dot_01.gif") repeat-x bottom; font-weight: bold; font-size: 160%; } - .point, .relative_cat { + .point, + .relative_cat { margin: 0 0 10px 0; padding: 0 0 10px 0; - background: url("../img/background/line_dot_01.gif") repeat-x bottom; + background: url("img/background/line_dot_01.gif") repeat-x bottom; } .main_comment { margin-bottom: 20px; } + /* 商品コード */ .product_code { - dt, dd { + + dt, + dd { display: inline; } } + /* 商品ステータス */ ul.status_icon { margin-bottom: 10px; width: 100%; @@ -1025,29 +1095,39 @@ div.listrightbloc { } } + /* 通常価格 */ .normal_price { - dt, dd { + + dt, + dd { display: inline; } } + /* 販売価格 */ .sale_price { - dt, dd { + + dt, + dd { display: inline; } } + /* ポイント */ .point { - dt, dd { + + dt, + dd { display: inline; } } + /* 規格 */ div.classlist { margin-bottom: 10px; padding-bottom: 10px; width: 100%; - background: url("../img/background/line_dot_02.gif") repeat-x bottom; + background: url("img/background/line_dot_02.gif") repeat-x bottom; } .classlist { @@ -1064,22 +1144,30 @@ div.listrightbloc { } } + /* メーカー */ .maker { - dt, dd { + + dt, + dd { display: inline; } } + /* メーカーURL */ .comment1 { - dt, dd { + + dt, + dd { display: inline; } } + /* 関連カテゴリ */ .relative_cat dd { margin-left: 1em; } + /* 買い物カゴ */ .cart_area { padding: 10px; background-color: #ecf5ff; @@ -1087,12 +1175,15 @@ div.listrightbloc { } .quantity { - dt, dd { + + dt, + dd { display: inline; } } - .cartin, .cartin_btn { + .cartin, + .cartin_btn { text-align: center; } @@ -1102,191 +1193,167 @@ div.listrightbloc { } } -/* 商品コード */ - -/* 商品ステータス */ - -/* 通常価格 */ - -/* 販売価格 */ - -/* ポイント */ - -/* 規格 */ - -/* メーカー */ - -/* メーカーURL */ - -/* 関連カテゴリ */ - -/* 買い物カゴ */ - /* お客様の声 ----------------------------------------------- */ -div { - &#customervoice_area { - clear: both; - padding: 35px 0 0 0; - - h2 { - margin-bottom: 20px; - padding: 6px 0 8px 10px; - border-top: solid 1px #f90; - background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom; - } - - .review_bloc { - margin-bottom: 20px; - padding: 10px; - background-color: #f6f6f6; - - p { - padding-top: 3px; - margin-right: 10px; - float: left; - } - - .review_btn { - float: right; - width: 160px; - } - } - - ul li { - padding-bottom: 15px; - margin-bottom: 15px; - background: url("../img/background/line_dot_01.gif") repeat-x bottom; - } - - .voicetitle { - margin-bottom: 5px; - color: #333; - font-weight: bold; - } - - .voicedate { - margin-bottom: 10px; - } - } - - &#whobought_area { - clear: both; - padding: 35px 0 0 0; +#customervoice_area { + clear: both; + padding: 35px 0 0 0; - h2 { - border-top: solid 1px #f90; - background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom; - padding: 5px 0 8px 10px; - font-size: 14px; - } + h2 { + margin-bottom: 20px; + padding: 6px 0 8px 10px; + border-top: solid 1px #f90; + background: url('img/background/bg_tit_sub_01.jpg') repeat-x left bottom; } - &#undercolumn_cart { - .point_announce { - padding: 20px; - margin-bottom: 20px; - border: solid 1px #ffcc62; - background: #fffaf0; - font-size: 120%; - text-align: center; - line-height: 140%; - } - - .totalmoney_area { - margin-bottom: 20px; - } + .review_bloc { + margin-bottom: 20px; + padding: 10px; + background-color: #f6f6f6; p { - margin: 10px 5px; + padding-top: 3px; + margin-right: 10px; + float: left; } - } - &#undercolumn { - ul#quantity_level li { - padding: 3px; - display: inline; + .review_btn { + float: right; + width: 160px; } + } - .empty { - text-align: left; - } + ul li { + padding-bottom: 15px; + margin-bottom: 15px; + background: url("img/background/line_dot_01.gif") repeat-x bottom; } - &.form_area { - margin-bottom: 30px; + .voicetitle { + margin-bottom: 5px; + color: #333; + font-weight: bold; } - &#undercolumn_customer {} + .voicedate { + margin-bottom: 10px; + } } /* 関連商品（商品部分はbloc.cssのおすすめ商品と共通） ----------------------------------------------- */ +#whobought_area { + clear: both; + padding: 35px 0 0 0; + + h2 { + border-top: solid 1px #f90; + background: url('img/background/bg_tit_sub_01.jpg') repeat-x left bottom; + padding: 5px 0 8px 10px; + font-size: 14px; + } +} + /* *********************************************** ▼カートの中 /*********************************************** */ /* 現在のカゴの中 ----------------------------------------------- */ +#undercolumn_cart { + .point_announce { + padding: 20px; + margin-bottom: 20px; + border: solid 1px #ffcc62; + background: #fffaf0; + font-size: 120%; + text-align: center; + line-height: 140%; + } + + .totalmoney_area { + margin-bottom: 20px; + } + + p { + margin: 10px 5px; + } +} + +#undercolumn { + ul#quantity_level li { + padding: 3px; + display: inline; + } + + .empty { + text-align: left; + } +} + +div.form_area { + margin-bottom: 30px; +} /* お客様情報入力 ----------------------------------------------- */ +#undercolumn_customer { +} + .flow_area { margin: 0 0 20px 0; } -div { - &#undercolumn_customer th em { - color: #000; - font-weight: bold; - } +#undercolumn_customer th em { + color: #000; + font-weight: bold; +} - &#undercolumn_shopping { - .pay_area { - margin: 0 auto 30px; - width: 100%; - } +/* お支払い方法・お届け時間等の指定 +----------------------------------------------- */ - .pay_area02 { - margin: 40px auto 30px auto; +#undercolumn_shopping { + .pay_area { + margin: 0 auto 30px; + width: 100%; + } - .txtarea { - margin: 5px 0 0 0; - padding: 2px; - border: 1px solid #ccc; - width: 99%; - height: 150px; - } + .pay_area02 { + margin: 40px auto 30px auto; - .select-msg { - margin-bottom: 10px; - } + .txtarea { + margin: 5px 0 0 0; + padding: 2px; + border: 1px solid #ccc; + width: 99%; + height: 150px; } - .point_area { - margin: 40px auto 0 auto; + .select-msg { + margin-bottom: 10px; + } + } - .point_announce { - padding: 20px; - border: 1px solid #ccc; - } + .point_area { + margin: 40px auto 0 auto; - p { - margin-bottom: 20px; - } + .point_announce { + padding: 20px; + border: 1px solid #ccc; + } - .point_announce li { - margin-bottom: 5px; - } + p { + margin-bottom: 20px; + } + + .point_announce li { + margin-bottom: 5px; } } } -/* お支払い方法・お届け時間等の指定 ------------------------------------------------ */ - /* お届け先の指定 ----------------------------------------------- */ @@ -1337,8 +1404,6 @@ p.condition_area { width: 566px; } -@charset "utf-8"; - /************************************************ tables ************************************************ */ @@ -1372,52 +1437,50 @@ table { /* 見出し ----------------------------------------------- */ -div { - &#undercolumn_shopping table { - th[scope=col] { - text-align: center; - } +#undercolumn_shopping table { + th[scope=col] { + text-align: center; + } - &.delivname th { - width: 155px; - } + &.delivname th { + width: 155px; } +} - &#mycontents_area table { - th { - text-align: left; +/* MYページ */ - &.alignR { - text-align: right; - } +#mycontents_area table { + th { + text-align: left; - &.alignL { - text-align: left; - } + &.alignR { + text-align: right; + } - &.alignC { - text-align: center; - } + &.alignL { + text-align: left; + } - &.resulttd { - text-align: right; - } + &.alignC { + text-align: center; } - caption { - padding: 8px; - border-top: 1px solid #ccc; - border-right: 1px solid #ccc; - border-left: 1px solid #ccc; - color: #000; - background-color: #f0f0f0; - text-align: left; - font-weight: bold; + &.resulttd { + text-align: right; } } -} -/* MYページ */ + caption { + padding: 8px; + border-top: 1px solid #ccc; + border-right: 1px solid #ccc; + border-left: 1px solid #ccc; + color: #000; + background-color: #f0f0f0; + text-align: left; + font-weight: bold; + } +} /* その他 ----------------------------------------------- */ @@ -1427,8 +1490,6 @@ table select { border: solid 1px #ccc; } -@charset "utf-8"; - /************************************************ ブロック用 ************************************************ */ @@ -1458,7 +1519,6 @@ table select { .side_column { overflow-x: hidden; - /* IE6 表示乱れ防止 */ .block_body { @@ -1482,9 +1542,8 @@ table select { #container { .block_outer { - padding: 0 15px 10px; - /* #container の背景色を欠けさせないため敢えて padding */ + padding: 0 15px 10px; } #main_column .block_outer { @@ -1495,6 +1554,9 @@ table select { padding: 0 7% 10px; } + /* リスト + ----------------------------------------------- */ + /* ログイン 検索条件 */ .block_outer .block_body dl.formlist { margin-bottom: 8px; @@ -1505,7 +1567,7 @@ table select { dt { margin-bottom: 3px; padding-left: 15px; - background: url("../img/icon/ico_arrow_03.gif") no-repeat left; + background: url("img/icon/ico_arrow_03.gif") no-repeat left; font-size: 90%; } @@ -1515,49 +1577,53 @@ table select { } } -/* リスト ------------------------------------------------ */ -/* ログイン 検索条件 */ /* タイトル ----------------------------------------------- */ -/* タイトルの背景 白 */ -#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; -} +h2 { + /* タイトルの背景 白 */ -#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; -} + #login_area &, + #search_area &, + #calender_area &, + #cart_area &, + #cart & { + 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 & { + 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 { - 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 { - h2 { + #recommend_area &, + #news_area & { 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; + background: url('img/background/bg_btn_bloc_02.jpg') repeat-x left bottom #fef3d8; } +} + +/* *********************************************** +▼各機能ブロックの指定 +/*********************************************** */ +/* =============================================== +▼新着情報 +=============================================== */ +#news_area { .news_contents { padding: 10px; max-height: 260px; @@ -1572,10 +1638,9 @@ table select { } dl.newslist { - background: url("../img/background/line_dot_01.gif") repeat-x bottom; + background: url("img/background/line_dot_01.gif") repeat-x bottom; &:last-child { - /* IE9 未満では無効 (影響度合いが低いので黙殺) */ background: none; } @@ -1590,14 +1655,6 @@ table select { } } -/* *********************************************** -▼各機能ブロックの指定 -/*********************************************** */ - -/* =============================================== -▼新着情報 -=============================================== */ - /* =============================================== ▼現在のカゴの中 =============================================== */ @@ -1610,17 +1667,17 @@ table select { .postage { margin-top: 10px; padding-top: 10px; - background: url("../img/background/line_dot_01.gif") repeat-x top; + background: url("img/background/line_dot_01.gif") repeat-x top; .point_announce { padding: 2px 0 2px 20px; - background: url("../img/icon/ico_price.gif") no-repeat left top; + background: url("img/icon/ico_price.gif") no-repeat left top; } } .btn { padding: 10px 0; - background: url("../img/background/line_dot_01.gif") repeat-x top #f7f7e6; + background: url("img/background/line_dot_01.gif") repeat-x top #f7f7e6; text-align: center; } } @@ -1642,11 +1699,11 @@ table select { p { padding-left: 20px; margin: 7px 3px; - background: url("../img/icon/ico_arrow_01.gif") 2px 3px no-repeat; + background: url("img/icon/ico_arrow_01.gif") 2px 3px no-repeat; } li p { - background: url("../img/icon/ico_level.gif") 7px 7px no-repeat; + background: url("img/icon/ico_level.gif") 7px 7px no-repeat; } } @@ -1662,7 +1719,8 @@ a.onlink { text-decoration: underline; } - &:visited, &:hover { + &:visited, + &:hover { color: #f00; } } @@ -1683,7 +1741,7 @@ a.onlink { ul.button_like li { margin: 0; padding: 0 0 1px 0; - background: url("../img/background/bg_btn_list.jpg") bottom repeat-x; + background: url("img/background/bg_btn_list.jpg") bottom repeat-x; a { margin: 0; @@ -1692,7 +1750,7 @@ ul.button_like li { border-bottom: none; border-color: #ccc; display: block; - background: url("../img/icon/ico_arrow_02.gif") no-repeat right; + background: url("img/icon/ico_arrow_02.gif") no-repeat right; text-decoration: none; outline: none; } @@ -1704,7 +1762,7 @@ ul.button_like li { =============================================== */ #container { - div#login_area .block_body { + #login_area .block_body { padding: 10px; p { @@ -1724,7 +1782,7 @@ ul.button_like li { margin-bottom: 3px; padding-left: 15px; color: #333; - background: url("../img/icon/ico_arrow_03.gif") no-repeat left; + background: url("img/icon/ico_arrow_03.gif") no-repeat left; width: 120px; float: left; font-size: 90%; @@ -1739,26 +1797,24 @@ ul.button_like li { } } - div { - &#login_area .block_body .mini { - margin-top: 5px; - letter-spacing: -0.01em; - } + #login_area .block_body .mini { + margin-top: 5px; + letter-spacing: -0.01em; + } - &#search_area .block_body { - padding: 10px; + /* =============================================== + ▼検索 + =============================================== */ - .btn { - text-align: center; - } + #search_area .block_body { + padding: 10px; + + .btn { + text-align: center; } } } -/* =============================================== -▼検索 -=============================================== */ - /* =============================================== ▼カレンダー =============================================== */ @@ -1797,7 +1853,7 @@ ul.button_like li { table .month { margin-bottom: 5px; padding-left: 12px; - background: url("../img/icon/ico_arrow_04.gif") no-repeat left; + background: url("img/icon/ico_arrow_04.gif") no-repeat left; font-size: 120%; } @@ -1828,21 +1884,25 @@ ul.button_like li { /* 共通 ----------------------------------------------- */ -#recommend_area .block_body, #whobought_area .product_item { +#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; + background: url("img/background/line_dot_01.gif") repeat-x bottom; } -#recommend_area .block_body p, #whobought_area .product_item p { +#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 { +#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 { +#recommend_area .block_body h3, +#whobought_area .product_item h3 { font-size: 100%; font-weight: normal; } @@ -1857,7 +1917,8 @@ ul.button_like li { ----------------------------------------------- */ /* メインカラム用 */ -#main_column #recommend_area .block_body .productImage, #whobought_area .product_item .productImage { +#main_column #recommend_area .block_body .productImage, +#whobought_area .product_item .productImage { margin-bottom: 10px; float: left; width: 90px; @@ -1874,7 +1935,8 @@ ul.button_like li { /* 左右の振り分け ----------------------------------------------- */ -#main_column #recommend_area .product_item, #whobought_area .product_item { +#main_column #recommend_area .product_item, +#whobought_area .product_item { float: left; width: 47.5%; padding-left: 1%; @@ -1883,41 +1945,46 @@ ul.button_like li { /* 商品説明テキスト ----------------------------------------------- */ -/* メインカラム用 1カラム時*/ +/* メインカラム */ #main_column { + + /* 1カラム時 */ + &.colnum1 #recommend_area .block_body .productContents { float: right; width: 74%; } + /* 2カラム時*/ + &.colnum2 { - #recommend_area .block_body .productContents, #whobought_area .productContents { + + #recommend_area .block_body .productContents, + #whobought_area .productContents { float: right; width: 74%; } } + /* 3カラム時*/ + &.colnum3 { - #recommend_area .block_body .productContents, #whobought_area .productContents { + + #recommend_area .block_body .productContents, + #whobought_area .productContents { float: right; width: 67%; } } } -/* メインカラム用 2カラム時*/ - -/* メインカラム用 3カラム時*/ - /* サイドカラム用 */ .side_column #recommend_area .block_body .productContents { clear: both; } -@charset "utf-8"; - /************************************************ インヘッダーブロック ************************************************ */ @@ -1948,7 +2015,7 @@ ul.button_like li { &.mail { padding-left: 28px; width: 155px; - background: url("../img/common/ico_arrow_login.gif") no-repeat left; + background: url("img/common/ico_arrow_login.gif") no-repeat left; font-size: 90%; } @@ -2015,127 +2082,124 @@ ul.button_like li { /* 【サイド】バナーエリア_02 ----------------------------------------------- */ -#leftcolumn .block_outer #banner_area .block_body ul li, #rightcolumn .block_outer #banner_area .block_body ul li { +#leftcolumn .block_outer #banner_area .block_body ul li, +#rightcolumn .block_outer #banner_area .block_body ul li { margin-bottom: 8px; } -@charset "utf-8"; - /************************************************ ポップアップウィンドウ ************************************************ */ /* 共通 ----------------------------------------------- */ -div { - &#windowcolumn { - border-top: solid 3px #f90; - width: 560px; - height: 100%; - margin: 15px 15px 0 15px; - background: #fff; +#windowcolumn { + border-top: solid 3px #f90; + width: 560px; + height: 100%; + margin: 15px 15px 0 15px; + background: #fff; - h2 { - margin-bottom: 10px; - padding: 8px; - border-top: solid 1px #ebeced; - color: #f60; - background: url("../img/background/bg_tit_sub_01.jpg") repeat-x left bottom; - background-color: #fef3d8; - font-size: 170%; - } + h2 { + margin-bottom: 10px; + padding: 8px; + border-top: solid 1px #ebeced; + color: #f60; + background: url("img/background/bg_tit_sub_01.jpg") repeat-x left bottom; + background-color: #fef3d8; + font-size: 170%; } +} - &#window_area { - margin: 15px auto 0 auto; - padding-bottom: 20px; - width: 540px; - min-height: 300px; - height: auto !important; - - p.information { - margin-bottom: 20px; - } - - .message { - margin-bottom: 20px; - color: #f60; - line-height: 150%; - font-weight: bold; - font-size: 140%; - } - - table { - width: 540px; - } - - #forgot { - margin: 0 auto; - padding: 20px; - width: 440px; - border: 1px solid #ccc; - text-align: left; - - .mailaddres { - margin-bottom: 10px; - } +#window_area { + margin: 15px auto 0 auto; + padding-bottom: 20px; + width: 540px; + min-height: 300px; + height: auto !important; - p { - text-align: center; - } - } + p.information { + margin-bottom: 20px; } - &#bigimage, &#cartimage { - margin-top: 15px; - background-color: #fff; - text-align: center; + .message { + margin-bottom: 20px; + color: #f60; + line-height: 150%; + font-weight: bold; + font-size: 140%; } - &#bigimage img, &#cartimage img { - padding: 10px; - background-color: #fff; + table { + width: 540px; } - &#zipsearchcolumn { - margin: 15px auto 0 auto; - border-top: 5px solid #ffa85c; - border-bottom: 5px solid #ffa85c; - width: 460px; - background-color: #fff; + /* お客様の声の書き込み、新しいお届け先の追加・変更 + ----------------------------------------------- */ - h2 { - margin: 0 0 15px 0; - width: 460px; - } - } - - &#zipsearch_area { - margin: 15px auto 0 auto; - width: 460px; - } + #forgot { + margin: 0 auto; + padding: 20px; + width: 440px; + border: 1px solid #ccc; + text-align: left; - &#zipsearchcolumn .btn { - margin: 15px 0 30px 0; - text-align: center; - } + .mailaddres { + margin-bottom: 10px; + } - &#zipsearch_area #completebox p { - padding: 60px 5px; - text-align: center; + p { + text-align: center; + } } } -/* お客様の声の書き込み、新しいお届け先の追加・変更 ------------------------------------------------ */ /* 商品詳細拡大写真、カート拡大写真 ----------------------------------------------- */ +#bigimage, +#cartimage { + margin-top: 15px; + background-color: #fff; + text-align: center; +} + +#bigimage img, +#cartimage img { + padding: 10px; + background-color: #fff; +} + /* 郵便番号検索 ----------------------------------------------- */ +#zipsearchcolumn { + margin: 15px auto 0 auto; + border-top: 5px solid #ffa85c; + border-bottom: 5px solid #ffa85c; + width: 460px; + background-color: #fff; -@charset "utf-8"; + h2 { + margin: 0 0 15px 0; + width: 460px; + } +} + +#zipsearch_area { + margin: 15px auto 0 auto; + width: 460px; +} + +#zipsearchcolumn .btn { + margin: 15px 0 30px 0; + text-align: center; +} + +#zipsearch_area #completebox p { + padding: 60px 5px; + text-align: center; +} /************************************************ 印刷用 From 983f622835b145291fb74d731437c68af4b1c284 Mon Sep 17 00:00:00 2001 From: Seasoft Date: Wed, 20 Dec 2023 20:31:40 +0900 Subject: [PATCH 3/3] =?UTF-8?q?CSS=20=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=82=92=E3=81=BE=E3=81=A8=E3=82=81=E3=82=8B=20#784?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 削除されたファイルを参照しているが未使用と思われるファイルを削除する。 --- html/user_data/css/common.css | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 html/user_data/css/common.css diff --git a/html/user_data/css/common.css b/html/user_data/css/common.css deleted file mode 100644 index 91b3642266..0000000000 --- a/html/user_data/css/common.css +++ /dev/null @@ -1,4 +0,0 @@ -@charset "utf-8"; - -@import url("../packages/default/css/import.css"); -