1 | @charset "utf-8"; |
---|
2 | |
---|
3 | /* スマートフォン用グラデーションボタン |
---|
4 | ----------------------------------------------- */ |
---|
5 | .spbtn { |
---|
6 | display: block; |
---|
7 | margin: 0.5em auto 0.3em; |
---|
8 | padding: 0.4em 0; |
---|
9 | font: bold large helvetica; |
---|
10 | text-shadow: 0px -1px 1px rgba(0,0,0,0.5); |
---|
11 | vertical-align: middle; |
---|
12 | text-align:center; |
---|
13 | text-decoration: none; |
---|
14 | color: #ffffff; |
---|
15 | background-color: #666666; |
---|
16 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); |
---|
17 | border: solid 2px #666666; |
---|
18 | -webkit-border-radius: 8px; |
---|
19 | -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); |
---|
20 | } |
---|
21 | .spbtn:before { |
---|
22 | content: ""; |
---|
23 | display: block; |
---|
24 | height: 0; |
---|
25 | clear: both; |
---|
26 | visibility: hidden; |
---|
27 | } |
---|
28 | a.spbtn { |
---|
29 | width: 79%; |
---|
30 | max-width: 236px; |
---|
31 | } |
---|
32 | input.spbtn { |
---|
33 | width: 80%; |
---|
34 | max-width: 240px; |
---|
35 | } |
---|
36 | |
---|
37 | /* ボタン大(汎用) |
---|
38 | ----------------------------------------------- */ |
---|
39 | .spbtn-normal { |
---|
40 | color: #ffffff; |
---|
41 | border: solid 2px #666666; |
---|
42 | background-color: #666666; |
---|
43 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); |
---|
44 | } |
---|
45 | |
---|
46 | /* ボタン大(承諾、送信) |
---|
47 | ----------------------------------------------- */ |
---|
48 | .spbtn-agree { |
---|
49 | color: #ffffff; |
---|
50 | border: solid 2px #666666; |
---|
51 | background-color: #8DCB66; |
---|
52 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); |
---|
53 | } |
---|
54 | |
---|
55 | /* ボタン大(キャンセル、退会) |
---|
56 | ----------------------------------------------- */ |
---|
57 | .spbtn-cancel { |
---|
58 | color: #ffffff; |
---|
59 | border: solid 2px #666666; |
---|
60 | background-color: #fc4743; |
---|
61 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); |
---|
62 | } |
---|
63 | |
---|
64 | /* ボタン中(お問い合わせ、友達に教える) |
---|
65 | ----------------------------------------------- */ |
---|
66 | .spbtn-medeum { |
---|
67 | display: block; |
---|
68 | margin: 0.5em auto 0.3em; |
---|
69 | font: bold 15px helvetica; |
---|
70 | border: solid 1px #666666; |
---|
71 | text-shadow: 0px -1px 1px rgba(0,0,0,0.5); |
---|
72 | -webkit-border-radius: 6px; |
---|
73 | -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); |
---|
74 | } |
---|
75 | a.spbtn-medeum { |
---|
76 | width: 59%; |
---|
77 | max-width: 178px; |
---|
78 | } |
---|
79 | input.spbtn-medeum { |
---|
80 | width: 60%; |
---|
81 | max-width: 180px; |
---|
82 | } |
---|
83 | |
---|
84 | /* ボタン小(お気に入りに登録、住所自動入力) |
---|
85 | ----------------------------------------------- */ |
---|
86 | .spbtn-small { |
---|
87 | display: inline-block; |
---|
88 | margin: 0; |
---|
89 | padding: 0.2em 0.4em; |
---|
90 | color: #ffffff; |
---|
91 | text-shadow: 0px -1px 1px rgba(0,0,0,1); |
---|
92 | font: bold 13px helvetica; |
---|
93 | font-weight: bold; |
---|
94 | background-color: #666666; |
---|
95 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); |
---|
96 | text-align:center; |
---|
97 | vertical-align: middle; |
---|
98 | text-decoration: none; |
---|
99 | border: solid 1px #333333; |
---|
100 | -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.7); |
---|
101 | } |
---|
102 | |
---|
103 | |
---|
104 | /* ×ボタン (お気に入りから削除) |
---|
105 | ----------------------------------------------- */ |
---|
106 | .spbtn-delete { |
---|
107 | display: inline-block; |
---|
108 | line-height: 1em; |
---|
109 | width: 1em; |
---|
110 | height: 1em; |
---|
111 | margin: 0; |
---|
112 | margin-left: 5px; |
---|
113 | padding: 0; |
---|
114 | color: #ffffff; |
---|
115 | text-shadow: 0px -1px 1px rgba(0,0,0,0.5); |
---|
116 | font-family: verdana; |
---|
117 | font-weight: bold; |
---|
118 | background-color: #333333; |
---|
119 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); |
---|
120 | text-align:center; |
---|
121 | vertical-align: middle; |
---|
122 | text-decoration: none; |
---|
123 | -webkit-border-radius: 4px; |
---|
124 | border: solid 1px #666666; |
---|
125 | } |
---|
126 | |
---|
127 | /* ログイン・会員登録・マイページボタン |
---|
128 | ----------------------------------------------- */ |
---|
129 | #block-login .spbtn{ |
---|
130 | color:#292929; |
---|
131 | text-shadow: 1px 1px 1px #cccccc; |
---|
132 | float: left; |
---|
133 | font-size: medium; |
---|
134 | background-color: #c9c9c9; |
---|
135 | background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1)); |
---|
136 | margin: 0; |
---|
137 | margin-left: -1px; |
---|
138 | border: none; |
---|
139 | border-left: 1px solid #818181; |
---|
140 | -webkit-border-radius: 0px; |
---|
141 | -webkit-box-shadow: none; |
---|
142 | } |
---|
143 | #block-login .spbtn:first-child{ |
---|
144 | width: 50%; |
---|
145 | border-left: none; |
---|
146 | margin-left: 0px; |
---|
147 | -webkit-border-top-left-radius: 4px; |
---|
148 | -webkit-border-bottom-left-radius: 4px; |
---|
149 | } |
---|
150 | #block-login .spbtn:last-child{ |
---|
151 | width: 50%; |
---|
152 | -webkit-border-top-right-radius: 4px; |
---|
153 | -webkit-border-bottom-right-radius: 4px; |
---|
154 | } |
---|
155 | #block-login .spbtn:only-child{ |
---|
156 | width: 100%; |
---|
157 | max-width: 100%; |
---|
158 | -webkit-border-radius: 4px; |
---|
159 | } |
---|
160 | #block-login .spbtn > a{ |
---|
161 | |
---|
162 | } |
---|
163 | |
---|
164 | |
---|
165 | /* 「TOPへ」ボタン |
---|
166 | ----------------------------------------------- */ |
---|
167 | #btn-top { |
---|
168 | display:block; |
---|
169 | position: absolute; |
---|
170 | top: 4px; |
---|
171 | right: 0.4em; |
---|
172 | font: bold 12px helvetica; |
---|
173 | width: 4.3em; |
---|
174 | border: 1px solid rgba(0,0,0,0.5); |
---|
175 | border-top: 1px solid rgba(0,0,0,0.7); |
---|
176 | background-color: rgba(51,51,51,0.2); |
---|
177 | background-color: #333332; |
---|
178 | background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,0.01)), color-stop(.02,rgba(255,255,255,0.4)),color-stop(.5,rgba(255,255,255,0.3))); |
---|
179 | -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.3); |
---|
180 | vertical-align: middle; |
---|
181 | text-align: center; |
---|
182 | text-decoration: none; |
---|
183 | -webkit-border-radius: 5px; |
---|
184 | } |
---|
185 | #btn-top > a { |
---|
186 | display: block; |
---|
187 | margin-top: 0.5em; |
---|
188 | margin-bottom: 0.5em; |
---|
189 | color: #ffffff; |
---|
190 | font: bold 12px helvetica; |
---|
191 | text-shadow: 0px -1px 1px rgba(0,0,0,0.5); |
---|
192 | vertical-align: middle; |
---|
193 | text-decoration: none; |
---|
194 | } |
---|