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

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