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

Revision 20681, 14.4 KB checked in by nagano, 13 years ago (diff)

デザイン調整

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    width:80%;
175    margin: 30px auto;
176    padding: 30px;
177    border: 1px solid #ccc;
178    text-align: center;
179}
180
181div#undercolumn_error .message_area .error {
182    padding: 120px 0;
183}
184
185
186/* ==============================================
187▼商品一覧
188=============================================== */
189/* ページ送り
190----------------------------------------------- */
191.pagenumber_area {
192    padding-bottom: 10px;
193    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
194}
195.pagecond_area {
196    margin-bottom: 20px;
197    padding: 10px;
198}
199.pagenumber_area {
200    margin: 20px 0;
201}
202.pagecond_area {
203    border: 1px solid #ccc;
204}
205.pagenumber_area .navi {
206    width: 100%;
207    text-align: left;
208}
209.pagenumber_area .change {
210    float: right;
211    text-align: right;
212    white-space: nowrap;
213}
214
215
216/* レイアウト
217----------------------------------------------- */
218div.list_area {
219    padding: 0 0 30px 0;
220    width: 100%;
221    overflow: auto;
222}
223
224div.listphoto {
225    float: left;
226}
227
228/* メインカラム用 1カラム時*/
229#one_maincolumn div.listrightbloc {
230    float: right;
231    width: 74%;
232}
233
234/* メインカラム用 2カラム時*/
235#two_maincolumn_right div.listrightbloc ,
236#two_maincolumn_left div.listrightbloc {
237    float: right;
238    width: 80%;
239}
240
241/* メインカラム用 3カラム時*/
242#three_maincolumn div.listrightbloc {
243    float: right;
244    width: 74%;
245}
246
247
248/* 商品情報 各種設定
249----------------------------------------------- */
250/* 商品ステータス */
251div.listrightbloc ul.status_icon {
252    margin-bottom: 10px;
253    width: 100%;
254}
255div.listrightbloc ul.status_icon li {
256    margin-right: 5px;
257    float: left;
258}
259
260/* 商品名 */
261div.listrightbloc h3 {
262    font-weight: bold;
263    font-size: 120%;
264}
265
266/* コメント */
267div.listrightbloc .listcomment {
268    margin: 0 0 10px 0;
269    text-align: left;
270}
271
272/* 商品詳細を見る */
273div.listrightbloc .detail_btn {
274    margin-bottom: 20px;
275}
276
277/* 価格 */
278div.listrightbloc .pricebox {
279    margin: 0 0 10px 0;
280}
281
282/* 買い物かご */
283div.listrightbloc .cart_area {
284    padding: 10px;
285    border: 1px solid #cef0f4;
286    background-color: #ecf5ff;
287    width: 94%;
288}
289
290/* 規格 */
291div.listrightbloc .classlist {
292    margin-bottom: 10px;
293    padding-bottom: 10px;
294    background: url("../img/background/line_dot_02.gif") repeat-x bottom ;
295}
296div.listrightbloc dl {
297    width: 100%;
298}
299div.listrightbloc dt {
300    display: inline-block;
301    vertical-align: top;
302}
303div.listrightbloc dd {
304    padding-bottom: 10px;
305    display: inline-block;
306}
307div.listrightbloc dd p.attention {
308    margin-top: 5px;
309}
310
311/* カゴに入れる */
312div.listrightbloc .cartin {
313    margin: 0;
314    float :right;
315}
316div.listrightbloc .cartin .quantity {
317    padding: 3px 10px 0 0;
318    width: 150px;
319    float :left;
320    text-align: right;
321}
322div.listrightbloc .cartin .quantity .box {
323    width: 70px;
324}
325div.listrightbloc .cartin_btn {
326    width: 160px;
327    float :left;
328}
329
330
331/* ==============================================
332▼商品詳細
333=============================================== */
334/* レイアウト
335
336    tplファイルのマークアップが同じ項目
337    *1カラム時 [one_maincolumn]
338    *2カラム時 [two_maincolumn_left]
339               [two_maincolumn_right]
340    *3カラム時 [three_maincolumn]
341
342----------------------------------------------- */
343#detailarea ,
344.sub_area {
345    margin-bottom: 20px;
346    width: 100%;
347}
348
349/* レイアウト
350----------------------------------------------- */
351/* 1カラム用 */
352#one_maincolumn div#detailphotobloc {
353    width: 37%;
354    float: left;
355}
356#one_maincolumn div#detailrightbloc {
357    width: 63%;
358    float: right;
359}
360#one_maincolumn div.subtext {
361    margin-bottom: 20px;
362    float: left;
363    width: 69%;
364}
365#one_maincolumn div.subphotoimg {
366    float: right;
367    width: 25%;
368    text-align: right;
369}
370#one_maincolumn p.subtext {
371    margin-bottom: 20px;
372}
373
374/* 2カラム用 */
375#two_maincolumn_left div#detailphotobloc ,
376#two_maincolumn_right div#detailphotobloc {
377    float: left;
378    width: 37%;
379}
380#two_maincolumn_left div#detailrightbloc ,
381#two_maincolumn_right div#detailrightbloc {
382    float: right;
383    width: 63%;
384}
385#two_maincolumn_left div.subtext,
386#two_maincolumn_right div.subtext {
387    margin-bottom: 20px;
388    float: left;
389    width: 73%;
390}
391#two_maincolumn_left p.subtext,
392#two_maincolumn_right p.subtext {
393    margin-bottom: 20px;
394}
395#two_maincolumn_left div.subphotoimg ,
396#two_maincolumn_right div.subphotoimg {
397    float: right;
398    width: 25%;
399    text-align: right;
400}
401
402/* 3カラム用 */
403#three_maincolumn div#detailphotobloc {
404    float: left;
405    width: 49%;
406}
407#three_maincolumn div#detailrightbloc {
408    float: right;
409    width: 50%;
410}
411#three_maincolumn div.subtext {
412    margin-bottom: 20px;
413    float: left;
414    width: 63%;
415}
416#three_maincolumn p.subtext {
417    margin-bottom: 20px;
418}
419#three_maincolumn div.subphotoimg {
420    float: right;
421    width: 35%;
422    text-align: right;
423}
424
425/* 商品情報 各種設定
426----------------------------------------------- */
427div#detailrightbloc h2 {
428    margin: 0 0 10px 0;
429    padding: 0 0 15px 0;
430    color: #666;
431    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
432    font-weight: bold;
433    font-size: 160%;
434}
435div#detailrightbloc .point ,
436div#detailrightbloc .relative_cat {
437    margin: 0 0 10px 0;
438    padding: 0 0 10px 0;
439    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
440}
441div#detailrightbloc .main_comment {
442    margin-bottom: 20px;
443}
444div.cart_area {
445    padding: 10px;
446    background-color: #ecf5ff;
447    border: 1px solid #cef0f4;
448}
449
450/* 商品ステータス */
451div#detailrightbloc ul.status_icon {
452    margin-bottom: 10px;
453    width: 100%;
454}
455div#detailrightbloc ul.status_icon li {
456    margin-right: 5px;
457    margin-bottom: 3px;
458    float: left;
459}
460
461/* 規格 */
462div#detailrightbloc div.classlist {
463    margin-bottom: 10px;
464    padding-bottom: 10px;
465    width: 100%;
466    background: url("../img/background/line_dot_02.gif") repeat-x bottom ;
467}
468div#detailrightbloc .classlist {
469    margin-bottom: 5px;
470}
471div#detailrightbloc ul {
472    margin-bottom: 10px;
473    width: 100%;
474}
475div#detailrightbloc ul li {
476    vertical-align: top;
477    float: left;
478}
479
480/* 買い物かご */
481div#detailrightbloc .cartin {
482    text-align: center;
483}
484div#detailrightbloc .cartin_btn {
485    text-align: center;
486}
487div#detailrightbloc .favorite_btn {
488    text-align: center;
489    margin-top: 10px;
490}
491
492
493/* お客様の声
494----------------------------------------------- */
495div#customervoice_area {
496    clear: both;
497    padding: 35px 0 0 0;
498}
499
500div#customervoice_area h2 {
501    margin-bottom: 20px;
502    padding: 6px 0 8px 10px;
503    border-top: solid 1px #f90;
504    background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom;
505}
506
507div#customervoice_area .review_bloc {
508    margin-bottom: 20px;
509    padding: 10px;
510    background-color: #f6f6f6;
511}
512
513div#customervoice_area .review_bloc p {
514    padding-top: 3px;
515    margin-right: 10px;
516    float: left;
517}
518
519div#customervoice_area review_bloc .review_btn {
520    float: right;
521    width: 160px;
522}
523
524div#customervoice_area ul li{
525    padding-bottom: 15px;
526    margin-bottom: 15px;
527    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
528}
529
530div#customervoice_area .voicetitle {
531    margin-bottom: 5px;
532    color: #333;
533    font-weight: bold;
534}
535
536div#customervoice_area .voicedate {
537    margin-bottom: 10px;
538}
539
540
541/* 関連商品(商品部分はbloc.cssのおすすめ商品と共通)
542----------------------------------------------- */
543div#whobought_area {
544    clear: both;
545    padding: 35px 0 0 0;
546}
547
548div#whobought_area h2 {
549    border-top: solid 1px #f90;
550    background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom;
551    padding: 5px 0 8px 10px;
552    font-size: 14px;
553}
554
555
556/* ***********************************************
557▼カートの中
558/*********************************************** */
559/* 現在のカゴの中
560----------------------------------------------- */
561div#undercolumn_cart .point_announce {
562    padding: 20px;
563    margin-bottom: 20px;
564    border: solid 1px #ffcc62;
565    background: #fffaf0;
566    font-size: 120%;
567    text-align: center;
568    line-height: 140%;
569}
570div#undercolumn_cart .totalmoney_area {
571    margin-bottom: 20px;
572}
573
574div#undercolumn_cart p {
575    margin: 10px 5px;
576}
577
578div#undercolumn ul#quantity_level li {
579    padding: 3px;
580    display: inline;
581}
582
583div#undercolumn .empty {
584    text-align: left;
585}
586
587div.form_area {
588    margin-bottom: 30px;
589}
590
591
592/* お客様情報入力
593----------------------------------------------- */
594div#undercolumn_customer {
595}
596
597.flow_area {
598    margin: 0 0 20px 0;
599}
600
601div#undercolumn_customer th em {
602    color: #000;
603    font-weight: bold;
604}
605
606
607/* お支払い方法・お届け時間等の指定
608----------------------------------------------- */
609div#undercolumn_shopping .pay_area {
610    margin: 0 auto 30px;
611    width: 100%;
612}
613div#undercolumn_shopping .pay_area02 {
614    margin: 40px auto 30px auto;
615}
616div#undercolumn_shopping .pay_area02 .txtarea {
617    margin: 5px 0 0 0;
618    padding: 2px;
619    border: 1px solid #ccc;
620    width: 99%;
621    height: 150px;
622}
623div#undercolumn_shopping .pay_area02 .select-msg {
624    margin-bottom: 10px;
625}
626
627div#undercolumn_shopping .point_area {
628    margin: 40px auto 0 auto;
629}
630
631div#undercolumn_shopping .point_area .point_announce {
632    padding: 20px;
633    border: 1px solid #ccc;
634}
635
636div#undercolumn_shopping .point_area p {
637    margin-bottom: 20px;
638}
639
640div#undercolumn_shopping .point_area .point_announce li {
641    margin-bottom: 5px;
642}
643
644
645/* お届け先の指定
646----------------------------------------------- */
647#address_area {
648    margin-bottom: 10px;
649    width: 100%;
650}
651
652#address_area .information {
653    width: 65%;
654    float: left;
655}
656
657#undercolumn_shopping .information {
658    margin-bottom: 15px;
659}
660
661#address_area .add_multiple {
662    padding: 15px 10px;
663    border: 1px solid #ffcc62;
664    float: right;
665    width: 30%;
666    color: #555;
667    background: #fffaf0;
668    text-align: center;
669    font-weight: bold;
670}
671
672#address_area .add_multiple p {
673    margin-bottom: 10px;
674}
675
676#address_area p.addbtn {
677    font-weight: bold;
678    font-size: 10px;
679}
680
681
682/* ==============================================
683▼検索結果
684=============================================== */
685p.condition_area {
686    margin: 0 auto;
687    padding: 5px;
688    border: solid 1px #333;
689    width: 566px;
690}
691
Note: See TracBrowser for help on using the repository browser.