source: branches/version-2_12-multilang/html/user_data/packages/sphone_en-US/css/products.css @ 22465

Revision 22465, 14.1 KB checked in by h_yoshimoto, 11 years ago (diff)

#2074 デフォルトデザインデータの差し替え
Line 
1@charset "utf-8";
2/* ===================================================================
3CSS information
4
5file name  :contents.css
6style info :コンテンツ用(商品一覧/検索結果/商品詳細)
7
8=================================================================== */
9/* -----------------------------------------------
10商品一覧・商品詳細・商品検索結果共通
11----------------------------------------------- */
12.pagenumberarea {
13    margin-top: 10px;
14    padding: 10px 0;
15    box-shadow: 0 1px 1px 1px rgba(255,255,255,1) inset;
16    -webkit-box-shadow: 0 1px 1px 0 rgba(255,255,255,1) inset;
17    -moz-box-shadow: 0 1px 1px rgba(255,255,255,1) inset;
18    border-top: 1px solid #CCC;
19    border-bottom: 1px solid #CCC;
20    background: #EEE;
21    display: block;
22}
23.pagenumberarea ul {
24    width: 95%;
25    margin: 0 auto;
26    border: #A9ABAD solid 1px;
27    border-radius: 5px;
28    -webkit-border-radius: 5px;
29    -moz-border-radius: 5px;
30    display: block;
31}
32.pagenumberarea li {
33    color: #000;
34    font-size: 16px;
35    font-weight: bold;
36    margin: 0;
37    padding: 0;
38    display: inline;
39    float: left;
40    width: 50%;
41    text-align: center;
42    color: #FFF;
43    background: #5393c5;
44    background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%);
45    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2));
46    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
47}
48.pagenumberarea li a:link,
49.pagenumberarea li a:visited {
50    color: #000;
51}
52.pagenumberarea li a {
53    color: #FFF;
54    display: block;
55    padding: 5px 0;
56    text-decoration: none;
57    text-shadow: 1px 1px 1px rgba(255,255,255,1);
58}
59.pagenumberarea li.on_number {
60    color: #FFF;
61    display: block;
62    padding: 5px 0;
63    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
64}
65.pagenumberarea li:first-child {
66    border-radius: 5px 0 0 5px;
67    -moz-border-radius: 5px 0 0 5px;
68    -webkit-border-radius: 5px 0 0 5px;
69}
70.pagenumberarea li:last-child {
71    border-radius: 0 5px 5px 0;
72    -moz-border-radius: 0 5px 5px 0;
73    -webkit-border-radius: 0 5px 5px 0;
74}
75.pagenumberarea li:first-child a {
76    border-radius: 5px 0 0 5px;
77    -moz-border-radius: 5px 0 0 5px;
78    -webkit-border-radius: 5px 0 0 5px;
79    border-right: #A9ABAD solid 1px;
80    text-shadow: 1px 1px 1px rgba(255,255,255,1);
81    background: #FDFDfD;
82    background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);
83    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));
84}
85.pagenumberarea li:last-child a {
86    border-radius: 0 5px 5px 0;
87    -moz-border-radius: 0 5px 5px 0;
88    -webkit-border-radius: 0 5px 5px 0;
89    border-left: #FFF solid 1px;
90    text-shadow: 1px 1px 1px rgba(255,255,255,1);
91    background: #FDFDfD;
92    background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);
93    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));
94    box-shadow: 1px 0px 1px 1px rgba(255,255,255,1) inset;
95    -webkit-box-shadow: 1px 0px 1px 0px rgba(255,255,255,1) inset;
96    -moz-box-shadow: 1px 1px 1px 0px rgba(255,255,255,1) inset;
97}
98.pagenumberarea li.on_number {
99    color: #FFF;
100    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
101    background: #5393c5;
102    background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%);
103    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2));
104}
105ul.status_icon {
106    clear: both;
107}
108ul.status_icon li {
109    color: #FFF;
110    background: #9AAABD;
111    display: inline;
112    float: left;
113    margin-right :5px;
114    margin-bottom: 2px;
115    padding: 2px 5px;
116    font-size: 11px;
117    text-shadow: none;
118}
119/* -----------------------------------------------
120商品一覧
121----------------------------------------------- */
122#product_list {
123    padding-bottom: 35px;
124}
125
126/* アイテムリスト(div)の処理
127----------------------------------------------- */
128.list_area {
129    margin: 0;
130    padding: 10px 5px 15px 10px;
131    background-color: #FEFEFE;
132    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE));
133    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE));
134    border-top: #FFF solid 1px;
135    border-bottom: #CCC solid 1px;
136    display: block;
137    clear: both;
138    position: relative;
139    cursor: pointer;
140}
141.list_area ul.status_icon {
142    margin-bottom: 5px;
143}
144.listphoto {
145    margin: 0 10px 10px 0;
146    float: left;
147    clear: left;
148}
149.listrightblock {
150    width: 67%;
151    float: right;
152    padding-right: 10px;
153}
154.listrightblock h3 {
155    font-size: 15px;
156    clear: both;
157}
158.listrightblock .listcomment {
159    line-height: 1.4;
160}
161
162/* -----------------------------------------------
163商品詳細
164----------------------------------------------- */
165#product_detail {
166    padding-bottom: 35px;
167}
168/*商品情報*/
169#detailarea {
170    background: #F0F0F1;
171    padding: 20px 10px 35px 10px;
172}
173#detailrightblock {
174    margin-top: 25px;
175    padding: 0;
176    background: #FFF;
177    border: #CCC solid 1px;
178    border-radius: 7px;
179    -moz-border-radius: 7px;
180    -webkit-border-radius: 7px;
181}
182#detailrightblock div:after {
183    content: ".";
184    display: block;
185    clear: both;
186    height: 0;
187    visibility: hidden;
188}
189#detailrightblock div {
190    border-bottom: #CCC solid 1px;
191}
192#detailrightblock div#cartbtn_default {
193    border-bottom: none;
194}
195#detailrightblock div:last-child {
196    border-bottom: none;
197    border-radius: 0 0 7px 7px;
198    -moz-border-radius: 0 0 7px 7px;
199    -webkit-border-radius: 0 0 7px 7px;
200}
201/* 商品ステータスアイコン */
202#detailrightblock .status_icon {
203    padding: 10px 12px;
204    border-bottom: #CCC solid 1px;
205}
206/*商品情報（テキストなど）*/
207#detailrightblock .product_detail {
208    padding: 12px;
209    border-bottom: #CCC solid 1px;
210}
211#detailrightblock h3 {
212    font-size: 14px;
213    clear: both;
214}
215#detailrightblock .price {
216    font-size: 14px;
217}
218#detailrightblock .normal_price {
219    font-size: 11px;
220}
221.relative_cat {
222    font-size: 12px;
223    margin-bottom: 10px;
224}
225
226/*商品情報（規格部分）*/
227.cart_area {
228    padding: 12px;
229}
230.cart_area dl {
231    margin: 0;
232    padding: 0;
233}
234.cart_area dt {
235    margin: 0;
236    font-weight: bold;
237    line-height: 1.3;
238}
239.cart_area dd {
240    padding: 0;
241    clear: both;
242    padding-bottom: 5px;
243}
244.cart_area dd:last-child {
245    padding-bottom: 0;
246}
247
248/*商品情報（数量）*/
249.cartin_btn {
250    padding: 15px 15px 15px 8px;
251    background: #F1F0E7;
252    border-top: #FFF solid 1px;
253}
254.cartin_btn dl {
255    width: 45%;
256    float: left;
257    clear: left;
258}
259.cartin_btn dt {
260    width: 50%;
261    float: left;
262    padding: 15px 5px 0 5px;
263    line-height: 1.1;
264    font-weight: bold;
265}
266.cartin_btn dd {
267    width: 3.2em;
268    display: inline;
269    float: left;
270    padding-top: 5px;
271}
272.detail_quantity dd .quantitybox {
273    width: 3em;
274}
275.cartbtn_default {
276    width: auto !important;
277    float: right;
278    clear: right;
279}
280
281/*お気に入り*/
282.btn_favorite {
283    padding: 10px 15px;
284    background: #F1F0E7;
285}
286/*サブエリア*/
287.subarea {
288    padding: 0 10px 20px 10px;
289    margin-bottom: 15px;
290    border-bottom: #CCC solid 1px;
291    clear: both;
292}
293.subarea h3 {
294    margin-bottom: 10px;
295    padding: 5px 0;
296    border-bottom: #CCC solid 1px;
297    clear: both;
298}
299.subphotoimg {
300    margin-left: 10px;
301    float: right;
302    clear: right;
303}
304#sub_area div:last-child {
305    border-bottom: none;
306}
307/*商品詳細メイン画像スライド*/
308#detailphotoblock {
309    width: 100%;
310    background-color: #ffffff;
311    text-align: center;
312    -webkit-box-shadow: 1px 5px 5px #ccc;
313    -moz-box-shadow: 1px 5px 5px #ccc;
314    position: relative;
315}
316#detailphotoblock div.moveWrap {
317    width: 200px;
318    height: 220px;
319    margin: 0 auto;
320    position: relative;
321    overflow: hidden;
322    -webkit-box-sizing: border-box;
323}
324#detailphotoblock ul.moveWrapBG {
325    width: 200px;
326    height: auto;
327    visibility: hidden;
328    display: inline-block;
329    position: relative;
330    -webkit-box-sizing: border-box;
331    margin: 0 auto;
332    padding: 0;
333}
334#detailphotoblock li {
335    width: 200px;
336}
337#detailphotoblock div.slideMask {
338    position: absolute;
339    top: 0;
340    left: 0;
341    /*border:4px #FFF solid;*/
342    -webkit-box-sizing: border-box;
343    margin-right: 0!important;
344}
345#detailphotoblock div.moveWrap>ul.move {
346    margin: 0;
347    padding: 0;
348    position: relative;
349    left: 0;
350    top: 0;
351    list-style: none;
352    width: 2000px;
353    -webkit-transition: all 0.6s ease-in-out;
354    -webkit-transform: translate3d(0,0,0);
355    -webkit-transition-duration: 400ms;
356    -webkit-transition-property: -webkit-transform;
357    margin: 0;
358    padding: 0;
359    display: none;
360}
361#detailphotoblock div.moveWrap>ul.move li.slideUnit {
362    margin: 0px;
363    padding: 0;
364    float: left;
365    list-style: none;
366    text-align: center;
367    -webkit-box-sizing: border-box;
368}
369#detailphotoblock li.slideUnit>div {
370    padding: 0px;
371    display: inline-block;
372    vertical-align: middle;
373    text-align: center;
374    -webkit-box-sizing: border-box;
375}
376
377.flickSlideContainer {
378}
379
380#detailphotoblock div.flickSlideBottom {
381    width: 100%;
382}
383#detailphotoblock div.flickSlideBottom div.bottomLeft,
384#detailphotoblock div.flickSlideBottom div.bottomRight {
385    padding: 0 10px;
386    display: table-cell;
387    vertical-align: middle;
388}
389#detailphotoblock div.flickSlideBottom div.bottomRight {
390    font-size: 24px;
391    font-weight: bold;
392    color: #7F7F7F;
393    background-color: transparent;
394    right: 5px;
395    top: 100px;
396    position: absolute;
397}
398#detailphotoblock div.flickSlideBottom div.bottomLeft {
399    font-size: 24px;
400    font-weight: bold;
401    color: #7F7F7F;
402    background-color: transparent;
403    left: 5px;
404    top: 100px;
405    position: absolute;
406}
407#detailphotoblock div.flickSlideBottom div.bottomLeft:after {
408    font-size: 12px;
409    padding: 5px;
410    text-align: left;
411    display: table-cell;
412}
413#detailphotoblock div.flickSlideBottom div.bottomLeft:before {
414    padding: 5px;
415    text-align: left;
416    display: table-cell;
417}
418#detailphotoblock div.flickSlideBottom div.bottomRight:before {
419    font-size: 12px;
420    padding: 5px;
421    text-align: right;
422    display: table-cell;
423}
424#detailphotoblock div.flickSlideBottom div.bottomRight:after {
425    padding: 5px;
426    text-align: right;
427    display: table-cell;
428}
429#detailphotoblock div.flickSlideBottom ul.slidePager {
430    display: block;
431    width: auto;
432    text-align: center;
433    margin: 0 auto;;
434    padding: 0;
435}
436#detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer {
437    font-size: 11px;
438    width: 6px;
439    height: 6px;
440    margin: 0 6px 10px 6px;
441    display: inline-block;
442    background-color: #CCC;
443    border-radius: 6px;
444    -webkit-border-radius: 6px;
445    -moz-border-radius: 6px;
446}
447#detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer.active {
448    background-color: #333;
449}
450
451/*レビュー*/
452
453#review_bloc_area {
454    clear: both;
455    padding: 0 10px 10px;
456}
457#review_bloc_area .review_btn {
458    margin: 10px 0;
459}
460
461
462/*その他オススメ商品スライド*/
463#product_detail .title_box_sub:last-child {
464    margin-top: 20px;
465}
466#whobought_area {
467    width: 100%;
468    margin-top: 15px;
469    margin-bottom: 15px;
470    clear: both;
471    position: relative;
472}
473#whobought_area h3 {
474    clear: both;
475    line-height: 1.2;
476}
477/*liの長さ追加*/
478#whobought_area li {
479    width: 80px;
480}
481#whobought_area li img {
482    margin-bottom: 5px;
483    clear: both;
484}
485#whobought_area .sale_price {
486    clear: both;
487    float: right;
488    text-align: right;
489}
490#whobought_area div.moveWrap {
491    width: 80%;
492    height: auto;
493    position: relative;
494    margin: 0 auto;
495    overflow: hidden;
496    -webkit-box-sizing: border-box;
497}
498#whobought_area ul.moveWrapBG {
499    width: auto;
500    height: auto;
501    display: inline-block;
502    position: relative;
503    visibility: hidden;
504    -webkit-box-sizing: border-box;
505    margin: 0;
506    padding: 0;
507}
508#whobought_area div.slideMask {
509    position: absolute;
510    top: 0;
511    left: 0;
512    border: 4px #FFF solid;
513    -webkit-box-sizing: border-box;
514    margin-right: 1px;
515}
516#whobought_area div.moveWrap>ul.move {
517    width: 600px;
518    margin: 0;
519    padding: 0;
520    position: relative;
521    left: 0;
522    top: 0;
523    list-style: none;
524    -webkit-transition: all 0.6s ease-in-out;
525    -webkit-transform: translate3d(0,0,0);
526    /*-webkit-transition-duration: 400ms;
527    -webkit-transition-property: -webkit-transform;
528    */
529    margin: 0;
530    padding: 0;
531    display: none;
532}
533#whobought_area div.moveWrap>ul.move li.slideUnit {
534    width: 85px!important;
535    float: left;
536    display: inline;
537    list-style: none;
538    padding: 4px 8px 4px 0;
539    margin-right: 0px;
540    -webkit-box-sizing: border-box;
541}
542#whobought_area li.slideUnit>div {
543    padding: 4px;
544    display: inline;
545    vertical-align: middle;
546    -webkit-box-sizing: border-box;
547}
548#whobought_area div.flickSlideBottom {
549    width: 100%;
550    margin-top: 5px;
551}
552#whobought_area div.flickSlideBottom div.bottomLeft,
553#whobought_area div.flickSlideBottom div.bottomRight {
554    padding: 0 10px;
555    display: table-cell;
556    vertical-align: middle;
557}
558#whobought_area div.flickSlideBottom div.bottomRight {
559    font-size: 16px;
560    font-weight: bold;
561    color: #7F7F7F;
562    background-color: transparent;
563    right: 0;
564    top: 80px;
565    position: absolute;
566}
567#whobought_area div.flickSlideBottom div.bottomLeft {
568    font-size: 16px;
569    font-weight: bold;
570    color: #7F7F7F;
571    background-color: transparent;
572    left: 0;
573    top: 80px;
574    position: absolute;
575}
576#whobought_area div.flickSlideBottom div.bottomLeft:after {
577    font-size: 10px;
578    padding: 0;
579    text-align: left;
580    display: table-cell;
581}
582#whobought_area div.flickSlideBottom div.bottomLeft:before {
583    padding: 0;
584    text-align: left;
585    display: table-cell;
586}
587#whobought_area div.flickSlideBottom div.bottomRight:before {
588    font-size: 10px;
589    padding: 0;
590    text-align: right;
591    display: table-cell;
592}
593#whobought_area div.flickSlideBottom div.bottomRight:after {
594    padding: 0;
595    text-align: right;
596    display: table-cell;
597}
598#whobought_area div.flickSlideBottom ul.slidePager {
599    display: block;
600    width: auto;
601    text-align: center;
602    margin: 0 auto;
603    padding: 0;
604}
605#whobought_area div.flickSlideBottom ul.slidePager li.slidePagerPointer {
606    display: none;
607}
608
Note: See TracBrowser for help on using the repository browser.