source: branches/version-2_11-dev/html/user_data/packages/sphone/css/contents.css @ 21052

Revision 21052, 10.2 KB checked in by 468, 13 years ago (diff)

#1413 スマートフォン版スタイルシートファイル変更(HTML5対応)

  • Property svn:mime-type set to text/plain
Line 
1@charset "utf-8";
2/* ===================================================================
3CSS information
4file name  :contents.css
5style info :下層コンテンツ用(#undercolumn)
6=================================================================== */
7/* -----------------------------------------------
8#undercolumn 汎用
9----------------------------------------------- */
10#undercolumn{
11padding-bottom:35px;
12}
13/**イントロダクション*/
14.information{
15font-weight:bold;
16padding:5px 10px;
17line-height:1.3;
18border-bottom:#CCC solid 1px;
19}
20.information p:first-child{
21font-size:14px;
22margin-bottom:0.5em;
23}
24/*フォーム枠*/
25.form_area{
26padding:10px;
27}
28.form_area p:first-child{
29margin-bottom:0.5em;
30}
31.formBox{
32margin-bottom:20px;
33border:#A9ABAD solid 1px;
34border-radius:7px;
35-moz-border-radius:7px;
36-webkit-border-radius:7px;
37}
38.innerBox{
39padding:10px;
40border-bottom:#CCC solid 1px;
41}
42.arrowBox{
43padding:10px 25px 10px 10px;
44background:url(../img/common/ico_arrowR.png) 95% center no-repeat;
45border-bottom:#CCC solid 1px;
46clear:both;
47}
48@media only screen and (-webkit-min-device-pixel-ratio: 2) {
49.arrowBox {
50background: url(../img/common/ico_arrowR2.png) 95% center no-repeat;
51-webkit-background-size: 10px 15px;
52background-size: 10px 15px;
53}
54}
55.box_header{
56font-size:16px;
57font-weight:bold;
58background:#EEE;
59padding:10px;
60border-radius:7px 7px 0 0;
61-moz-border-radius:7px 7px 0 0;
62-webkit-border-radius:7px 7px 0 0;
63border-bottom:#CCC solid 1px;
64}
65/*合計(フォーム下)*/
66.total_area,.result_area{
67padding:10px;
68text-align:right;
69background:#F7F5F0;
70border-top:#FFF solid 1px;
71border-bottom:#A9ABAD solid 1px;
72}
73.formBox .btn_area_btm{
74padding:10px;
75background:#F7F5F0;
76border-top:#FFF solid 1px;
77border-bottom:none;
78border-radius:0 0 7px 7px;
79-moz-border-radius: 0 0 7px 7px;
80-webkit-border-radius: 0 0 7px 7px;
81}
82.formBox div:first-child{
83border-radius:7px 7px 0 0;
84-moz-border-radius:7px 7px 0 0;
85-webkit-border-radius:7px 7px 0 0;
86}
87.formBox div:last-child{
88border-radius:0 0 7px 7px;
89-moz-border-radius: 0 0 7px 7px;
90-webkit-border-radius: 0 0 7px 7px;
91border-bottom:none;
92}
93.form_area div:after{
94content: "."; 
95display: block;
96clear: both;
97height: 0;
98visibility: hidden;
99}
100
101/* -----------------------------------------------
102カートボックス
103----------------------------------------------- */
104
105/*カゴの中の商品*/
106.cartinarea{
107padding:10px;
108border-bottom:#CCC solid 1px;
109}
110.cartitemBox{
111padding:10px 0;
112border-bottom:#CCC solid 1px;
113clear:both;
114}
115.cartinarea .cartitemBox:last-child{
116border-bottom:none;
117}
118.cartinarea .photoL{
119width:80px;
120}
121.cartinarea .cartinContents{
122width:68%;
123float:right;
124display:block;
125position:relative;
126}
127/* -----------------------------------------------
128ふきだしボックス
129----------------------------------------------- */
130.bubbleBox{
131width:90%;
132font-weight:bold;
133margin:10px auto 20px auto;
134padding:10px 15px;
135position:relative;
136background-color:#F6F6F6;
137border:1px solid #C5C4C0;
138-moz-border-radius:7px;
139-webkit-border-radius:7px;
140-moz-box-shadow:inset 1px 1px 1px #FFF;
141-webkit-box-shadow:inset 1px 1px 1px #FFF;
142cursor:pointer;
143}
144.bubble_arrow_line{
145width:0;
146height:0;
147border-color: #C5C4C0 transparent transparent transparent;
148border-style: solid;
149border-width: 10px;
150position:absolute;
151bottom:-21px;
152left:50%;
153}
154.bubble_arrow{
155width:0;
156height:0;
157border-color: #F6F6F6 transparent transparent transparent;
158border-style: solid;
159border-width: 10px;
160position:absolute;
161bottom:-19px;
162left:50%;
163}
164.bubble_announce{
165height:2.5em;
166background:url(../img/common/ico_arrowR.png)  right center no-repeat;
167clear:both;
168vertical-align:middle;
169margin-bottom:8px;
170}
171 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
172.bubble_announce {
173background: url(../img/common/ico_arrowR2.png) right center no-repeat;
174-webkit-background-size: 10px 15px;
175background-size: 10px 15px;
176}
177}
178.bubbleBox p.fb{
179line-height:2.5em;
180}
181.deliv_announce p{
182width:80%;
183}
184.bubbleBox a:link,.bubbleBox a:visited{
185color:#333;
186}
187/* -----------------------------------------------
188カートの中ページ
189----------------------------------------------- */
190.totalmoney_area{
191font-size:14px;
192font-weight:bold;
193padding:10px;
194border-bottom:#CCC solid 1px;
195}
196.point_announce{
197font-size:14px;
198font-weight:bold;
199margin-bottom:5px;
200}
201.cartinContents .btn_delete{
202padding:2px;
203right:0;
204float:right;
205position:absolute;
206top:0;
207cursor:pointer;
208}
209.cartinContents ul{
210float:right;
211clear:both;
212line-height:1.1;
213}
214.cartinContents ul li{
215display:inline;
216float:left;
217}
218.cartinContents ul li.result{
219padding-left:0.5em;
220padding-top:1em;
221vertical-align:bottom;
222}
223
224/* -----------------------------------------------
225お届け先指定
226----------------------------------------------- */
227.deliv_check{
228clear:both;
229}
230.deliv_check dt{
231font-size:14px;
232font-weight:bold;
233padding:15px 10px 5px 10px;
234background:#EEE;
235border-top:#FFF solid 1px;
236vertical-align:middle;
237position:relative;
238display:block;
239}
240.deliv_check dt p{
241vertical-align:middle;
242}
243.deliv_check dd{
244font-size:12px;
245padding:10px;
246border-bottom:#CCC solid 1px;
247display:block;
248}
249.deliv_check dd p{
250display:inline;
251float:left;
252}
253.deliv_check ul.edit{
254float:right;
255clear:right;
256display:inline;
257line-height:1.1;
258position:absolute;
259right:10px;
260top:8px;
261}
262.deliv_check dt:first-child{
263border-top:none;
264border-radius:7px 7px 0 0;
265-moz-border-radius:7px 7px 0 0;
266-webkit-border-radius:7px 7px 0 0;
267}
268
269/* -----------------------------------------------
270お届け先指定(複数)
271----------------------------------------------- */
272.delivitemBox{
273padding:10px;
274border-bottom:#CCC solid 1px;
275clear:both;
276position:relative;
277}
278.delivitemBox .photoL{
279width:80px;
280}
281.delivitemBox .delivContents{
282width:67%;
283float:right;
284display:block;
285position:relative;
286}
287.delivContents p{
288float:left;
289}
290.delivContents ul{
291width:2.2em;
292float:right;
293right:15px;
294position:absolute;
295}
296.delivContents ul li{
297text-align:center;
298clear:both;
299}
300
301/* -----------------------------------------------
302お支払方法・お届け時間等の指定
303----------------------------------------------- */
304.pay_area ul{
305padding:10px;
306margin-bottom:10px;
307font-weight:bold;
308}
309.pay_area ul li{
310margin-bottom:6px;
311}
312.pay_area02 select:first-child{
313margin-bottom:12px;
314}
315p.check_point{
316font-size:12px;
317padding-left:1em;
318font-weight:normal;
319}
320p.check_point .box_point{
321margin-right:0.5em;
322}
323/* -----------------------------------------------
324ご注文内容のご確認
325----------------------------------------------- */
326.cartcartconfirmarea{
327padding:0 10px;
328border-bottom:#CCC solid 1px;
329}
330.cartconfirmBox{
331padding:10px 0;
332border-bottom:#CCC solid 1px;
333clear:both;
334position:relative;
335}
336.cartconfirmBox:last-child{
337border-bottom:none;
338}
339.cartconfirmBox .photoL{
340width:80px;
341float:left;
342}
343.cartconfirmContents{
344width:67%;
345float:right;
346display:block;
347position:relative;
348}
349.cartconfirmBox ul{
350float:right;
351clear:both;
352line-height:1.1;
353}
354.cartconfirmBox ul li{
355display:inline;
356font-weight:bold;
357}
358.cartconfirmBox ul li.result{
359padding-left:1em;
360vertical-align:bottom;
361}
362.result_area{
363font-size:14px;
364font-weight:bold;
365}
366.result_area dl{
367text-align:right;
368float:right;
369display:block;
370}
371.result_area dt,.result_area dd{
372text-align:right;
373}
374.result_area dt{
375font-size:11px;
376clear:left;
377float:right;
378}
379dl.point dl{
380display:block;
381}
382.point_confifrm dl{
383font-weight:bold;
384border-bottom:#CCC solid 1px;
385}
386.point_confifrm dl:last-child{
387border-bottom:none;
388}
389.point_confifrm dt{
390width:60%;
391padding:10px 0 10px 10px;
392float:left;
393display:block;
394}
395.point_confifrm dd{
396width:30%;
397padding:10px 10px 10px 0;
398float:left;
399text-align:right;
400}
401.deliv_confirm dt{
402font-size:14px;
403font-weight:bold;
404padding:10px;
405background:#EEE;
406border-top:#FFF solid 1px;
407border-radius:7px 7px 0 0;
408-moz-border-radius:7px 7px 0 0;
409-webkit-border-radius:7px 7px 0 0;
410line-height:1.2;
411vertical-align:middle;
412position:relative;
413display:block;
414}
415.deliv_confirm dd{
416font-size:12px;
417padding:10px;
418border-bottom:#CCC solid 1px;
419display:block;
420}
421.deliv_confirm dd:last-child{
422border-bottom:none;
423}
424.date_confirm li{
425padding-right:1em;
426display:inline;
427}
428/* -----------------------------------------------
429入力フォーム/確認画面共通
430----------------------------------------------- */
431dl.form_entry{
432width:100%;
433margin:0 0 15px 0;
434padding:0;
435border-top:#999 solid 1px;
436border-bottom:#999 solid 1px;
437position:relative;
438}
439dl.form_entry dt{
440font-weight:bold;
441padding:10px 12px 0;
442}
443dl.form_entry dd{
444padding:0 12px 10px;
445border-bottom:#CCC solid 1px;
446}
447dl.form_entry dd:last-child{
448border-bottom:0;
449}
450dl.form_entry .selectdate{
451margin-top:12px;
452padding:5px 6px 5px 2px;
453font-size:12px;
454vertical-align:bottom;
455}
456dl.form_entry li{
457margin-bottom:0.3em;
458vertical-align:middle;
459}
460/* -----------------------------------------------
461完了画面
462----------------------------------------------- */
463.thankstext{
464font-size:16px;
465color:#FF6633;
466font-weight:bold;
467padding:10px;
468margin-bottom:10px;
469}
470#completetext,.shopInformation{
471font-size:14px;
472padding:10px;
473clear:both;
474}
475#completetext p,.shopInformation p{
476margin-bottom:0.5em;
477}
478/* -----------------------------------------------
479特定商/当サイトについて
480----------------------------------------------- */
481dl.form_info{
482width:100%;
483margin:10px 0 15px 0;
484padding:0;
485border-bottom:#999 solid 1px;
486position:relative;
487}
488dl.form_info dt{
489font-weight:bold;
490padding:10px 10px 0;
491}
492dl.form_info dd{
493padding:0 10px 10px;
494border-bottom:#CCC solid 1px;
495}
496dl.form_info dd:last-child{
497border-bottom:0;
498}
499
500#maps{
501width:88%!important;
502margin:10px auto!important;
503}
504/* -----------------------------------------------
505規約
506----------------------------------------------- */
507#kiyaku_text{
508padding:10px 20px;
509border-bottom:#999 solid 1px;
510border-top:#999 solid 1px;
511overflow: hidden;
512text-overflow: ellipsis;
513line-height:1.3;
514}
515/*-------------------------------------------------
516error
517----------------------------------------*/
518#errorBox {
519text-align:left;
520padding:20px;
521}
522
523
Note: See TracBrowser for help on using the repository browser.