source: branches/version-2_5-dev/html/user_data/packages/default/css/contents.css @ 20408

Revision 20408, 14.4 KB checked in by uemoto, 13 years ago (diff)

#1032(フロントデザインリニューアル)

  • CSSクラス名等調整
  • ヘッダ用ブロック追加

#932(商品をお気に入りに入れたかどうかの判別が動いていない)

  • 取り急ぎ判別のみ実装
Line 
1@charset "utf-8";
2
3/************************************************
4 各ページコンテンツ用
5************************************************ */
6/* ==============================================
7▼TOP
8=============================================== */
9/* メインイメージ
10----------------------------------------------- */
11#main_image {
12    margin-bottom: 10px;
13    text-align: center;
14}
15
16/* ==============================================
17▼下層
18=============================================== */
19/* ==============================================
20▼ガイド
21=============================================== */
22/* ◎◎について
23----------------------------------------------- */
24div#undercolumn_aboutus {
25}
26
27/* 特定商取引法
28----------------------------------------------- */
29div#undercolumn_order {
30}
31
32/* お問い合わせ
33----------------------------------------------- */
34div#undercolumn_contact {
35    margin: 0 auto;
36    width: 100%;
37}
38
39.zipimg img {
40    vertical-align: middle;
41}
42
43
44/* ==============================================
45▼MYページ
46=============================================== */
47/* 共通設定
48----------------------------------------------- */
49div#mypagecolumn {
50    width: 100%;
51}
52
53div#mynavi_area {
54    width: 100%;
55}
56
57div#mycontents_area {
58    width: 100%;
59}
60div#mynavi_area .mynavi_list {
61    margin-bottom: 20px;
62    width: 100%;
63}
64div#mynavi_area .mynavi_list li {
65    margin:0 15px 5px 0;
66    padding-left: 15px;
67    float: left;
68    background: url('../img/icon/ico_arrow_01.gif') no-repeat left ;
69    font-size: 120%;
70}
71
72div#mynavi_area div.point_announce {
73    margin-bottom: 30px;
74    padding: 10px;
75    border: solid 1px #ffcc62;
76    background-color: #fffaf0;
77}
78div#mynavi_area div.point_announce p {
79    padding-left: 20px;
80    background: url('../img/icon/ico_point.gif') no-repeat left ;
81}
82
83div#mycontents_area p.inforamtion {
84    margin-bottom: 20px;
85}
86
87div#mypagecolumn h4 {
88    margin: 10px auto;
89    border-bottom: 1px solid #999;
90    text-align: left;
91    font-size: 120%;
92}
93
94
95/* 購入履歴一覧/詳細
96----------------------------------------------- */
97div#mycontents_area div.mycondition_area {
98    margin: 0 auto 20px 0;
99    padding: 10px;
100    border: solid 1px #ccc;
101    width: 97%;
102    background: #f9f9f9;
103
104}
105div#mycontents_area div.mycondition_area p {
106    float: left;
107}
108div#mycontents_area div.mycondition_area .btn {
109    width: 160px;
110    margin-top: 15px;
111    float: right;
112}
113.add_address {
114    margin-bottom: 20px;
115}
116
117
118/* 会員登録内容変更/退会
119----------------------------------------------- */
120div#mycontents_area .message_area {
121    margin: 30px auto;
122    padding: 30px;
123    border: 1px solid #ccc;
124    text-align: center;
125}
126
127div#mycontents_area .message_area p {
128    margin-bottom: 20px;
129}
130
131/* ==============================================
132▼会員登録
133=============================================== */
134div#undercolumn_entry {
135    width: 100%;
136}
137
138div#undercolumn_entry .kiyaku_text {
139    margin: 20px auto;
140    padding: 10px;
141    border: solid 1px #ccc;
142    width: 94%;
143    background: #fff;
144}
145
146
147/* ==============================================
148▼ログイン
149=============================================== */
150div#undercolumn_login {
151    margin: 0 auto;
152    width: 100%;
153}
154
155div#undercolumn_login .login_area {
156    margin-bottom: 30px;
157}
158
159div#undercolumn_login .login_area .inputbox {
160    margin: 15px auto 15px auto;
161    padding: 15px 20px 10px 20px;
162    background: #f0f0f0;
163}
164
165div#undercolumn_login .login_area .inputbox .btn_area {
166    margin-top: 0;
167}
168
169
170/* ==============================================
171▼エラー
172=============================================== */
173div#undercolumn_error .message_area {
174    margin: 30px auto;
175    padding: 30px;
176    border: 1px solid #ccc;
177    text-align: center;
178}
179
180div#undercolumn_error .message_area .error {
181    padding: 120px 0;
182}
183
184
185/* ==============================================
186▼商品一覧
187=============================================== */
188/* ページ送り
189----------------------------------------------- */
190.pagenumber_area {
191    padding-bottom: 10px;
192    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
193}
194.pagecond_area {
195    margin-bottom: 20px;
196    padding: 10px;
197}
198.pagenumber_area {
199    margin: 20px 0;
200}
201.pagecond_area {
202    border: 1px solid #ccc;
203}
204.pagenumber_area .navi {
205    width: 100%;
206    text-align: left;
207}
208.pagenumber_area .change {
209    float: right;
210    text-align: right;
211    white-space: nowrap;
212}
213
214
215/* レイアウト
216----------------------------------------------- */
217div.list_area {
218    padding: 0 0 30px 0;
219    width: 100%;
220    overflow: auto;
221}
222
223div.listphoto {
224    float: left;
225}
226
227/* メインカラム用 1カラム時*/
228#one_maincolumn div.listrightbloc {
229    float: right;
230    width: 74%;
231}
232
233/* メインカラム用 2カラム時*/
234#two_maincolumn_right div.listrightbloc ,
235#two_maincolumn_left div.listrightbloc {
236    float: right;
237    width: 80%;
238}
239
240/* メインカラム用 3カラム時*/
241#three_maincolumn div.listrightbloc {
242    float: right;
243    width: 74%;
244}
245
246
247/* 商品情報 各種設定
248----------------------------------------------- */
249/* 商品ステータス */
250div.listrightbloc ul.status_icon {
251    margin-bottom: 10px;
252    width: 100%;
253}
254div.listrightbloc ul.status_icon li {
255    margin-right: 5px;
256    float: left;
257}
258
259/* 商品名 */
260div.listrightbloc h3 {
261    font-weight: bold;
262    font-size: 120%;
263}
264
265/* コメント */
266div.listrightbloc .listcomment {
267    margin: 0 0 10px 0;
268    text-align: left;
269}
270
271/* 商品詳細を見る */
272div.listrightbloc .detail_btn {
273    margin-bottom: 20px;
274}
275
276/* 価格 */
277div.listrightbloc .pricebox {
278    margin: 0 0 10px 0;
279}
280
281/* 買い物かご */
282div.listrightbloc .cart_area {
283    padding: 10px;
284    border: 1px solid #cef0f4;
285    background-color: #ecf5ff;
286    width: 94%;
287}
288
289/* 規格 */
290div.listrightbloc .classlist {
291    margin-bottom: 10px;
292    padding-bottom: 10px;
293    background: url("../img/background/line_dot_02.gif") repeat-x bottom ;
294}
295div.listrightbloc dl {
296    width: 100%;
297}
298div.listrightbloc dt {
299    display: inline-block;
300    vertical-align: top;
301}
302div.listrightbloc dd {
303    padding-bottom: 10px;
304    display: inline-block;
305}
306div.listrightbloc dd p.attention {
307    margin-top: 5px;
308}
309
310/* カゴに入れる */
311div.listrightbloc .cartin {
312    margin: 0;
313    float :right;
314}
315div.listrightbloc .cartin .quantity {
316    padding: 3px 10px 0 0;
317    width: 150px;
318    float :left;
319    text-align: right;
320}
321div.listrightbloc .cartin .quantity .box {
322    width: 70px;
323}
324div.listrightbloc .cartin_btn {
325    width: 160px;
326    float :left;
327}
328
329
330/* ==============================================
331▼商品詳細
332=============================================== */
333/* レイアウト
334
335    tplファイルのマークアップが同じ項目
336    *1カラム時 [one_maincolumn]
337    *2カラム時 [two_maincolumn_left]
338               [two_maincolumn_right]
339    *3カラム時 [three_maincolumn]
340
341----------------------------------------------- */
342#detailarea ,
343.sub_area {
344    margin-bottom: 20px;
345    width: 100%;
346}
347
348/* レイアウト
349----------------------------------------------- */
350/* 1カラム用 */
351#one_maincolumn div#detailphotobloc {
352    width: 37%;
353    float: left;
354}
355#one_maincolumn div#detailrightbloc {
356    width: 63%;
357    float: right;
358}
359#one_maincolumn div.subtext {
360    margin-bottom: 20px;
361    float: left;
362    width: 69%;
363}
364#one_maincolumn div.subphotoimg {
365    float: right;
366    width: 25%;
367    text-align: right;
368}
369#one_maincolumn p.subtext {
370    margin-bottom: 20px;
371}
372
373/* 2カラム用 */
374#two_maincolumn_left div#detailphotobloc ,
375#two_maincolumn_right div#detailphotobloc {
376    float: left;
377    width: 37%;
378}
379#two_maincolumn_left div#detailrightbloc ,
380#two_maincolumn_right div#detailrightbloc {
381    float: right;
382    width: 63%;
383}
384#two_maincolumn_left div.subtext,
385#two_maincolumn_right div.subtext {
386    margin-bottom: 20px;
387    float: left;
388    width: 73%;
389}
390#two_maincolumn_left p.subtext,
391#two_maincolumn_right p.subtext {
392    margin-bottom: 20px;
393}
394#two_maincolumn_left div.subphotoimg ,
395#two_maincolumn_right div.subphotoimg {
396    float: right;
397    width: 25%;
398    text-align: right;
399}
400
401/* 3カラム用 */
402#three_maincolumn div#detailphotobloc {
403    float: left;
404    width: 49%;
405}
406#three_maincolumn div#detailrightbloc {
407    float: right;
408    width: 50%;
409}
410#three_maincolumn div.subtext {
411    margin-bottom: 20px;
412    float: left;
413    width: 63%;
414}
415#three_maincolumn p.subtext {
416    margin-bottom: 20px;
417}
418#three_maincolumn div.subphotoimg {
419    float: right;
420    width: 35%;
421    text-align: right;
422}
423
424/* 商品情報 各種設定
425----------------------------------------------- */
426div#detailrightbloc h2 {
427    margin: 0 0 10px 0;
428    padding: 0 0 15px 0;
429    color: #666;
430    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
431    font-weight: bold;
432    font-size: 160%;
433}
434div#detailrightbloc .point ,
435div#detailrightbloc .relative_cat {
436    margin: 0 0 10px 0;
437    padding: 0 0 10px 0;
438    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
439}
440div#detailrightbloc .main_comment {
441    margin-bottom: 20px;
442}
443div.cart_area {
444    padding: 10px;
445    background-color: #ecf5ff;
446    border: 1px solid #cef0f4;
447}
448
449/* 商品ステータス */
450div#detailrightbloc ul.status_icon {
451    margin-bottom: 10px;
452    width: 100%;
453}
454div#detailrightbloc ul.status_icon li {
455    margin-right: 5px;
456    margin-bottom: 3px;
457    float: left;
458}
459
460/* 規格 */
461div#detailrightbloc div.classlist {
462    margin-bottom: 10px;
463    padding-bottom: 10px;
464    width: 100%;
465    background: url("../img/background/line_dot_02.gif") repeat-x bottom ;
466}
467div#detailrightbloc .classlist {
468    margin-bottom: 5px;
469}
470div#detailrightbloc ul {
471    margin-bottom: 10px;
472    width: 100%;
473}
474div#detailrightbloc ul li {
475    vertical-align: top;
476    float: left;
477}
478
479/* 買い物かご */
480div#detailrightbloc .cartin {
481    text-align: center;
482}
483div#detailrightbloc .cartin_btn {
484    text-align: center;
485}
486div#detailrightbloc .favorite_btn {
487    text-align: center;
488    margin-top: 10px;
489}
490
491
492/* お客様の声
493----------------------------------------------- */
494div#customervoice_area {
495    clear: both;
496    padding: 35px 0 0 0;
497}
498
499div#customervoice_area h2 {
500    margin-bottom: 20px;
501    padding: 6px 0 8px 10px;
502    border-top: solid 1px #f90;
503    background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom;
504}
505
506div#customervoice_area .review_bloc {
507    margin-bottom: 20px;
508    padding: 10px;
509    background-color: #f6f6f6;
510}
511
512div#customervoice_area .review_bloc p {
513    padding-top: 3px;
514    margin-right: 10px;
515    float: left;
516}
517
518div#customervoice_area review_bloc .review_btn {
519    float: right;
520    width: 160px;
521}
522
523div#customervoice_area ul li{
524    padding-bottom: 15px;
525    margin-bottom: 15px;
526    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
527}
528
529div#customervoice_area .voicetitle {
530    margin-bottom: 5px;
531    color: #333;
532    font-weight: bold;
533}
534
535div#customervoice_area .voicedate {
536    margin-bottom: 10px;
537}
538
539
540/* 関連商品(商品部分はbloc.cssのおすすめ商品と共通)
541----------------------------------------------- */
542div#whobought_area {
543    clear: both;
544    padding: 35px 0 0 0;
545}
546
547div#whobought_area h2 {
548    border-top: solid 1px #f90;
549    background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom;
550    padding: 5px 0 8px 10px;
551    font-size: 14px;
552}
553
554
555/* ***********************************************
556▼カートの中
557/*********************************************** */
558/* 現在のカゴの中
559----------------------------------------------- */
560div#undercolumn_cart .point_announce {
561    padding: 20px;
562    margin-bottom: 20px;
563    border: solid 1px #ffcc62;
564    background: #fffaf0;
565    font-size: 120%;
566    text-align: center;
567    line-height: 140%;
568}
569div#undercolumn_cart .totalmoney_area {
570    margin-bottom: 20px;
571}
572
573div#undercolumn_cart p {
574    margin: 10px 5px;
575}
576
577div#undercolumn ul#quantity_level li {
578    padding: 3px;
579    display: inline;
580}
581
582div#undercolumn .empty {
583    text-align: left;
584}
585
586div.form_area {
587    margin-bottom: 30px;
588}
589
590
591/* お客様情報入力
592----------------------------------------------- */
593div#undercolumn_customer {
594}
595
596.flow_area {
597    margin: 0 0 20px 0;
598}
599
600div#undercolumn_customer th em {
601    color: #000;
602    font-weight: bold;
603}
604
605
606/* お支払い方法・お届け時間等の指定
607----------------------------------------------- */
608div#undercolumn_shopping .pay_area {
609    margin: 0 auto 30px;
610    width: 100%;
611}
612div#undercolumn_shopping .pay_area02 {
613    margin: 40px auto 30px auto;
614}
615div#undercolumn_shopping .pay_area02 .txtarea {
616    margin: 5px 0 0 0;
617    padding: 2px;
618    border: 1px solid #ccc;
619    width: 99%;
620    height: 150px;
621}
622div#undercolumn_shopping .pay_area02 .select-msg {
623    margin-bottom: 10px;
624}
625
626div#undercolumn_shopping .point_area {
627    margin: 40px auto 0 auto;
628}
629
630div#undercolumn_shopping .point_area .point_announce {
631    padding: 20px;
632    border: 1px solid #ccc;
633}
634
635div#undercolumn_shopping .point_area p {
636    margin-bottom: 20px;
637}
638
639div#undercolumn_shopping .point_area .point_announce li {
640    margin-bottom: 5px;
641}
642
643
644/* お届け先の指定
645----------------------------------------------- */
646#address_area {
647    margin-bottom: 30px;
648    width: 100%;
649}
650
651#address_area .information {
652    width: 65%;
653    float: left;
654}
655
656#undercolumn_shopping .information {
657    margin-bottom: 10px;
658}
659
660#address_area .add_multiple {
661    padding: 15px 10px;
662    border: 1px solid #ffcc62;
663    float: right;
664    width: 30%;
665    color: #555;
666    background: #fffaf0;
667    text-align: center;
668    font-weight: bold;
669}
670
671#address_area .add_multiple p {
672    margin-bottom: 10px;
673}
674
675#address_area p.addbtn {
676    font-weight: bold;
677    font-size: 10px;
678}
679
680
681/* ==============================================
682▼検索結果
683=============================================== */
684p.condition_area {
685    margin: 0 auto;
686    padding: 5px;
687    border: solid 1px #333;
688    width: 566px;
689}
690
Note: See TracBrowser for help on using the repository browser.