| 1 | @charset "utf-8"; |
|---|
| 2 | /* =================================================================== |
|---|
| 3 | CSS information |
|---|
| 4 | |
|---|
| 5 | file name :button.css |
|---|
| 6 | style info :ボタン用 |
|---|
| 7 | |
|---|
| 8 | =================================================================== */ |
|---|
| 9 | .btn_area { |
|---|
| 10 | padding: 10px; |
|---|
| 11 | clear: both; |
|---|
| 12 | } |
|---|
| 13 | ul.btn_btm { |
|---|
| 14 | clear: both; |
|---|
| 15 | } |
|---|
| 16 | .btn_area li, |
|---|
| 17 | ul.btn_btm li { |
|---|
| 18 | margin-bottom: 12px; |
|---|
| 19 | } |
|---|
| 20 | .btn_area_top { |
|---|
| 21 | box-shadow: 0 1px 1px 1px rgba(255,255,255,1) inset; |
|---|
| 22 | -webkit-box-shadow: 0 1px 1px 0 rgba(255,255,255,1) inset; |
|---|
| 23 | -moz-box-shadow: 0 1px 1px rgba(255,255,255,1) inset; |
|---|
| 24 | border-top: 1px solid #CCC; |
|---|
| 25 | border-bottom: 1px solid #CCC; |
|---|
| 26 | background: #EEE; |
|---|
| 27 | display: block; |
|---|
| 28 | clear: both; |
|---|
| 29 | margin-bottom: 10px; |
|---|
| 30 | padding: 10px 0; |
|---|
| 31 | } |
|---|
| 32 | /*----------------------------------------------- |
|---|
| 33 | ボタン(進む系ボタン:グリーン) |
|---|
| 34 | ----------------------------------------------- */ |
|---|
| 35 | a.btn, |
|---|
| 36 | a.btn:link, |
|---|
| 37 | a.btn:visited, |
|---|
| 38 | a.btn:hover { |
|---|
| 39 | color: #FFF; |
|---|
| 40 | font-size: 16px; |
|---|
| 41 | font-weight: bold; |
|---|
| 42 | text-decoration: none; |
|---|
| 43 | text-align: center; |
|---|
| 44 | padding: 10px; |
|---|
| 45 | text-shadow: 0 -1px 1px rgba(0,0,0,1); |
|---|
| 46 | border: 1px solid #A9ABAD; |
|---|
| 47 | border-radius: 5px; |
|---|
| 48 | -moz-border-radius: 5px; |
|---|
| 49 | -webkit-border-radius: 5px; |
|---|
| 50 | display: block; |
|---|
| 51 | background: #B4DF34; |
|---|
| 52 | background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%); |
|---|
| 53 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222)); |
|---|
| 54 | cursor: pointer; |
|---|
| 55 | -webkit-transition: opacity 0.5s ease-in; |
|---|
| 56 | -moz-transition: opacity 0.5s ease-in; |
|---|
| 57 | } |
|---|
| 58 | input[type="submit"].btn { |
|---|
| 59 | width: 100%; |
|---|
| 60 | color: #FFF; |
|---|
| 61 | font-size: 16px; |
|---|
| 62 | font-weight: bold; |
|---|
| 63 | text-decoration: none; |
|---|
| 64 | text-align: center; |
|---|
| 65 | padding: 10px; |
|---|
| 66 | text-shadow: 0 -1px 1px rgba(0,0,0,1); |
|---|
| 67 | border: 1px solid #A9ABAD; |
|---|
| 68 | border-radius: 5px; |
|---|
| 69 | -moz-border-radius: 5px; |
|---|
| 70 | -webkit-border-radius: 5px; |
|---|
| 71 | display: block; |
|---|
| 72 | background: #B4DF34; |
|---|
| 73 | background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%); |
|---|
| 74 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222)); |
|---|
| 75 | cursor: pointer; |
|---|
| 76 | -webkit-transition: opacity 0.5s ease-in; |
|---|
| 77 | -moz-transition: opacity 0.5s ease-in; |
|---|
| 78 | } |
|---|
| 79 | /*----------------------------------------------- |
|---|
| 80 | ボタン(戻る系ボタン:グレー) |
|---|
| 81 | ----------------------------------------------- */ |
|---|
| 82 | a.btn_back, |
|---|
| 83 | a.btn_back:link, |
|---|
| 84 | a.btn_back:visited, |
|---|
| 85 | a.btn_back:hover { |
|---|
| 86 | color: #FFF; |
|---|
| 87 | font-size: 16px; |
|---|
| 88 | font-weight: bold; |
|---|
| 89 | text-decoration: none; |
|---|
| 90 | text-align: center; |
|---|
| 91 | text-shadow: 0 -1px 1px rgba(0,0,0,1); |
|---|
| 92 | border: 1px solid #A9ABAD; |
|---|
| 93 | border-radius: 5px; |
|---|
| 94 | -moz-border-radius: 5px; |
|---|
| 95 | -webkit-border-radius: 5px; |
|---|
| 96 | display: block; |
|---|
| 97 | padding: 5px 0; |
|---|
| 98 | background: #999999; |
|---|
| 99 | background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%); |
|---|
| 100 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999)); |
|---|
| 101 | } |
|---|
| 102 | input[type="submit"].btn_back { |
|---|
| 103 | color: #FFF; |
|---|
| 104 | font-size: 16px; |
|---|
| 105 | font-weight: bold; |
|---|
| 106 | text-decoration: none; |
|---|
| 107 | text-align: center; |
|---|
| 108 | text-shadow: 0 -1px 1px rgba(0,0,0,1); |
|---|
| 109 | border: 1px solid #A9ABAD; |
|---|
| 110 | border-radius: 5px; |
|---|
| 111 | -moz-border-radius: 5px; |
|---|
| 112 | -webkit-border-radius: 5px; |
|---|
| 113 | display: block; |
|---|
| 114 | padding: 5px 0; |
|---|
| 115 | background: #999999; |
|---|
| 116 | background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%); |
|---|
| 117 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999)); |
|---|
| 118 | } |
|---|
| 119 | /*----------------------------------------------- |
|---|
| 120 | ボタン(サブ系ボタン:ライトグレー) |
|---|
| 121 | ----------------------------------------------- */ |
|---|
| 122 | .btn_sub, |
|---|
| 123 | a.btn_sub, |
|---|
| 124 | a.btn_sub:link, |
|---|
| 125 | a.btn_sub:visited, |
|---|
| 126 | a.btn_sub:hover { |
|---|
| 127 | color: #000; |
|---|
| 128 | font-size: 16px; |
|---|
| 129 | padding: 5px 0; |
|---|
| 130 | font-weight: bold; |
|---|
| 131 | text-decoration: none; |
|---|
| 132 | text-align: center; |
|---|
| 133 | text-shadow: 0 -1px 1px rgba(255,255,255,1); |
|---|
| 134 | border: 1px solid #A9ABAD; |
|---|
| 135 | border-radius: 5px; |
|---|
| 136 | -moz-border-radius: 5px; |
|---|
| 137 | -webkit-border-radius: 5px; |
|---|
| 138 | display: block; |
|---|
| 139 | background: #FDFDfD; |
|---|
| 140 | background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); |
|---|
| 141 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); |
|---|
| 142 | } |
|---|
| 143 | input[type="submit"].btn_sub { |
|---|
| 144 | color: #000; |
|---|
| 145 | font-size: 16px; |
|---|
| 146 | padding: 5px 0; |
|---|
| 147 | font-weight: bold; |
|---|
| 148 | text-decoration: none; |
|---|
| 149 | text-align: center; |
|---|
| 150 | text-shadow: 0 -1px 1px rgba(0,0,0,0.3); |
|---|
| 151 | border: 1px solid #A9ABAD; |
|---|
| 152 | border-radius: 5px; |
|---|
| 153 | -moz-border-radius: 5px; |
|---|
| 154 | -webkit-border-radius: 5px; |
|---|
| 155 | display: block; |
|---|
| 156 | background: #FDFDfD; |
|---|
| 157 | background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); |
|---|
| 158 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); |
|---|
| 159 | } |
|---|
| 160 | /*----------------------------------------------- |
|---|
| 161 | ボタン(追加系ボタン:ホワイト) |
|---|
| 162 | ----------------------------------------------- */ |
|---|
| 163 | a.btn_more, |
|---|
| 164 | a.btn_more:link, |
|---|
| 165 | a.btn_more:visited, |
|---|
| 166 | a.btn_more:hover { |
|---|
| 167 | color: #000; |
|---|
| 168 | font-size: 16px; |
|---|
| 169 | padding: 5px 0; |
|---|
| 170 | font-weight: bold; |
|---|
| 171 | text-decoration: none; |
|---|
| 172 | text-align: center; |
|---|
| 173 | border: 1px solid #A9ABAD; |
|---|
| 174 | border-radius: 5px; |
|---|
| 175 | -moz-border-radius: 5px; |
|---|
| 176 | -webkit-border-radius: 5px; |
|---|
| 177 | display: block; |
|---|
| 178 | background: #FFF; |
|---|
| 179 | clear: both; |
|---|
| 180 | margin: 10px 0; |
|---|
| 181 | } |
|---|
| 182 | input[type="submit"].btn_more { |
|---|
| 183 | color: #000; |
|---|
| 184 | font-size: 16px; |
|---|
| 185 | padding: 5px 0; |
|---|
| 186 | font-weight: bold; |
|---|
| 187 | text-decoration: none; |
|---|
| 188 | text-align: center; |
|---|
| 189 | border: 1px solid #A9ABAD; |
|---|
| 190 | border-radius: 5px; |
|---|
| 191 | -moz-border-radius: 5px; |
|---|
| 192 | -webkit-border-radius: 5px; |
|---|
| 193 | display: block; |
|---|
| 194 | background: #FFF; |
|---|
| 195 | clear: both; |
|---|
| 196 | } |
|---|
| 197 | /*----------------------------------------------- |
|---|
| 198 | ボタン(フッター) |
|---|
| 199 | ----------------------------------------------- */ |
|---|
| 200 | a.btn_btm { |
|---|
| 201 | width: 150px; |
|---|
| 202 | text-align: center; |
|---|
| 203 | color: #FFF; |
|---|
| 204 | background-color: #000; |
|---|
| 205 | background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%); |
|---|
| 206 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323)); |
|---|
| 207 | border: #303030 solid 1px; |
|---|
| 208 | text-shadow: 0 -1px 1px rgba(0,0,0,0.5); |
|---|
| 209 | -moz-border-radius: 5px; |
|---|
| 210 | -webkit-border-radius: 5px; |
|---|
| 211 | padding: 5px; |
|---|
| 212 | margin: 10px auto; |
|---|
| 213 | transition: background-color 1s ease-in; |
|---|
| 214 | -webkit-transition: background-color 1s ease-in; |
|---|
| 215 | -moz-transition: opacity 1s ease-int; |
|---|
| 216 | cursor: pointer; |
|---|
| 217 | } |
|---|
| 218 | .btn_btm, |
|---|
| 219 | a.btn_btm:link, |
|---|
| 220 | a.btn_btm:hover, |
|---|
| 221 | a.btn_btm:visited { |
|---|
| 222 | color: #FFF; |
|---|
| 223 | text-decoration: none; |
|---|
| 224 | } |
|---|
| 225 | input[type="submit"].btn_btm { |
|---|
| 226 | width: 150px; |
|---|
| 227 | text-align: center; |
|---|
| 228 | color: #FFF; |
|---|
| 229 | background-color: #000; |
|---|
| 230 | background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%); |
|---|
| 231 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323)); |
|---|
| 232 | border: #303030 solid 1px; |
|---|
| 233 | text-shadow: 0 -1px 1px rgba(0,0,0,0.5); |
|---|
| 234 | -moz-border-radius: 5px; |
|---|
| 235 | -webkit-border-radius: 5px; |
|---|
| 236 | padding: 5px; |
|---|
| 237 | margin: 10px auto; |
|---|
| 238 | transition: background-color 1s ease-in; |
|---|
| 239 | -webkit-transition: background-color 1s ease-in; |
|---|
| 240 | -moz-transition: opacity 1s ease-int; |
|---|
| 241 | cursor: pointer; |
|---|
| 242 | } |
|---|
| 243 | /*----------------------------------------------- |
|---|
| 244 | ボタン小(編集/削除) |
|---|
| 245 | ----------------------------------------------- */ |
|---|
| 246 | ul.edit { |
|---|
| 247 | float: right; |
|---|
| 248 | clear: right; |
|---|
| 249 | display: inline; |
|---|
| 250 | vertical-align: top; |
|---|
| 251 | line-height: 1; |
|---|
| 252 | position: absolute; |
|---|
| 253 | right: 10px; |
|---|
| 254 | top: 15px; |
|---|
| 255 | } |
|---|
| 256 | ul.edit li { |
|---|
| 257 | display: inline; |
|---|
| 258 | float: left; |
|---|
| 259 | line-height: 1; |
|---|
| 260 | vertical-align: middle; |
|---|
| 261 | } |
|---|
| 262 | ul.edit li:first-child { |
|---|
| 263 | margin-right: 0.8em; |
|---|
| 264 | } |
|---|
| 265 | a.b_edit:link, |
|---|
| 266 | a.b_edit:visited, |
|---|
| 267 | a.b_edit:hover { |
|---|
| 268 | color: #000; |
|---|
| 269 | font-size: 11px; |
|---|
| 270 | padding: 4px 5px; |
|---|
| 271 | border: #CCC solid 1px; |
|---|
| 272 | border-radius: 12px; |
|---|
| 273 | -moz-border-radius: 12px; |
|---|
| 274 | -webkit-border-radius: 12px; |
|---|
| 275 | background: #D7DDE3; |
|---|
| 276 | background: -moz-linear-gradient(center top, #FFFFFF 0%,#D7DDE3 100%); |
|---|
| 277 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(1, #D7DDE3)); |
|---|
| 278 | display: inline; |
|---|
| 279 | text-align: center; |
|---|
| 280 | cursor: pointer; |
|---|
| 281 | vertical-align: middle; |
|---|
| 282 | } |
|---|
| 283 | a.b_delete:link, |
|---|
| 284 | a.b_delete:visited, |
|---|
| 285 | a.b_delete:hover { |
|---|
| 286 | vertical-align: top; |
|---|
| 287 | cursor: pointer; |
|---|
| 288 | } |
|---|
| 289 | /*----------------------------------------------- |
|---|
| 290 | ボタン(商品詳細:カゴに入れる) |
|---|
| 291 | ----------------------------------------------- */ |
|---|
| 292 | .cartbtn_default { |
|---|
| 293 | width: auto !important; |
|---|
| 294 | font-size: 15px; |
|---|
| 295 | padding: 10px 0; |
|---|
| 296 | background: #669222; |
|---|
| 297 | background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%); |
|---|
| 298 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222)); |
|---|
| 299 | } |
|---|
| 300 | |
|---|
| 301 | /*----------------------------------------------- |
|---|
| 302 | ボタン(商品詳細:お気に入り) |
|---|
| 303 | ----------------------------------------------- */ |
|---|
| 304 | .btn_favorite .btn_sub { |
|---|
| 305 | width: auto; |
|---|
| 306 | display: block; |
|---|
| 307 | } |
|---|
| 308 | .btn_favorite p { |
|---|
| 309 | text-align: center; |
|---|
| 310 | } |
|---|
| 311 | /*----------------------------------------------- |
|---|
| 312 | ボタン(新しいお届け先を追加する) |
|---|
| 313 | ----------------------------------------------- */ |
|---|
| 314 | .addbtn { |
|---|
| 315 | margin: 0 30px; |
|---|
| 316 | padding: 5px 0; |
|---|
| 317 | } |
|---|
| 318 | /*----------------------------------------------- |
|---|
| 319 | ボタン(トップページへ) |
|---|
| 320 | ----------------------------------------------- */ |
|---|
| 321 | .btn_s { |
|---|
| 322 | width: 12em; |
|---|
| 323 | padding: 10px 0!important; |
|---|
| 324 | margin: 10px auto; |
|---|
| 325 | clear: both; |
|---|
| 326 | } |
|---|
| 327 | /*----------------------------------------------- |
|---|
| 328 | ボタン(住所自動入力) |
|---|
| 329 | ----------------------------------------------- */ |
|---|
| 330 | .btn_inputzip { |
|---|
| 331 | margin: 12px 0 5px 0; |
|---|
| 332 | } |
|---|
| 333 | /*----------------------------------------------- |
|---|
| 334 | ボタン(ログイン/ウィンドウ) |
|---|
| 335 | ----------------------------------------------- */ |
|---|
| 336 | .btn_login, |
|---|
| 337 | .btn_close { |
|---|
| 338 | width: 70%; |
|---|
| 339 | margin: 10px auto; |
|---|
| 340 | } |
|---|