Changeset 21093 for branches/version-2_11-dev/html/user_data/packages
- Timestamp:
- 2011/08/01 19:03:34 (15 years ago)
- Location:
- branches/version-2_11-dev/html/user_data/packages/sphone/css
- Files:
-
- 10 edited
-
block.css (modified) (5 diffs)
-
button.css (modified) (13 diffs)
-
common.css (modified) (9 diffs)
-
contents.css (modified) (13 diffs)
-
import.css (modified) (1 diff)
-
jqm.css (modified) (4 diffs)
-
mypage.css (modified) (8 diffs)
-
popup.css (modified) (6 diffs)
-
products.css (modified) (5 diffs)
-
set.css (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
branches/version-2_11-dev/html/user_data/packages/sphone/css/block.css
r21081 r21093 2 2 /* =================================================================== 3 3 CSS information 4 file name :block.css 4 5 style info :ブロック用 5 6 =================================================================== */ … … 8 9 ----------------------------------------------- */ 9 10 .title_block{ 10 color: #FFF;11 font-size:16px;12 font-weight:bold;13 text-shadow: 1px 1px 1px rgba(0,0,0,0.5);14 line-height:20px;15 margin:0;16 padding:5px 10px 3px 10px;17 background-color:#787E8A;18 background: -moz-linear-gradient(center top, #787E8A 0%,#CBCDD0 100%);19 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #787E8A),color-stop(1, #CBCDD0));20 border-top:#E1DCDA solid 1px;21 border-bottom:#B5B5B5 solid 2px;22 -webkit-box-shadow: 0 1px #FFF;23 -moz-box-shadow: 0 1px #FFF;24 text-align:left;25 vertical-align: middle;26 text-overflow: ellipsis;27 clear:both;11 color: #FFF; 12 font-size:16px; 13 font-weight:bold; 14 text-shadow: 1px 1px 1px rgba(0,0,0,0.5); 15 line-height:20px; 16 margin:0; 17 padding:5px 10px 3px 10px; 18 background-color:#787E8A; 19 background: -moz-linear-gradient(center top, #787E8A 0%,#CBCDD0 100%); 20 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #787E8A),color-stop(1, #CBCDD0)); 21 border-top:#E1DCDA solid 1px; 22 border-bottom:#B5B5B5 solid 2px; 23 -webkit-box-shadow: 0 1px #FFF; 24 -moz-box-shadow: 0 1px #FFF; 25 text-align:left; 26 vertical-align: middle; 27 text-overflow: ellipsis; 28 clear:both; 28 29 } 29 30 … … 32 33 ----------------------------------------------- */ 33 34 #recomend_area{ 34 margin:10px;35 padding-top:10px;36 border:#CCC solid 1px;37 border-radius: 8px;38 -webkit-border-radius: 8px;39 -moz-border-radius: 8px;35 margin:15px 10px; 36 padding-top:10px; 37 border:#CCC solid 1px; 38 border-radius: 8px; 39 -webkit-border-radius: 8px; 40 -moz-border-radius: 8px; 40 41 } 41 42 #recomend_area h2{ 42 font-size:16px; 43 margin-left:10px; 43 font-size:12px; 44 margin-left:10px; 45 } 46 #recomend_area li{ 47 width:290px; 44 48 } 45 49 .recomendblock{ 46 padding:10px; 47 clear:both; 50 width:270px; 51 padding:5px 10px 5px 8px; 52 margin:0; 53 clear:both; 48 54 } 49 55 .recomendblock img{ 50 float:left; 56 width:80px; 57 float:left; 51 58 } 52 59 .recomendblock .productContents{ 53 width:65%;54 float:right;55 text-align:left;60 width:68%; 61 float:right; 62 text-align:left; 56 63 } 57 64 .recomendblock .productContents p{ 58 clear:both;65 clear:both; 59 66 } 60 67 .recomendblock .productContents p.comment{ 61 width:15em;62 height:3.5em;63 overflow:hidden;64 white-space:nowrap;65 text-overflow: ellipsis;66 -webkit-text-overflow: ellipsis;67 clear:both;68 width:17em; 69 height:3.7em; 70 overflow:hidden; 71 white-space:nowrap; 72 text-overflow: ellipsis; 73 -webkit-text-overflow: ellipsis; 74 clear:both; 68 75 } 69 76 .recomendblock .sale_price{ 70 clear:both; 71 float:right; 72 text-align:right; 73 } 74 77 clear:both; 78 float:right; 79 text-align:right; 80 } 75 81 #recomend_area div.moveWrap { 76 width:100%; 77 height:auto; 78 position:relative; 79 overflow:hidden; 80 -webkit-box-sizing:border-box; 82 width:95%; 83 height:auto; 84 position:relative; 85 overflow:hidden; 86 -webkit-box-sizing:border-box; 87 } 88 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { 89 #recomend_area div.moveWrap { 90 width:85%; 91 } 92 } 93 @media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) { 94 #recomend_area div.moveWrap { 95 width:95%; 96 } 97 } 98 @media all and (orientation:landscape) { 99 #recomend_area div.moveWrap { 100 width:95%; 101 } 81 102 } 82 103 #recomend_area ul.moveWrapBG { 83 margin:0;84 padding:0;85 display:inline-block;86 position:relative;87 width:100%;88 height:auto;89 visibility:hidden;90 -webkit-box-sizing:border-box;104 margin:0; 105 padding:0; 106 display:inline-block; 107 position:relative; 108 width:100%; 109 height:auto; 110 visibility:hidden; 111 -webkit-box-sizing:border-box; 91 112 } 92 113 #recomend_area div.slideMask { 93 margin-right:1px; 94 position:absolute; 95 top:0; 96 left:0; 97 border:4px #FFF solid; 98 -webkit-box-sizing:border-box; 114 margin:0; 115 padding:0; 116 margin-right:1px; 117 position:absolute; 118 top:0; 119 left:0; 120 border:4px #FFF solid; 121 -webkit-box-sizing:border-box; 99 122 } 100 123 #recomend_area div.moveWrap>ul.move { 101 width:10000px;102 margin:0;103 padding:0;104 position:relative;105 left:0;106 top:0;107 list-style:none;108 -webkit-transition:all 0.6s ease-in-out;109 -webkit-transform:translate3d(0,0,0);110 margin:0;111 padding:0;112 display:none;124 width:10000px; 125 margin:0; 126 padding:0; 127 position:relative; 128 left:0; 129 top:0; 130 list-style:none; 131 -webkit-transition:all 0.6s ease-in-out; 132 -webkit-transform:translate3d(0,0,0); 133 margin:0; 134 padding:0; 135 display:none; 113 136 } 114 137 #recomend_area div.moveWrap>ul.move li.slideUnit { 115 margin:0; 116 padding:0; 117 float:left; 118 list-style:none; 119 text-align:center; 120 -webkit-box-sizing:border-box; 138 width:290px!important; 139 margin:0; 140 padding:0; 141 float:left; 142 list-style:none; 143 text-align:center; 144 -webkit-box-sizing:border-box; 121 145 } 122 146 #recomend_area li.slideUnit>div { 123 padding:4px 4px 4px4px;124 display:inline-block;125 vertical-align:middle;126 text-align:center;127 -webkit-box-sizing:border-box;147 padding:4px; 148 display:inline-block; 149 vertical-align:middle; 150 text-align:center; 151 -webkit-box-sizing:border-box; 128 152 } 129 153 #recomend_area div.flickSlideBottom { 130 width:100%;131 margin-top:5px;132 border-top:#DBDBDB solid 1px;133 background: -moz-linear-gradient(center top, #FFFFFF 0%,#DEE4EA 95%,#FFFFFF 100%);134 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(0.95, #DEE4EA),color-stop(0, #FFFFFF));135 border-bottom-right-radius:8px;136 -webkit-border-bottom-right-radius: 8px;137 -moz-border-bottom-right-radius: 8px;138 border-bottom-left-radius:8px;139 -webkit-border-bottom-left-radius:8px;140 moz-border-bottom-left-radius:8px;154 width:100%; 155 margin-top:5px; 156 border-top:#DBDBDB solid 1px; 157 background: -moz-linear-gradient(center top, #FFFFFF 0%,#DEE4EA 95%,#FFFFFF 100%); 158 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(0.95, #DEE4EA),color-stop(0, #FFFFFF)); 159 border-bottom-right-radius:8px; 160 -webkit-border-bottom-right-radius: 8px; 161 -moz-border-bottom-right-radius: 8px; 162 border-bottom-left-radius:8px; 163 -webkit-border-bottom-left-radius:8px; 164 moz-border-bottom-left-radius:8px; 141 165 } 142 166 #recomend_area div.flickSlideBottom div.bottomLeft,#recomend_area div.flickSlideBottom div.bottomRight { 143 display:table-cell;144 -webkit-box-sizing:border-box;145 -webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 0px 1px 3px, rgba(255, 255, 255, 1) 0px 0px 0px inset;146 vertical-align:middle;147 padding:0 10px;167 display:table-cell; 168 -webkit-box-sizing:border-box; 169 -webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 0px 1px 3px, rgba(255, 255, 255, 1) 0px 0px 0px inset; 170 vertical-align:middle; 171 padding:0 10px; 148 172 } 149 173 #recomend_area div.flickSlideBottom div.bottomRight { 150 font-size:16px; 151 font-weight: bold; 152 color:#7F7F7F;background-color:transparent; 153 border-bottom-right-radius: 8px; 154 -webkit-border-bottom-right-radius: 8px; 155 -moz-border-bottom-right-radius: 8px; 156 border-left:#DBDBDB solid 1px; 174 font-size:16px; 175 font-weight: bold; 176 color:#7F7F7F; 177 background-color:transparent; 178 border-bottom-right-radius: 8px; 179 -webkit-border-bottom-right-radius: 8px; 180 -moz-border-bottom-right-radius: 8px; 181 border-left:#DBDBDB solid 1px; 157 182 } 158 183 #recomend_area div.flickSlideBottom div.bottomLeft { 159 font-size:16px;160 font-weight: bold;161 color:#7F7F7F;162 background-color:transparent;163 border-bottom-left-radius: 8px;164 -webkit-border-bottom-left-radius: 8px;165 -moz-border-bottom-left-radius:8px;166 border-right:#DBDBDB solid 1px;184 font-size:16px; 185 font-weight: bold; 186 color:#7F7F7F; 187 background-color:transparent; 188 border-bottom-left-radius: 8px; 189 -webkit-border-bottom-left-radius: 8px; 190 -moz-border-bottom-left-radius:8px; 191 border-right:#DBDBDB solid 1px; 167 192 } 168 193 #recomend_area div.flickSlideBottom div.bottomLeft:after { 169 font-size:10px;170 padding:5px;171 text-align:left;172 display:table-cell;194 font-size:10px; 195 padding:5px; 196 text-align:left; 197 display:table-cell; 173 198 } 174 199 #recomend_area div.flickSlideBottom div.bottomLeft:before { 175 margin-top:2px;176 padding:5px;177 text-align:left;178 display:table-cell;200 margin-top:2px; 201 padding:5px; 202 text-align:left; 203 display:table-cell; 179 204 } 180 205 #recomend_area div.flickSlideBottom div.bottomRight:before { 181 font-size:10px;182 padding:5px;183 text-align:right;184 display:table-cell;206 font-size:10px; 207 padding:5px; 208 text-align:right; 209 display:table-cell; 185 210 } 186 211 #recomend_area div.flickSlideBottom div.bottomRight:after { 187 margin-top:2px;188 padding:5px;189 text-align:right;190 display:table-cell;212 margin-top:2px; 213 padding:5px; 214 text-align:right; 215 display:table-cell; 191 216 } 192 217 #recomend_area div.flickSlideBottom ul.slidePager { 193 width:100%;194 margin:0;195 padding:0;196 display:table-cell;197 text-align:center;218 width:100%; 219 margin:0; 220 padding:0; 221 display:table-cell; 222 text-align:center; 198 223 } 199 224 #recomend_area div.flickSlideBottom ul.slidePager li.slidePagerPointer { 200 font-size:10px;201 width:6px;202 height:6px;203 margin:12px 6px 6px 6px;204 display:inline-block;205 background-color:#CCC;206 border-radius: 6px;207 -webkit-border-radius: 6px;208 -moz-border-radius: 6px;225 font-size:10px; 226 width:6px; 227 height:6px; 228 margin:12px 6px 6px 6px; 229 display:inline-block; 230 background-color:#CCC; 231 border-radius: 6px; 232 -webkit-border-radius: 6px; 233 -moz-border-radius: 6px; 209 234 } 210 235 #recomend_area div.flickSlideBottom ul.slidePager li.slidePagerPointer.active { 211 background-color:#333;236 background-color:#333; 212 237 } 213 238 … … 218 243 } 219 244 #categorytree ul{ 220 margin:10px;221 border:#A9ACAB solid 1px;222 border-radius: 8px;223 -webkit-border-radius: 8px;224 -moz-border-radius: 8px;225 background:#f4F6F8;245 margin:10px; 246 border:#A9ACAB solid 1px; 247 border-radius: 8px; 248 -webkit-border-radius: 8px; 249 -moz-border-radius: 8px; 250 background:#f4F6F8; 226 251 } 227 252 #categorytree li{ 228 font-size:16px; 229 font-weight:bold; 230 -webkit-transition: opacity 0.3s ease-in; 231 -webkit-transition-delay: 0.2s; 232 clear: both; 233 border-bottom:#CCC solid 1px; 234 border-top:#FFF solid 1px; 235 } 253 font-size:16px; 254 font-weight:bold; 255 -webkit-transition: opacity 0.3s ease-in; 256 -webkit-transition-delay: 0.2s; 257 clear: both; 258 border-bottom:#CCC solid 1px; 259 border-top:#FFF solid 1px; 260 line-height:1.3em; 261 vertical-align:middle; 262 } 263 236 264 #categorytree li:first-child{ 237 border-top:none;265 border-top:none; 238 266 } 239 267 #categorytree li li:first-child{ 240 border-top:#CCC solid 1px;268 border-top:#CCC solid 1px; 241 269 } 242 270 #categorytree li:last-child,#categorytree li li:last-child{ 243 border-bottom:none;271 border-bottom:none; 244 272 } 245 #categorytree ul li a , .categorytree > ul > li > ul > li a{ 246 margin: 0; 247 padding: 0.5em 0 0.5em 0; 273 #categorytree ul li a,.categorytree > ul > li > ul > li a{ 274 padding:0.6em 0; 275 } 276 .category_body { 277 display: inline-block; 278 } 279 .category_body a { 280 width: 100%; 281 display: inline-block; 282 white-space:nowrap; 283 overflow:hidden; 284 text-overflow: ellipsis; 285 cursor:pointer; 248 286 } 249 287 #categorytree ul li li{ 250 padding-bottom:0.5em; 251 } 252 .category_number_tag { 253 color: #FFF; 254 width: 2em; 255 float: right; 256 text-align: center; 257 background-color: rgba(0,0,0,0.5); 258 -webkit-border-radius: 8px; 259 } 260 .category_body { 261 width: 83%; 262 padding-left:6px; 263 display:inline-block; 264 cursor:pointer; 265 } 266 .category_body > a { 267 width: 100%; 268 display: inline-block; 288 padding-bottom:0.6em; 269 289 } 270 290 .category_header { 271 width: 15%;272 display: inline-block;273 background: transparent;274 -webkit-border-radius: 8px;275 text-align:center;291 width: 1.5em; 292 margin:0 6px 0 8px; 293 display:inline-block; 294 background: transparent; 295 text-align:right; 276 296 } 277 297 .category_header.plus, .category_header.minus{ 278 color:#FFF; 279 margin:0 0 0 10px; 280 padding-bottom:1px; 281 display: inline-block; 282 text-align: center; 283 line-height:0.3; 284 width: 1.4em; 285 height:1.3em; 286 background:#515866; 287 background: -moz-linear-gradient(center top, #6D7481 0%,#515866 100%); 288 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(1, #515866)); 289 -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.7); 290 -webkit-border-radius: 3px; 291 } 292 .category_header + a{ 293 margin-left: 0; 294 margin-right: 0; 295 width: auto; 296 font-weight: bold; 297 font-family: verdana; 298 } 298 color:#FFF; 299 margin:0 6px 0 8px; 300 padding-bottom:4px; 301 display: inline-block; 302 text-align: center; 303 line-height:0.4; 304 width: 1.5em; 305 height:1.3em; 306 -webkit-border-radius: 8px; 307 background:#515866; 308 background: -moz-linear-gradient(center top, #6D7481 0%,#515866 100%); 309 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(1, #515866)); 310 -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.7); 311 -webkit-border-radius: 3px; 312 } 313 299 314 .category_header.plus > a, .category_header.minus > a{ 300 color:#FFF; 301 display: inline-block; 302 margin: 0; 303 padding: 0; 304 text-decoration: none; 305 } 315 width: 1.5em; 316 color:#FFF; 317 display: inline-block; 318 margin:0; 319 padding: 0; 320 text-decoration: none; 321 } 322 323 /*レベル調整*/ 324 #categorytree .level1 .category_header{ 325 width:1.5em; 326 } 327 #categorytree .level1 .category_body{ 328 width:86.5%; 329 } 330 #categorytree .level2 .category_header{ 331 width: 1.5em; 332 margin-left:2em; 333 } 334 #categorytree .level2 .category_body{ 335 width:79%; 336 } 337 #categorytree .level3 .category_header{ 338 width: 1.5em; 339 margin-left:3.4em; 340 } 341 #categorytree .level3 .category_body{ 342 width:71.5%; 343 } 344 #categorytree .level4 .category_header{ 345 width: 1.5em; 346 margin-left:4.8em; 347 } 348 #categorytree .level4 .category_body{ 349 width:64%; 350 } 351 352 #categorytree .level5 .category_header{ 353 margin-left:6.2em; 354 } 355 #categorytree .level5 .category_body{ 356 width:56%; 357 } 358 359 306 360 /*リンクカラー*/ 307 361 .category_body a:link,.category_body a:visited{ 308 color:#000;309 text-decoration:none;310 cursor:pointer;362 color:#000; 363 text-decoration:none; 364 cursor:pointer; 311 365 } 312 366 .category_header.plus a, .category_header.minus a{ 313 color:#FFF; 314 } 367 color:#FFF; 368 } 369 315 370 316 371 /*----------------------------------------------- … … 320 375 } 321 376 #news_area ul{ 322 margin-bottom:10px;377 margin-bottom:10px; 323 378 } 324 379 #news_area li{ 325 display:block;326 clear:both;327 padding:10px;328 line-height:1.3;329 background-color:#FEFEFE;330 background: -moz-linear-gradient(center top, #FEFEFE 0%,#EEEEEE 100%);331 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE));332 border-top:#FFF solid 1px;333 border-bottom:#CCC solid 1px;380 display:block; 381 clear:both; 382 padding:10px; 383 line-height:1.3; 384 background-color:#FEFEFE; 385 background: -moz-linear-gradient(center top, #FEFEFE 0%,#EEEEEE 100%); 386 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE)); 387 border-top:#FFF solid 1px; 388 border-bottom:#CCC solid 1px; 334 389 } 335 390 #news_area .news_date{ 336 clear:both;337 font-size:12px;338 letter-spacing:0.1em;339 } 391 clear:both; 392 font-size:12px; 393 letter-spacing:0.1em; 394 } -
branches/version-2_11-dev/html/user_data/packages/sphone/css/button.css
r21081 r21093 2 2 /* =================================================================== 3 3 CSS information 4 5 file name :button.css 4 6 style info :ボタン用 7 5 8 =================================================================== */ 6 9 .btn_area{ 7 padding:10px;8 clear:both;10 padding:10px; 11 clear:both; 9 12 } 10 13 ul.btn_btm{ 11 clear:both;14 clear:both; 12 15 } 13 16 .btn_area li,ul.btn_btm li{ 14 margin-bottom:12px;17 margin-bottom:12px; 15 18 } 16 19 .btn_area_top{ 17 box-shadow:0 1px 1px 1px rgba(255,255,255,1) inset;18 -webkit-box-shadow:0 1px 1px 0 rgba(255,255,255,1) inset;19 -moz-box-shadow: 0 1px 1px rgba(255,255,255,1) inset;20 border-top: 1px solid #CCC;21 border-bottom: 1px solid #CCC;22 background:#EEE;23 display:block;24 clear:both;25 margin-bottom:10px;26 padding:10px 0;20 box-shadow:0 1px 1px 1px rgba(255,255,255,1) inset; 21 -webkit-box-shadow:0 1px 1px 0 rgba(255,255,255,1) inset; 22 -moz-box-shadow: 0 1px 1px rgba(255,255,255,1) inset; 23 border-top: 1px solid #CCC; 24 border-bottom: 1px solid #CCC; 25 background:#EEE; 26 display:block; 27 clear:both; 28 margin-bottom:10px; 29 padding:10px 0; 27 30 } 28 31 /*----------------------------------------------- … … 30 33 ----------------------------------------------- */ 31 34 a.btn,a.btn:link,a.btn:visited,a.btn:hover{ 32 color:#FFF;33 font-size: 16px;34 font-weight:bold;35 text-decoration: none;36 text-align:center;37 padding: 10px;38 text-shadow: 0 -1px 1px rgba(0,0,0,1);39 border: 1px solid #A9ABAD;40 border-radius: 5px;41 -moz-border-radius: 5px;42 -webkit-border-radius: 5px;43 display:block;44 background:#B4DF34;45 background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%);46 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222));47 cursor:pointer;48 -webkit-transition:opacity 0.5s ease-in;49 -moz-transition:opacity 0.5s ease-in;35 color:#FFF; 36 font-size: 16px; 37 font-weight:bold; 38 text-decoration: none; 39 text-align:center; 40 padding: 10px; 41 text-shadow: 0 -1px 1px rgba(0,0,0,1); 42 border: 1px solid #A9ABAD; 43 border-radius: 5px; 44 -moz-border-radius: 5px; 45 -webkit-border-radius: 5px; 46 display:block; 47 background:#B4DF34; 48 background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%); 49 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222)); 50 cursor:pointer; 51 -webkit-transition:opacity 0.5s ease-in; 52 -moz-transition:opacity 0.5s ease-in; 50 53 } 51 54 input[type="submit"].btn{ 52 width:100%;53 color:#FFF;54 font-size: 16px;55 font-weight:bold;56 text-decoration: none;57 text-align:center;58 padding: 10px;59 text-shadow: 0 -1px 1px rgba(0,0,0,1);60 border: 1px solid #A9ABAD;61 border-radius: 5px;62 -moz-border-radius: 5px;63 -webkit-border-radius: 5px;64 display:block;65 background:#B4DF34;66 background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%);67 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222));68 cursor:pointer;69 -webkit-transition:opacity 0.5s ease-in;70 -moz-transition:opacity 0.5s ease-in;55 width:100%; 56 color:#FFF; 57 font-size: 16px; 58 font-weight:bold; 59 text-decoration: none; 60 text-align:center; 61 padding: 10px; 62 text-shadow: 0 -1px 1px rgba(0,0,0,1); 63 border: 1px solid #A9ABAD; 64 border-radius: 5px; 65 -moz-border-radius: 5px; 66 -webkit-border-radius: 5px; 67 display:block; 68 background:#B4DF34; 69 background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%); 70 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222)); 71 cursor:pointer; 72 -webkit-transition:opacity 0.5s ease-in; 73 -moz-transition:opacity 0.5s ease-in; 71 74 } 72 75 /*----------------------------------------------- … … 74 77 ----------------------------------------------- */ 75 78 a.btn_back,a.btn_back:link,a.btn_back:visited,a.btn_back:hover { 76 color:#FFF;77 font-size: 16px;78 font-weight:bold;79 text-decoration: none;80 text-align:center;81 text-shadow: 0 -1px 1px rgba(0,0,0,1);82 border: 1px solid #A9ABAD;83 border-radius: 5px;84 -moz-border-radius: 5px;85 -webkit-border-radius: 5px;86 display:block;87 padding:5px 0;88 background:#999999;89 background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%);90 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999));79 color:#FFF; 80 font-size: 16px; 81 font-weight:bold; 82 text-decoration: none; 83 text-align:center; 84 text-shadow: 0 -1px 1px rgba(0,0,0,1); 85 border: 1px solid #A9ABAD; 86 border-radius: 5px; 87 -moz-border-radius: 5px; 88 -webkit-border-radius: 5px; 89 display:block; 90 padding:5px 0; 91 background:#999999; 92 background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%); 93 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999)); 91 94 } 92 95 input[type="submit"].btn_back{ 93 color:#FFF;94 font-size: 16px;95 font-weight:bold;96 text-decoration: none;97 text-align:center;98 text-shadow: 0 -1px 1px rgba(0,0,0,1);99 border: 1px solid #A9ABAD;100 border-radius: 5px;101 -moz-border-radius: 5px;102 -webkit-border-radius: 5px;103 display:block;104 padding:5px 0;105 background:#999999;106 background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%);107 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999));96 color:#FFF; 97 font-size: 16px; 98 font-weight:bold; 99 text-decoration: none; 100 text-align:center; 101 text-shadow: 0 -1px 1px rgba(0,0,0,1); 102 border: 1px solid #A9ABAD; 103 border-radius: 5px; 104 -moz-border-radius: 5px; 105 -webkit-border-radius: 5px; 106 display:block; 107 padding:5px 0; 108 background:#999999; 109 background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%); 110 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999)); 108 111 } 109 112 /*----------------------------------------------- … … 111 114 ----------------------------------------------- */ 112 115 .btn_sub,a.btn_sub,a.btn_sub:link,a.btn_sub:visited,a.btn_sub:hover { 113 color:#000;114 font-size: 16px;115 padding:5px 0;116 font-weight:bold;117 text-decoration: none;118 text-align:center;119 text-shadow: 0 -1px 1px rgba(0,0,0,0.3);120 border: 1px solid #A9ABAD;121 border-radius: 5px;122 -moz-border-radius: 5px;123 -webkit-border-radius: 5px;124 display:block;125 background:#FDFDfD;126 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);127 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));116 color:#000; 117 font-size: 16px; 118 padding:5px 0; 119 font-weight:bold; 120 text-decoration: none; 121 text-align:center; 122 text-shadow: 0 -1px 1px rgba(255,255,255,1); 123 border: 1px solid #A9ABAD; 124 border-radius: 5px; 125 -moz-border-radius: 5px; 126 -webkit-border-radius: 5px; 127 display:block; 128 background:#FDFDfD; 129 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 130 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 128 131 } 129 132 input[type="submit"].btn_sub{ 130 color:#000;131 font-size: 16px;132 padding:5px 0;133 font-weight:bold;134 text-decoration: none;135 text-align:center;136 text-shadow: 0 -1px 1px rgba(0,0,0,0.3);137 border: 1px solid #A9ABAD;138 border-radius: 5px;139 -moz-border-radius: 5px;140 -webkit-border-radius: 5px;141 display:block;142 background:#FDFDfD;143 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);144 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));133 color:#000; 134 font-size: 16px; 135 padding:5px 0; 136 font-weight:bold; 137 text-decoration: none; 138 text-align:center; 139 text-shadow: 0 -1px 1px rgba(0,0,0,0.3); 140 border: 1px solid #A9ABAD; 141 border-radius: 5px; 142 -moz-border-radius: 5px; 143 -webkit-border-radius: 5px; 144 display:block; 145 background:#FDFDfD; 146 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 147 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 145 148 } 146 149 /*----------------------------------------------- … … 148 151 ----------------------------------------------- */ 149 152 a.btn_more,a.btn_more:link,a.btn_more:visited,a.btn_more:hover{ 150 color:#000;151 font-size: 16px;152 padding:5px 0;153 font-weight:bold;154 text-decoration: none;155 text-align:center;156 border: 1px solid #A9ABAD;157 border-radius: 5px;158 -moz-border-radius: 5px;159 -webkit-border-radius: 5px;160 display:block;161 background: #FFF;162 clear:both;163 margin:10px;153 color:#000; 154 font-size: 16px; 155 padding:5px 0; 156 font-weight:bold; 157 text-decoration: none; 158 text-align:center; 159 border: 1px solid #A9ABAD; 160 border-radius: 5px; 161 -moz-border-radius: 5px; 162 -webkit-border-radius: 5px; 163 display:block; 164 background: #FFF; 165 clear:both; 166 margin:10px; 164 167 } 165 168 input[type="submit"].btn_more{ 166 color:#000;167 font-size: 16px;168 padding:5px 0;169 font-weight:bold;170 text-decoration: none;171 text-align:center;172 border: 1px solid #A9ABAD;173 border-radius: 5px;174 -moz-border-radius: 5px;175 -webkit-border-radius: 5px;176 display:block;177 background: #FFF;178 clear:both;169 color:#000; 170 font-size: 16px; 171 padding:5px 0; 172 font-weight:bold; 173 text-decoration: none; 174 text-align:center; 175 border: 1px solid #A9ABAD; 176 border-radius: 5px; 177 -moz-border-radius: 5px; 178 -webkit-border-radius: 5px; 179 display:block; 180 background: #FFF; 181 clear:both; 179 182 } 180 183 /*----------------------------------------------- … … 182 185 ----------------------------------------------- */ 183 186 a.btn_btm{ 184 width:150px;185 text-align: center;186 color: #FFF;187 background-color: #000;188 background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%);189 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323));190 border:#303030 solid 1px;191 text-shadow: 0 -1px 1px rgba(0,0,0,0.5);192 -moz-border-radius: 5px;193 -webkit-border-radius: 5px;194 padding: 5px;195 margin:10px auto;196 transition: background-color 1s ease-in;197 -webkit-transition: background-color 1s ease-in;198 -moz-transition: opacity 1s ease-int;199 cursor:pointer;187 width:150px; 188 text-align: center; 189 color: #FFF; 190 background-color: #000; 191 background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%); 192 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323)); 193 border:#303030 solid 1px; 194 text-shadow: 0 -1px 1px rgba(0,0,0,0.5); 195 -moz-border-radius: 5px; 196 -webkit-border-radius: 5px; 197 padding: 5px; 198 margin:10px auto; 199 transition: background-color 1s ease-in; 200 -webkit-transition: background-color 1s ease-in; 201 -moz-transition: opacity 1s ease-int; 202 cursor:pointer; 200 203 } 201 204 .btn_btm,a.btn_btm:link,a.btn_btm:hover,a.btn_btm:visited{ 202 color:#FFF;203 text-decoration:none;205 color:#FFF; 206 text-decoration:none; 204 207 } 205 208 input[type="submit"].btn_btm{ 206 width:150px;207 text-align: center;208 color: #FFF;209 background-color: #000;210 background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%);211 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323));212 border:#303030 solid 1px;213 text-shadow: 0 -1px 1px rgba(0,0,0,0.5);214 -moz-border-radius: 5px;215 -webkit-border-radius: 5px;216 padding: 5px;217 margin:10px auto;218 transition: background-color 1s ease-in;219 -webkit-transition: background-color 1s ease-in;220 -moz-transition: opacity 1s ease-int;221 cursor:pointer;209 width:150px; 210 text-align: center; 211 color: #FFF; 212 background-color: #000; 213 background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%); 214 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323)); 215 border:#303030 solid 1px; 216 text-shadow: 0 -1px 1px rgba(0,0,0,0.5); 217 -moz-border-radius: 5px; 218 -webkit-border-radius: 5px; 219 padding: 5px; 220 margin:10px auto; 221 transition: background-color 1s ease-in; 222 -webkit-transition: background-color 1s ease-in; 223 -moz-transition: opacity 1s ease-int; 224 cursor:pointer; 222 225 } 223 226 /*----------------------------------------------- … … 225 228 ----------------------------------------------- */ 226 229 ul.edit{ 227 float:right;228 clear:right;229 display:inline;230 vertical-align:top;231 line-height:1;232 position:absolute;233 right:10px;234 top:15px;230 float:right; 231 clear:right; 232 display:inline; 233 vertical-align:top; 234 line-height:1; 235 position:absolute; 236 right:10px; 237 top:15px; 235 238 } 236 239 ul.edit li{ 237 display:inline;238 float:left;239 line-height:1;240 vertical-align:middle;240 display:inline; 241 float:left; 242 line-height:1; 243 vertical-align:middle; 241 244 } 242 245 ul.edit li:first-child{ 243 margin-right:0.8em;246 margin-right:0.8em; 244 247 } 245 248 a.b_edit:link,a.b_edit:visited,a.b_edit:hover{ 246 color:#000;247 font-size:11px;248 padding:4px 5px;249 border:#CCC solid 1px;250 border-radius: 12px;251 -moz-border-radius: 12px;252 -webkit-border-radius: 12px;253 background:#D7DDE3;254 background: -moz-linear-gradient(center top, #FFFFFF 0%,#D7DDE3 100%);255 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(1, #D7DDE3));256 display:inline;257 text-align:center;258 cursor:pointer;259 vertical-align:middle;249 color:#000; 250 font-size:11px; 251 padding:4px 5px; 252 border:#CCC solid 1px; 253 border-radius: 12px; 254 -moz-border-radius: 12px; 255 -webkit-border-radius: 12px; 256 background:#D7DDE3; 257 background: -moz-linear-gradient(center top, #FFFFFF 0%,#D7DDE3 100%); 258 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(1, #D7DDE3)); 259 display:inline; 260 text-align:center; 261 cursor:pointer; 262 vertical-align:middle; 260 263 } 261 264 a.b_delete:link,a.b_delete:visited,a.b_delete:hover{ 262 vertical-align:top;263 cursor:pointer;265 vertical-align:top; 266 cursor:pointer; 264 267 } 265 268 /*----------------------------------------------- … … 267 270 ----------------------------------------------- */ 268 271 .cartbtn_default{ 269 width:50%!important;270 font-size:15px;271 padding:10px 0;272 background:#669222;273 background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%);274 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222));272 width:50%!important; 273 font-size:15px; 274 padding:10px 0; 275 background:#669222; 276 background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%); 277 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222)); 275 278 } 276 279 … … 279 282 ----------------------------------------------- */ 280 283 .btn_favorite .btn_sub{ 281 width:auto;282 display:block;284 width:auto; 285 display:block; 283 286 } 284 287 /*----------------------------------------------- … … 286 289 ----------------------------------------------- */ 287 290 .addbtn{ 288 margin:0 30px;289 padding:5px 0;291 margin:0 30px; 292 padding:5px 0; 290 293 } 291 294 /*----------------------------------------------- … … 293 296 ----------------------------------------------- */ 294 297 .btn_s{ 295 width:12em;296 padding:10px 0!important;297 margin:10px auto;298 clear:both;298 width:12em; 299 padding:10px 0!important; 300 margin:10px auto; 301 clear:both; 299 302 } 300 303 /*----------------------------------------------- … … 302 305 ----------------------------------------------- */ 303 306 .btn_inputzip{ 304 margin:12px 0 5px 0;307 margin:12px 0 5px 0; 305 308 } 306 309 /*----------------------------------------------- … … 308 311 ----------------------------------------------- */ 309 312 .btn_login,.btn_close{ 310 width:70%;311 margin:10px auto;312 } 313 width:70%; 314 margin:10px auto; 315 } -
branches/version-2_11-dev/html/user_data/packages/sphone/css/common.css
r21081 r21093 2 2 /* =================================================================== 3 3 CSS information 4 file name :common.css 4 5 style info :共通 5 6 =================================================================== */ … … 8 9 ----------------------------------------------- */ 9 10 body { 10 background: #FFF;11 font-family: Helvetica, san-serif;12 line-height: 1.5;13 font-size: 14px;14 margin: 0;15 padding: 0;16 -webkit-user-select: none;17 -webkit-text-size-adjust: none;18 -webkit-touch-callout:none;19 -webkit-tap-highlight-color: rgba(0,0,0,0.50);11 background: #FFF; 12 font-family: Helvetica, san-serif; 13 line-height: 1.5; 14 font-size: 14px; 15 margin: 0; 16 padding: 0; 17 -webkit-user-select: none; 18 -webkit-text-size-adjust: none; 19 -webkit-touch-callout:none; 20 -webkit-tap-highlight-color: rgba(0,0,0,0.50); 20 21 } 21 22 /*----------------------------------------------- 22 23 リンク指定 23 24 ----------------------------------------------- */ 24 a:link {25 color:#324E85;26 text-decoration: none;25 a:link{ 26 color:#324E85; 27 text-decoration: none; 27 28 } 28 29 a:visited { 29 color: #603E7D;30 text-decoration: none;31 } 32 a:hover {33 text-decoration:none;34 cursor:pointer;30 color: #603E7D; 31 text-decoration: none; 32 } 33 a:hover{ 34 text-decoration:none; 35 cursor:pointer; 35 36 } 36 37 37 38 /*右矢印リンクテキスト*/ 39 .arrowRtxt{ 40 display:inline; 41 clear:both; 42 margin:5px auto; 43 padding-right:15px; 44 background:url(../img/common/ico_arrowR.png) right center no-repeat; 45 } 46 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 38 47 .arrowRtxt { 39 display: inline; 40 clear: both; 41 margin: 5px auto; 42 padding-right: 15px; 43 background: url(../img/common/ico_arrowR.png) right center no-repeat; 44 } 45 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 46 .arrowRtxt { 47 background: url(../img/common/ico_arrowR2.png) right center no-repeat; 48 -webkit-background-size: 10px 15px; 49 background-size: 10px 15px; 50 } 51 } 52 div, li, p { 48 background: url(../img/common/ico_arrowR2.png) right center no-repeat; 49 -webkit-background-size: 10px 15px; 50 background-size: 10px 15px; 51 } 52 } 53 div,li,p{ 53 54 -webkit-tap-highlight-color: rgba(0,0,0,0.50);} 54 55 /*----------------------------------------------- … … 56 57 ----------------------------------------------- */ 57 58 .clearfix:after { 58 content: ".";59 display: block;60 clear: both;61 height: 0;62 visibility: hidden;63 } 64 ul:after {65 content: ".";66 display: block;67 clear: both;68 height: 0;69 visibility: hidden;70 } 71 dl:after {72 content: ".";73 display: block;74 clear: both;75 height: 0;76 visibility: hidden;59 content: "."; 60 display: block; 61 clear: both; 62 height: 0; 63 visibility: hidden; 64 } 65 ul:after{ 66 content: "."; 67 display: block; 68 clear: both; 69 height: 0; 70 visibility: hidden; 71 } 72 dl:after{ 73 content: "."; 74 display: block; 75 clear: both; 76 height: 0; 77 visibility: hidden; 77 78 } 78 79 /*----------------------------------------------- 79 80 汎用 80 81 ----------------------------------------------- */ 81 .photoL { 82 float: left; 83 clear: left; 84 } 85 .photoR { 86 float: right; 87 clear: right; 88 } 89 .clear { 90 clear: both; 91 } 92 .inner { 93 padding: 10px; 94 } 95 .intro { 96 padding: 5px 10px 10px; 97 font-weight: bold; 82 .photoL{ 83 float:left; 84 clear:left; 85 } 86 .photoR{ 87 float:right; 88 clear:right; 89 } 90 .clear{ 91 clear:both; 92 } 93 .inner{ 94 padding:10px; 95 } 96 .intro{ 97 padding:5px 10px 10px; 98 font-weight:bold; 99 } 100 .intro p{ 101 line-height:1.3; 98 102 } 99 103 .hidden { 100 display: none;101 } 102 .end {103 border-bottom:none!important;104 } 105 .top {106 margin-bottom: 1em!important;107 } 108 .bg_head {109 background:#EEE;104 display: none; 105 } 106 .end{ 107 border-bottom:none!important; 108 } 109 .top{ 110 margin-bottom:8px!important; 111 } 112 .bg_head{ 113 background:#EEE; 110 114 } 111 115 /*----------------------------------------------- 112 116 font 113 117 ----------------------------------------------- */ 114 h2 {115 font-size:20px;116 } 117 h3, h4,h5 {118 font-size: 100%;119 font-weight:bold;120 } 121 em {122 font-weight:bold;118 h2{ 119 font-size:20px; 120 } 121 h3,h4,h5 { 122 font-size: 100%; 123 font-weight:bold; 124 } 125 em{ 126 font-weight:bold; 123 127 } 124 128 .attention { 125 color: #CC0000; 126 } 129 color: #CC0000; } 127 130 .mini { 128 font-size: 11px; 129 font-weight: normal; 130 } 131 .fb { 132 font-size: 14px; 133 font-weight: bold; 134 } 135 .price { 136 color: #CC0000; 137 font-weight: bold; 138 } 139 .attentionSt { 140 color: #CC0000; 141 font-weight: bold; 131 font-size: 11px; 132 font-weight:normal; } 133 .fb{ 134 font-size:14px; 135 font-weight:bold; 136 } 137 .fn{ 138 font-weight:normal; 139 } 140 .price{ 141 color:#CC0000; 142 font-weight:bold; 143 } 144 .attentionSt{ 145 color:#CC0000; 146 font-weight:bold; 142 147 } 143 148 /*------------------------------------------------- … … 145 150 ----------------------------------------------- */ 146 151 .frame_outer { 147 overflow: hidden;148 width: 100%;149 background: #FFF;150 } 151 #main-content {152 overflow: hidden; 153 width: 100%; 154 background: #FFF; 155 } 156 #main-content{ 152 157 } 153 158 /*----------------------------------------------- … … 155 160 ----------------------------------------------- */ 156 161 h2.title { 157 color: #FFF;158 font-size:20px;159 font-weight:bold;160 line-height:45px;161 text-align:center;162 text-shadow: 0px -1px 1px rgba(0,0,0,0.5);163 margin: 0 0 15px 0;164 padding:0 10px;165 background:#494E57;166 background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494e57 100%);167 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6D7481),color-stop(0.8, #505765),color-stop(1, #494e57));168 border-top:#868D99 1px solid;169 border-bottom:#C6C2C8 1px solid;170 -webkit-box-shadow: 1px 5px 5px #CCC;171 -moz-box-shadow: 1px 5px 5px #CCC;172 vertical-align: middle;173 white-space:nowrap;174 overflow:hidden;175 text-overflow: ellipsis;176 clear:both;162 color: #FFF; 163 font-size:20px; 164 font-weight:bold; 165 line-height:45px; 166 text-align:center; 167 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 168 margin: 0 0 15px 0; 169 padding:0 10px; 170 background:#494E57; 171 background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494e57 100%); 172 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6D7481),color-stop(0.8, #505765),color-stop(1, #494e57)); 173 border-top:#868D99 1px solid; 174 border-bottom:#C6C2C8 1px solid; 175 -webkit-box-shadow: 1px 5px 5px #CCC; 176 -moz-box-shadow: 1px 5px 5px #CCC; 177 vertical-align: middle; 178 white-space:nowrap; 179 overflow:hidden; 180 text-overflow: ellipsis; 181 clear:both; 177 182 } 178 183 /*ボタンで展開するタイトルバー*/ 179 .title_box {180 color: #FFF;181 text-shadow: 0px -1px 1px rgba(0,0,0,0.3);182 line-height:45px;183 padding:0 10px;184 margin: 0 0 15px 0;185 background:#494e57;186 background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494e57 100%);187 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6D7481),color-stop(0.8, #505765),color-stop(1, #494e57));188 border-top: #74828B solid 1px;189 border-bottom:#74828B solid 1px;190 vertical-align: middle;191 clear:both;192 } 193 .title_box h2 {194 font-size:20px;195 text-shadow: 0px -1px 1px rgba(0,0,0,0.5);196 width:85%;197 float:left;198 clear:left;199 white-space:nowrap;200 overflow:hidden;201 text-overflow: ellipsis;202 line-height:45px;203 vertical-align:middle;204 } 205 .title_box h3 {206 width:85%;207 float:left;208 clear:left;209 font-size:18px;210 text-shadow: 0px -1px 1px rgba(0,0,0,0.5);211 white-space:nowrap;212 overflow:hidden;213 text-overflow: ellipsis;214 line-height:30px;215 vertical-align:middle;184 .title_box{ 185 color: #FFF; 186 text-shadow: 0px -1px 1px rgba(0,0,0,0.3); 187 line-height:45px; 188 padding:0 10px; 189 margin: 0 0 15px 0; 190 background:#494e57; 191 background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494e57 100%); 192 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6D7481),color-stop(0.8, #505765),color-stop(1, #494e57)); 193 border-top: #74828B solid 1px; 194 border-bottom:#74828B solid 1px; 195 vertical-align: middle; 196 clear:both; 197 } 198 .title_box h2{ 199 font-size:20px; 200 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 201 width:85%; 202 float:left; 203 clear:left; 204 white-space:nowrap; 205 overflow:hidden; 206 text-overflow: ellipsis; 207 line-height:45px; 208 vertical-align:middle; 209 } 210 .title_box h3{ 211 width:85%; 212 float:left; 213 clear:left; 214 font-size:18px; 215 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 216 white-space:nowrap; 217 overflow:hidden; 218 text-overflow: ellipsis; 219 line-height:30px; 220 vertical-align:middle; 216 221 } 217 222 /*サブタイトル*/ 218 h3.subtitle {219 font-size:18px;220 color: #FFF;221 line-height:30px;222 text-shadow: 0px -1px 1px rgba(0,0,0,0.3);223 padding:0 10px;224 margin: 0 0 10px 0;225 background:#84949F;226 background: -moz-linear-gradient(center top, #96A4AF 0%,#84949F 100%);227 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96A4AF),color-stop(1, #84949F));228 border-top: #74828B solid 1px;229 border-bottom:#74828B solid 1px;vertical-align: middle;230 white-space:nowrap;231 overflow:hidden;232 text-overflow: ellipsis;233 clear:both;234 -webkit-box-shadow: 1px 0px 1px #FFF;235 -moz-box-shadow: 1px 0px 1px #FFF;236 position:relative;223 h3.subtitle{ 224 font-size:18px; 225 color: #FFF; 226 line-height:30px; 227 text-shadow: 0px -1px 1px rgba(0,0,0,0.3); 228 padding:0 10px; 229 margin: 0 0 10px 0; 230 background:#84949F; 231 background: -moz-linear-gradient(center top, #96A4AF 0%,#84949F 100%); 232 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96A4AF),color-stop(1, #84949F)); 233 border-top: #74828B solid 1px; 234 border-bottom:#74828B solid 1px;vertical-align: middle; 235 white-space:nowrap; 236 overflow:hidden; 237 text-overflow: ellipsis; 238 clear:both; 239 -webkit-box-shadow: 1px 0px 1px #FFF; 240 -moz-box-shadow: 1px 0px 1px #FFF; 241 position:relative; 237 242 } 238 243 /*ボタンで展開するサブタイトルバー*/ 239 .title_box_sub { 240 color: #FFF; 241 line-height: 30px; 242 padding: 0 10px; 243 margin: 0 0 20px 0; 244 background: #84949F; 245 background: -moz-linear-gradient(center top, #96A4AF 0%,#84949F 100%); 246 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96A4AF),color-stop(1, #84949F)); 247 border-top: #74828B solid 1px; 248 border-bottom: #74828B solid 1px; 249 vertical-align: middle; 250 clear: both; 251 position: relative; 252 } 253 .title_box_sub h2, 254 .title_box_sub h3 { 255 font-size: 18px; 256 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 257 width: 85%; 258 float: left; 259 clear: left; 260 white-space: nowrap; 261 overflow: hidden; 262 text-overflow: ellipsis; 263 line-height: 30px; 264 vertical-align: middle; 265 } 266 .title_box_sub .b_expand { 267 width: 22px; 268 height: 21px; 269 float: right; 270 clear: right; 271 position: absolute; 272 top: -6px; 273 right: 15px; 274 z-index: 2; 275 padding: 2px; 244 .title_box_sub{ 245 color: #FFF; 246 line-height:30px; 247 padding:0 10px; 248 margin: 0 0 20px 0; 249 background:#84949F; 250 background: -moz-linear-gradient(center top, #96A4AF 0%,#84949F 100%); 251 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96A4AF),color-stop(1, #84949F)); 252 border-top: #74828B solid 1px; 253 border-bottom:#74828B solid 1px; 254 vertical-align: middle; 255 clear:both; 256 position:relative; 257 } 258 .title_box_sub h2,.title_box_sub h3{ 259 font-size:18px; 260 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 261 width:85%; 262 float:left; 263 clear:left; 264 white-space:nowrap; 265 overflow:hidden; 266 text-overflow: ellipsis; 267 line-height:30px; 268 vertical-align:middle; 269 } 270 .title_box_sub .b_expand{ 271 width:22px; 272 height:21px; 273 float:right; 274 clear:right; 275 position:absolute; 276 top:-6px; 277 right:15px; 278 z-index:2; 279 padding:2px; 276 280 } 277 281 /*---------------------------------------------------- … … 279 283 ----------------------------------------------------*/ 280 284 input { 281 padding: 6px; 282 margin: 5px 0; 283 font-size: 14px; 284 } 285 input[type="radio"] { 286 vertical-align: top; 287 padding: 5px; 288 margin-right: 0.5em; 289 } 290 .text, .textarea, .dropdown { 291 color: #999; 292 padding: 0.5em; 293 border: #4C4C4C solid 1px; 294 background: #FFF; 295 border-radius: 5px; 296 -webkit-border-radius: 5px; 297 -moz-border-radius: 5px; 298 } 299 .textarea { 300 width: 100%; 301 margin: 0 0 10px -8px; 302 min-height: 60px; 303 } 304 .cartin_quantity, .box_point { 305 width: 2em; 306 } 307 .boxLong { 308 width: 96%; 309 } 310 .boxMedium { 311 width: 35%; 285 margin:5px 0; 286 padding:5px; 287 -webkit-box-shadow:none; 288 -moz-box-shadow:none; 289 } 290 input[type="text"]{ 291 } 292 input[type="number"]{ 293 padding:5px 0; 294 text-indent:5px; 295 } 296 input[type="number"]:first-child{ 297 margin-right:-2px; 298 } 299 input[type="radio"],input[type="check"]{ 300 vertical-align:bottom; 301 padding:5px; 302 line-height:1.5; 303 margin-right:0.5em; 304 } 305 .text, .textarea, .dropdown{ 306 padding:0.5em; 307 margin:0; 308 border:#4C4C4C solid 1px; 309 background: #FFF; 310 border-radius: 5px; 311 -webkit-border-radius: 5px; 312 -moz-border-radius: 5px; 313 } 314 .textarea{ 315 width:97%; 316 padding:0.5em; 317 margin:0 0 10px 0; 318 height:auto; 319 min-height:70px; 320 overflow:visible; 321 } 322 .cartin_quantity,.box_point{ 323 width:2em; 324 } 325 .boxLong{ 326 width:95%; 327 } 328 .boxMedium{ 329 width:35%; 312 330 } 313 331 .boxShort { 314 width: 20%; 315 } 316 .boxHarf { 317 width: 41%; 332 width: 22%; 333 } 334 .boxHarf{ 335 width:42%; 336 } 337 338 select.boxLong{ 339 width:100%; 340 } 341 select.boxMedium{ 342 width:40%; 343 } 344 select.boxShort{ 345 width:25%; 346 } 347 select.boxHarf{ 348 width:46%; 318 349 } 319 350 /*---------------------------------------------------- … … 324 355 ------------------------------------------------ */ 325 356 header { 326 background: #FFF; 327 margin: 0 auto; 328 padding: 10px 5px; 329 clear: both; 330 } 331 #site_name { 332 width: 47%; 333 float: left; 334 clear: left; 335 position: relative; 336 } 337 header h1 { 338 margin-top: -8px; 357 width:100%; 358 background: #FFF; 359 margin: 0 auto; 360 padding:10px 0; 361 clear:both; 362 } 363 header h1{ 364 width:47%; 365 height:25px; 366 float:left; 367 clear:left; 368 padding-right:5px; 369 margin:0 0 0 5px; 370 max-width:150px; 371 position:relative; 372 } 373 header h1 a{ 374 display:block; 375 padding:0; 376 margin:0; 377 cursor:pointer; 378 vertical-align:middle; 379 } 380 header h1 img{ 381 width:150px; 382 height:25px; 383 margin:-5px 0 0 0; 384 padding:0; 385 vertical-align:middle; 339 386 } 340 387 341 388 /* ヘッダーナビ 342 389 ------------------------------------------------ */ 343 .header_utility { 344 width: 50%; 345 padding-left: 5px; 346 float: right; 347 display: inline; 348 } 349 .header_navi { 350 font-size: 11px; 351 padding-top: 5px; 352 float: right; 353 display: inline; 354 text-align: right; 355 line-height: 1.2; 356 } 357 .header_navi ul { 358 display: inline; 359 float: right; 360 } 361 .header_navi li { 362 float: left; 363 display: block; 364 margin: 0; 365 padding: 8px 5px; 366 text-align: center; 367 border: #A9ABAD solid 1px; 368 border-radius: 5px; 369 -moz-border-radius: 5px; 370 -webkit-border-radius: 5px; 371 background: #FDFDfD; 372 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 373 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 374 } 375 .header_navi li a { 376 text-decoration: none; 377 } 378 .header_navi li:first-child { 379 margin-right: 1em; 380 } 381 .popup_mypage { 382 font-size: small; 383 width: 150px; 384 padding: 10px; 385 display: none; 386 position: absolute; 387 top: 55px; 388 z-index: 1; 389 background: #FFF; 390 background: -moz-linear-gradient(center top, #FDFDFD 0%,#E5E5E5 100%); 391 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #E5E5E5)); 392 border: #CCC solid 1px; 393 border-radius: 5px; 394 -webkit-border-radius: 5px; 395 -moz-border-radius: 5px; 396 } 397 .popup_cart { 398 font-size: small; 399 width: 180px; 400 padding: 10px; 401 display: none; 402 position: absolute; 403 top: 55px; 404 z-index: 1; 405 background: #FFF; 406 background: -moz-linear-gradient(center top, #FDFDFD 0%,#E5E5E5 100%); 407 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #E5E5E5)); 408 border: #CCC solid 1px; 409 border-radius: 5px; 410 -webkit-border-radius: 5px; 411 -moz-border-radius: 5px; 412 } 413 .popup_mypage a, 414 .popup_cart a { 415 text-decoration: underline; 416 } 417 .popup_mypage h2, 418 .popup_cart h2 { 419 font-size: 1.2em; 420 } 421 .quentity, .money { 422 font-weight: bold; 423 } 424 .popup_cart hr.dashed:last-child { 425 display: none; 426 } 427 hr.dashed { 428 display: block; 429 height: 1px; 430 border:0; 431 border-top: #CCC dashed 1px; 432 margin: 0.2em 0; 433 padding: 0; 434 } 435 .free_money { 436 } 437 .dl_item { 438 margin-top: 5px; 390 .header_utility{ 391 width:47%; 392 padding:0 5px; 393 float:right; 394 } 395 .header_navi{ 396 font-size:11px; 397 padding-top:5px; 398 float:right; 399 display:inline; 400 text-align:right; 401 line-height:1.2; 402 } 403 .header_navi ul{ 404 display:inline; 405 float:right; 406 } 407 .header_navi li{ 408 float:left; 409 margin:0; 410 padding:8px 5px; 411 border:#A9ABAD solid 1px; 412 border-radius: 5px; 413 -moz-border-radius: 5px; 414 -webkit-border-radius: 5px; 415 background:#FDFDfD; 416 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 417 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 418 } 419 .header_navi li:first-child{ 420 margin-right:1em; 421 } 422 .header_navi p { 423 line-height:1.3; 424 } 425 .popup_mypage{ 426 font-size:small; 427 width:auto; 428 min-width:100px; 429 padding:10px; 430 display: none; 431 position: absolute; 432 line-height:1.2; 433 top: 55px; 434 z-index: 1; 435 background:#FFF; 436 background: -moz-linear-gradient(center top, #FDFDFD 0%,#E5E5E5 100%); 437 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #E5E5E5)); 438 border:#CCC solid 1px; 439 border-radius: 5px; 440 -webkit-border-radius: 5px; 441 -moz-border-radius: 5px; 442 } 443 .popup_mypage p:first-child{ 444 line-height:1.3; 445 margin-bottom:0.5em; 446 } 447 .popup_cart{ 448 font-size:small; 449 width:auto; 450 min-width:100px; 451 padding:10px; 452 display: none; 453 position: absolute; 454 top: 55px; 455 margin-right:5px; 456 z-index: 1; 457 background:#FFF; 458 background: -moz-linear-gradient(center top, #FDFDFD 0%,#E5E5E5 100%); 459 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #E5E5E5)); 460 border:#CCC solid 1px; 461 border-radius: 5px; 462 -webkit-border-radius: 5px; 463 -moz-border-radius: 5px; 464 } 465 .popup_mypage a,.popup_cart a{ 466 text-decoration:underline; 467 } 468 469 .popup_mypage h2,.popup_cart h2{ 470 font-size:1.2em; 471 } 472 .quantity,.money{ 473 font-size:14px; 474 font-weight:bold; 475 } 476 .popup_cart hr.dashed:last-child{ 477 display:none; 478 } 479 hr.dashed{ 480 display:block; 481 height:1px; 482 border:0; 483 border-top:#CCC dashed 1px; 484 margin:0.2em 0; 485 padding:0;} 486 .free_money_area{ 487 font-size:11px; 488 } 489 .dl_item{ 490 margin-top:5px; 439 491 } 440 492 441 493 /*index menu/トップページヘッダー3列ボタン*/ 442 .top_menu { 443 width: 100%; 444 margin-bottom: 10px; 445 -webkit-box-shadow: 1px 5px 5px #ccc; 446 -moz-box-shadow: 1px 5px 5px #ccc; 447 background: #494E57; 448 background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494E57 100%); 449 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(0.8, #505765),color-stop(1, #494E57)); 450 } 451 .top_menu ul { 452 width: auto; 453 margin: 0 auto; 454 clear: both; 455 } 456 .top_menu ul li { 457 width: 33%; 458 float: left; 459 text-align: center; 460 border-left: #747B83 solid 1px; 461 border-right: #3D3D3D solid 1px; 462 border-bottom: #141517 solid 1px; 463 border-top: #A1A7AF solid 2px; 464 } 465 .top_menu ul li img { 466 margin: 0 auto; 467 display: block; 468 clear: both; 469 } 470 .top_menu ul li a:link, 471 .top_menu ul li a:visited { 472 color: #FFF; 473 text-shadow: 0px 1px 1px rgba(0,0,0,1); 474 padding: 9px 0 8px 0; 475 display: block; 476 background: #494E57; 477 background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494E57 100%); 478 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(0.8, #505765),color-stop(1, #494E57)); 479 -webkit-transition: background-color 0.5s ease-in; 480 -moz-transition: background-color 0.5s ease-in; 481 } 482 .top_menu ul li a:hover { 483 color: #FFF; 484 text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 485 background: #5393C5; 486 background: -moz-linear-gradient(center top, #5393C5 10%,#80B6E2 100%); 487 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393C5),color-stop(1, #80B6E2)); 488 text-decoration: none; 489 } 490 .top_menu li:first-child { 491 border-left: none; 492 } 493 .top_menu li:last-child { 494 border-right: none; 494 .top_menu{ 495 width:100%; 496 margin-bottom:10px; 497 -webkit-box-shadow: 1px 5px 5px #ccc; 498 -moz-box-shadow: 1px 5px 5px #ccc; 499 background:#494E57; 500 background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494E57 100%); 501 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(0.8, #505765),color-stop(1, #494E57)); 502 } 503 .top_menu ul{ 504 width:auto; 505 margin:0 auto; 506 clear:both; 507 } 508 .top_menu ul li{ 509 width:33%; 510 float:left; 511 text-align:center; 512 border-left:#747B83 solid 1px; 513 border-right:#3D3D3D solid 1px; 514 border-bottom:#141517 solid 1px; 515 border-top:#A1A7AF solid 2px; 516 } 517 .top_menu ul li img{ 518 margin:0 auto; 519 display:block; 520 clear:both; 521 } 522 .top_menu ul li a:link,.top_menu ul li a:visited{ 523 color:#FFF; 524 text-shadow: 0px 1px 1px rgba(0,0,0,1); 525 padding:9px 0 8px 0; 526 display:block; 527 background:#494E57; 528 background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494E57 100%); 529 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(0.8, #505765),color-stop(1, #494E57)); 530 -webkit-transition:background-color 0.5s ease-in; 531 -moz-transition:background-color 0.5s ease-in; 532 } 533 .top_menu ul li a:hover{ 534 color:#FFF; 535 text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 536 background:#5393C5; 537 background: -moz-linear-gradient(center top, #5393C5 10%,#80B6E2 100%); 538 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393C5),color-stop(1, #80B6E2)); 539 text-decoration:none; 540 } 541 .top_menu li:first-child{ 542 border-left:none; 543 } 544 .top_menu li:last-child{ 545 border-right:none; 495 546 } 496 547 /*------------------------------------------------- … … 498 549 ----------------------------------------------- */ 499 550 footer.global_footer { 500 padding:0 0 10px 0;501 background: #E6E6E6;502 text-align:center;503 } 504 .footer_utility {505 background: #E6E6E6;551 padding:0 0 10px 0; 552 background: #E6E6E6; 553 text-align:center; 554 } 555 .footer_utility{ 556 background: #E6E6E6; 506 557 } 507 558 /*フッター4列ボタン*/ 508 559 .footer_navi { 509 width:100%;510 display:block;511 clear:both;512 padding:0.5em 0;513 -webkit-box-shadow: 1px 1px 1px #FFF;514 -moz-box-shadow: 1px 1px 1px #FFF;515 background:#272a2b;516 background: -moz-linear-gradient(center top, #808080 0%,#272a2b 100%);517 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #808080),color-stop(1, #272a2b));518 } 519 .footer_navi ul {520 width:100%;521 display:block;560 width:100%; 561 display:block; 562 clear:both; 563 padding:0.5em 0; 564 -webkit-box-shadow: 1px 1px 1px #FFF; 565 -moz-box-shadow: 1px 1px 1px #FFF; 566 background:#272a2b; 567 background: -moz-linear-gradient(center top, #808080 0%,#272a2b 100%); 568 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #808080),color-stop(1, #272a2b)); 569 } 570 .footer_navi ul{ 571 width:100%; 572 display:block; 522 573 } 523 574 .footer_navi:after { 524 content: ".";525 display: block;526 clear: both;527 height:0;528 } 529 .footer_navi li {530 width:23%;531 height:49px;532 display:block;533 margin:0 1%;534 padding:0;535 float:left;536 background:#202223;537 background: -moz-linear-gradient(center top, #282A2A 0%,#202223 100%);538 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #282A2A),color-stop(1, #202223));539 text-align:center;540 color:#FFF;541 font-size:10px;542 border-radius: 8px;543 -webkit-border-radius: 8px;544 -moz-border-radius: 8px;545 -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.2) inset,-3px -3px 3px 3px rgba(0,0,0,0.2) inset;546 -moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.2) inset,-3px -3px 3px 3px rgba(0,0,0,0.2) inset;547 position:relative;548 } 549 .footer_status_area {550 margin:0;551 padding:20px 10px 10px;552 text-align:center;553 background: #E6E6E6;554 } 555 .footer_status_area p:last-child {556 margin:10px auto;557 } 558 .guide_area {559 clear:both;560 margin:0;561 padding:10px 0 0 0;562 text-align:center;563 border-top:#999 solid 1px;564 } 565 .guide_area p {566 font-size:14px;567 font-weight:bold;568 line-height:2.4;569 } 570 .guide_area a {571 padding:0.5em 0.3em;572 margin:0.5em 0.1em;575 content: "."; 576 display: block; 577 clear: both; 578 height:0; 579 } 580 .footer_navi li{ 581 width:23%; 582 height:49px; 583 display:block; 584 margin:0 1%; 585 padding:0; 586 float:left; 587 background:#202223; 588 background: -moz-linear-gradient(center top, #282A2A 0%,#202223 100%); 589 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #282A2A),color-stop(1, #202223)); 590 text-align:center; 591 color:#FFF; 592 font-size:10px; 593 border-radius: 8px; 594 -webkit-border-radius: 8px; 595 -moz-border-radius: 8px; 596 -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.2) inset,-3px -3px 3px 3px rgba(0,0,0,0.2) inset; 597 -moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.2) inset,-3px -3px 3px 3px rgba(0,0,0,0.2) inset; 598 position:relative; 599 } 600 .footer_status_area{ 601 margin:0; 602 padding:20px 10px 10px; 603 text-align:center; 604 background: #E6E6E6; 605 } 606 .footer_status_area p:last-child{ 607 margin:10px auto; 608 } 609 .guide_area{ 610 clear:both; 611 margin:0; 612 padding:10px 0 0 0; 613 text-align:center; 614 border-top:#999 solid 1px; 615 } 616 .guide_area p{ 617 font-size:14px; 618 font-weight:bold; 619 line-height:2.4; 620 } 621 .guide_area a{ 622 padding:0.5em 0.3em; 623 margin:0.5em 0.1em; 573 624 } 574 625 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 575 .guide_area p{576 font-size:12px;577 }626 .guide_area p{ 627 font-size:12px; 628 } 578 629 } 579 630 footer.global_footer p.copyright { 580 margin: 0;581 text-align: center;582 padding:10px 0;631 margin: 0; 632 text-align: center; 633 padding:10px 0; 583 634 } 584 635 /*------------------------------------------------- … … 586 637 ----------------------------------------------- */ 587 638 #search_area { 588 padding: 10px;589 background: #E7E8E9;590 clear:both;591 text-align: center;639 padding: 10px; 640 background: #E7E8E9; 641 clear:both; 642 text-align: center; 592 643 } 593 644 /*jqm追記*/ 594 #search_area .ui-input-search { 595 border-radius: 20px; 596 -webkit-border-radius: 20px; 597 -moz-border-radius: 20px; 598 } 645 #search_area .ui-input-search{ 646 border-radius: 20px; 647 -webkit-border-radius: 20px; 648 -moz-border-radius: 20px; 649 border:#CCC solid 1px; 650 } -
branches/version-2_11-dev/html/user_data/packages/sphone/css/contents.css
r21081 r21093 2 2 /* =================================================================== 3 3 CSS information 4 file name :contents.css 4 5 style info :下層コンテンツ用(#undercolumn) 5 6 =================================================================== */ … … 8 9 ----------------------------------------------- */ 9 10 #undercolumn{ 10 padding-bottom:35px;11 padding-bottom:35px; 11 12 } 12 13 /**イントロダクション*/ 13 14 .information{ 14 font-weight:bold;15 padding:5px 10px;16 line-height:1.3;17 border-bottom:#CCC solid 1px;15 font-weight:bold; 16 padding:5px 10px; 17 line-height:1.3; 18 border-bottom:#CCC solid 1px; 18 19 } 19 20 .information p:first-child{ 20 font-size:14px;21 margin-bottom:0.5em;21 font-size:14px; 22 margin-bottom:0.5em; 22 23 } 23 24 /*フォーム枠*/ 24 25 .form_area{ 25 padding:10px;26 padding:10px; 26 27 } 27 28 .form_area p:first-child{ 28 margin-bottom:0.5em;29 margin-bottom:0.5em; 29 30 } 30 31 .formBox{ 31 margin-bottom:20px;32 border:#A9ABAD solid 1px;33 border-radius:7px;34 -moz-border-radius:7px;35 -webkit-border-radius:7px;32 margin-bottom:20px; 33 border:#A9ABAD solid 1px; 34 border-radius:7px; 35 -moz-border-radius:7px; 36 -webkit-border-radius:7px; 36 37 } 37 38 .innerBox{ 38 padding:10px;39 border-bottom:#CCC solid 1px;39 padding:10px; 40 border-bottom:#CCC solid 1px; 40 41 } 41 42 .arrowBox{ 42 padding:10px 25px 10px 10px;43 background:url(../img/common/ico_arrowR.png) 95% center no-repeat;44 border-bottom:#CCC solid 1px;45 clear:both;43 padding:10px 25px 10px 10px; 44 background:url(../img/common/ico_arrowR.png) 95% center no-repeat; 45 border-bottom:#CCC solid 1px; 46 clear:both; 46 47 } 47 48 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 48 .arrowBox {49 background: url(../img/common/ico_arrowR2.png) 95% center no-repeat;50 -webkit-background-size: 10px 15px;51 background-size: 10px 15px;52 }49 .arrowBox { 50 background: url(../img/common/ico_arrowR2.png) 95% center no-repeat; 51 -webkit-background-size: 10px 15px; 52 background-size: 10px 15px; 53 } 53 54 } 54 55 .box_header{ 55 font-size:16px;56 font-weight:bold;57 background:#EEE;58 padding:10px;59 border-radius:7px 7px 0 0;60 -moz-border-radius:7px 7px 0 0;61 -webkit-border-radius:7px 7px 0 0;62 border-bottom:#CCC solid 1px;56 font-size:16px; 57 font-weight:bold; 58 background:#EEE; 59 padding:10px; 60 border-radius:7px 7px 0 0; 61 -moz-border-radius:7px 7px 0 0; 62 -webkit-border-radius:7px 7px 0 0; 63 border-bottom:#CCC solid 1px; 63 64 } 64 65 /*合計(フォーム下)*/ 65 66 .total_area,.result_area{ 66 padding:10px;67 text-align:right;68 background:#F7F5F0;69 border-top:#FFF solid 1px;70 border-bottom:#A9ABAD solid 1px;67 padding:10px; 68 text-align:right; 69 background:#F7F5F0; 70 border-top:#FFF solid 1px; 71 border-bottom:#A9ABAD solid 1px; 71 72 } 72 73 .formBox .btn_area_btm{ 73 padding:10px;74 background:#F7F5F0;75 border-top:#FFF solid 1px;76 border-bottom:none;77 border-radius:0 0 7px 7px;78 -moz-border-radius: 0 0 7px 7px;79 -webkit-border-radius: 0 0 7px 7px;74 padding:10px; 75 background:#F7F5F0; 76 border-top:#FFF solid 1px; 77 border-bottom:none; 78 border-radius:0 0 7px 7px; 79 -moz-border-radius: 0 0 7px 7px; 80 -webkit-border-radius: 0 0 7px 7px; 80 81 } 81 82 .formBox div:first-child{ 82 border-radius:7px 7px 0 0;83 -moz-border-radius:7px 7px 0 0;84 -webkit-border-radius:7px 7px 0 0;83 border-radius:7px 7px 0 0; 84 -moz-border-radius:7px 7px 0 0; 85 -webkit-border-radius:7px 7px 0 0; 85 86 } 86 87 .formBox div:last-child{ 87 border-radius:0 0 7px 7px;88 -moz-border-radius: 0 0 7px 7px;89 -webkit-border-radius: 0 0 7px 7px;90 border-bottom:none;88 border-radius:0 0 7px 7px; 89 -moz-border-radius: 0 0 7px 7px; 90 -webkit-border-radius: 0 0 7px 7px; 91 border-bottom:none; 91 92 } 92 93 .form_area div:after{ 93 content: ".";94 display: block;95 clear: both;96 height: 0;97 visibility: hidden;94 content: "."; 95 display: block; 96 clear: both; 97 height: 0; 98 visibility: hidden; 98 99 } 99 100 … … 104 105 /*カゴの中の商品*/ 105 106 .cartinarea{ 106 padding:10px;107 border-bottom:#CCC solid 1px;107 padding:10px; 108 border-bottom:#CCC solid 1px; 108 109 } 109 110 .cartitemBox{ 110 padding:10px 0;111 border-bottom:#CCC solid 1px;112 clear:both;111 padding:10px 0; 112 border-bottom:#CCC solid 1px; 113 clear:both; 113 114 } 114 115 .cartinarea .cartitemBox:last-child{ 115 border-bottom:none;116 border-bottom:none; 116 117 } 117 118 .cartinarea .photoL{ 118 width:80px;119 width:80px; 119 120 } 120 121 .cartinarea .cartinContents{ 121 width:68%; 122 float:right; 123 display:block; 124 position:relative; 122 width:68%; 123 float:right; 124 display:block; 125 position:relative; 126 } 127 .cartinarea .cartinContents p{ 128 line-height:1.2; 129 } 130 131 .cartinContents div{ 132 min-height:50px; 125 133 } 126 134 /* ----------------------------------------------- … … 128 136 ----------------------------------------------- */ 129 137 .bubbleBox{ 130 width:90%;131 font-weight:bold;132 margin:10px auto 20px auto;133 padding:10px 15px;134 position:relative;135 background-color:#F6F6F6;136 border:1px solid #C5C4C0;137 -moz-border-radius:7px;138 -webkit-border-radius:7px;139 -moz-box-shadow:inset 1px 1px 1px #FFF;140 -webkit-box-shadow:inset 1px 1px 1px #FFF;141 cursor:pointer;138 width:90%; 139 font-weight:bold; 140 margin:10px auto 20px auto; 141 padding:10px 15px; 142 position:relative; 143 background-color:#F6F6F6; 144 border:1px solid #C5C4C0; 145 -moz-border-radius:7px; 146 -webkit-border-radius:7px; 147 -moz-box-shadow:inset 1px 1px 1px #FFF; 148 -webkit-box-shadow:inset 1px 1px 1px #FFF; 149 cursor:pointer; 142 150 } 143 151 .bubble_arrow_line{ 144 width:0;145 height:0;146 border-color: #C5C4C0 transparent transparent transparent;147 border-style: solid;148 border-width: 10px;149 position:absolute;150 bottom:-21px;151 left:50%;152 width:0; 153 height:0; 154 border-color: #C5C4C0 transparent transparent transparent; 155 border-style: solid; 156 border-width: 10px; 157 position:absolute; 158 bottom:-21px; 159 left:50%; 152 160 } 153 161 .bubble_arrow{ 154 width:0;155 height:0;156 border-color: #F6F6F6 transparent transparent transparent;157 border-style: solid;158 border-width: 10px;159 position:absolute;160 bottom:-19px;161 left:50%;162 width:0; 163 height:0; 164 border-color: #F6F6F6 transparent transparent transparent; 165 border-style: solid; 166 border-width: 10px; 167 position:absolute; 168 bottom:-19px; 169 left:50%; 162 170 } 163 171 .bubble_announce{ 164 height:2.5em;165 background:url(../img/common/ico_arrowR.png) right center no-repeat;166 clear:both;167 vertical-align:middle;168 margin-bottom:8px;169 } 170 @media only screen and (-webkit-min-device-pixel-ratio: 2) {171 .bubble_announce {172 background: url(../img/common/ico_arrowR2.png) right center no-repeat;173 -webkit-background-size: 10px 15px;174 background-size: 10px 15px;175 }172 height:2.5em; 173 background:url(../img/common/ico_arrowR.png) right center no-repeat; 174 clear:both; 175 vertical-align:middle; 176 margin-bottom:5px; 177 } 178 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 179 .bubble_announce { 180 background: url(../img/common/ico_arrowR2.png) right center no-repeat; 181 -webkit-background-size: 10px 15px; 182 background-size: 10px 15px; 183 } 176 184 } 177 185 .bubbleBox p.fb{ 178 line-height:2.5em;186 line-height:2.5em; 179 187 } 180 188 .deliv_announce p{ 181 width:80%;189 width:80%; 182 190 } 183 191 .bubbleBox a:link,.bubbleBox a:visited{ 184 color:#333;192 color:#333; 185 193 } 186 194 /* ----------------------------------------------- … … 188 196 ----------------------------------------------- */ 189 197 .totalmoney_area{ 190 font-size:14px;191 font-weight:bold;192 padding:10px;193 border-bottom:#CCC solid 1px;198 font-size:14px; 199 font-weight:bold; 200 padding:10px; 201 border-bottom:#CCC solid 1px; 194 202 } 195 203 .point_announce{ 196 font-size:14px;197 font-weight:bold;198 margin-bottom:5px;204 font-size:12px; 205 font-weight:bold; 206 margin-bottom:5px; 199 207 } 200 208 .cartinContents .btn_delete{ 201 padding:2px;202 right:0;203 float:right;204 position:absolute;205 top:0;206 cursor:pointer;209 padding:2px; 210 right:0; 211 float:right; 212 position:absolute; 213 top:0; 214 cursor:pointer; 207 215 } 208 216 .cartinContents ul{ 209 float:right;210 clear:both;211 line-height:1.1;217 float:right; 218 clear:both; 219 line-height:1.1; 212 220 } 213 221 .cartinContents ul li{ 214 display:inline;215 float:left;222 display:inline; 223 float:left; 216 224 } 217 225 .cartinContents ul li.result{ 218 padding-left:0.5em;219 padding-top:1em;220 vertical-align:bottom;226 padding-left:0.5em; 227 padding-top:1em; 228 vertical-align:bottom; 221 229 } 222 230 … … 225 233 ----------------------------------------------- */ 226 234 .deliv_check{ 227 clear:both;235 clear:both; 228 236 } 229 237 .deliv_check dt{ 230 font-size:14px;231 font-weight:bold;232 padding:15px 10px 5px 10px;233 background:#EEE;234 border-top:#FFF solid 1px;235 vertical-align:middle;236 position:relative;237 display:block;238 font-size:14px; 239 font-weight:bold; 240 padding:10px 10px 5px 10px; 241 background:#EEE; 242 border-top:#FFF solid 1px; 243 vertical-align:middle; 244 position:relative; 245 display:block; 238 246 } 239 247 .deliv_check dt p{ 240 vertical-align:middle;248 vertical-align:middle; 241 249 } 242 250 .deliv_check dd{ 243 font-size:12px;244 padding:10px;245 border-bottom:#CCC solid 1px;246 display:block;251 font-size:12px; 252 padding:10px; 253 border-bottom:#CCC solid 1px; 254 display:block; 247 255 } 248 256 .deliv_check dd p{ 249 display:inline;250 float:left;257 display:inline; 258 float:left; 251 259 } 252 260 .deliv_check ul.edit{ 253 float:right;254 clear:right;255 display:inline;256 line-height:1.1;257 position:absolute;258 right:10px;259 top:8px;260 } 261 .deliv_check dt :first-child{262 border-top:none;263 border-radius:7px 7px 0 0;264 -moz-border-radius:7px 7px 0 0;265 -webkit-border-radius:7px 7px 0 0;261 float:right; 262 clear:right; 263 display:inline; 264 line-height:1.1; 265 position:absolute; 266 right:10px; 267 top:12px; 268 } 269 .deliv_check dt.first{ 270 border-top:none; 271 border-radius:7px 7px 0 0; 272 -moz-border-radius:7px 7px 0 0; 273 -webkit-border-radius:7px 7px 0 0; 266 274 } 267 275 … … 270 278 ----------------------------------------------- */ 271 279 .delivitemBox{ 272 padding:10px;273 border-bottom:#CCC solid 1px;274 clear:both;275 position:relative;280 padding:10px; 281 border-bottom:#CCC solid 1px; 282 clear:both; 283 position:relative; 276 284 } 277 285 .delivitemBox .photoL{ 278 width:80px;286 width:80px; 279 287 } 280 288 .delivitemBox .delivContents{ 281 width:67%;282 float:right;283 display:block;284 position:relative;289 width:67%; 290 float:right; 291 display:block; 292 position:relative; 285 293 } 286 294 .delivContents p{ 287 float:left; 295 float:left; 296 line-height:1.2; 297 margin-bottom:5px; 288 298 } 289 299 .delivContents ul{ 290 width:2.2em;291 float:right;292 right:15px;293 position:absolute;300 width:2.2em; 301 float:right; 302 right:15px; 303 position:absolute; 294 304 } 295 305 .delivContents ul li{ 296 text-align:center; 297 clear:both; 306 text-align:center; 307 clear:both; 308 } 309 310 .delivContents ul li:first-child{ 311 line-height:1.2; 312 vertical-align:bottom; 313 298 314 } 299 315 … … 302 318 ----------------------------------------------- */ 303 319 .pay_area ul{ 304 padding:10px;305 margin-bottom:10px;306 font-weight:bold;320 padding:10px; 321 margin-bottom:10px; 322 font-weight:bold; 307 323 } 308 324 .pay_area ul li{ 309 margin-bottom:6px; 325 line-height:1.5; 326 margin-bottom:6px; 310 327 } 311 328 .pay_area02 select:first-child{ 312 margin-bottom:12px;329 margin-bottom:12px; 313 330 } 314 331 p.check_point{ 315 font-size:12px;316 padding-left:1em;317 font-weight:normal;332 font-size:12px; 333 padding-left:1em; 334 font-weight:normal; 318 335 } 319 336 p.check_point .box_point{ 320 margin-right:0.5em; 321 } 337 margin-right:0.5em; 338 } 339 .contact_area p{ 340 line-height:1.3; 341 font-weight:bold; 342 margin-bottom:10px; 343 } 344 345 .contact_area .textarea{ 346 width:95%; 347 } 348 322 349 /* ----------------------------------------------- 323 350 ご注文内容のご確認 324 351 ----------------------------------------------- */ 325 352 .cartcartconfirmarea{ 326 padding:0 10px;327 border-bottom:#CCC solid 1px;353 padding:0 10px; 354 border-bottom:#CCC solid 1px; 328 355 } 329 356 .cartconfirmBox{ 330 padding:10px 0;331 border-bottom:#CCC solid 1px;332 clear:both;333 position:relative;357 padding:10px 0; 358 border-bottom:#CCC solid 1px; 359 clear:both; 360 position:relative; 334 361 } 335 362 .cartconfirmBox:last-child{ 336 border-bottom:none;363 border-bottom:none; 337 364 } 338 365 .cartconfirmBox .photoL{ 339 width:80px;340 float:left;366 width:80px; 367 float:left; 341 368 } 342 369 .cartconfirmContents{ 343 width:67%; 344 float:right; 345 display:block; 346 position:relative; 370 width:67%; 371 float:right; 372 display:block; 373 position:relative; 374 line-height:1.3; 347 375 } 348 376 .cartconfirmBox ul{ 349 float:right;350 clear:both;351 line-height:1.1;377 float:right; 378 clear:both; 379 line-height:1.1; 352 380 } 353 381 .cartconfirmBox ul li{ 354 display:inline;355 font-weight:bold;382 display:inline; 383 font-weight:bold; 356 384 } 357 385 .cartconfirmBox ul li.result{ 358 padding-left:1em;359 vertical-align:bottom;386 padding-left:1em; 387 vertical-align:bottom; 360 388 } 361 389 .result_area{ 362 font-size:14px;363 font-weight:bold;390 font-size:14px; 391 font-weight:bold; 364 392 } 365 393 .result_area dl{ 366 text-align:right;367 float:right;368 display:block;394 text-align:right; 395 float:right; 396 display:block; 369 397 } 370 398 .result_area dt,.result_area dd{ 371 text-align:right;399 text-align:right; 372 400 } 373 401 .result_area dt{ 374 font-size:11px;375 clear:left;376 float:right;402 font-size:11px; 403 clear:left; 404 float:right; 377 405 } 378 406 dl.point dl{ 379 display:block;407 display:block; 380 408 } 381 409 .point_confifrm dl{ 382 font-weight:bold;383 border-bottom:#CCC solid 1px;410 font-weight:bold; 411 border-bottom:#CCC solid 1px; 384 412 } 385 413 .point_confifrm dl:last-child{ 386 border-bottom:none;414 border-bottom:none; 387 415 } 388 416 .point_confifrm dt{ 389 width:60%;390 padding:10px 0 10px 10px;391 float:left;392 display:block;417 width:60%; 418 padding:10px 0 10px 10px; 419 float:left; 420 display:block; 393 421 } 394 422 .point_confifrm dd{ 395 width:30%;396 padding:10px 10px 10px 0;397 float:left;398 text-align:right;423 width:30%; 424 padding:10px 10px 10px 0; 425 float:right; 426 text-align:right; 399 427 } 400 428 .deliv_confirm dt{ 401 font-size:14px;402 font-weight:bold;403 padding:10px;404 background:#EEE;405 border-top:#FFF solid 1px;406 border-radius:7px 7px 0 0;407 -moz-border-radius:7px 7px 0 0;408 -webkit-border-radius:7px 7px 0 0;409 line-height:1.2;410 vertical-align:middle;411 position:relative;412 display:block;429 font-size:14px; 430 font-weight:bold; 431 padding:10px; 432 background:#EEE; 433 border-top:#FFF solid 1px; 434 border-radius:7px 7px 0 0; 435 -moz-border-radius:7px 7px 0 0; 436 -webkit-border-radius:7px 7px 0 0; 437 line-height:1.2; 438 vertical-align:middle; 439 position:relative; 440 display:block; 413 441 } 414 442 .deliv_confirm dd{ 415 font-size:12px; 416 padding:10px; 417 border-bottom:#CCC solid 1px; 418 display:block; 419 } 443 font-size:12px; 444 padding:10px; 445 border-bottom:#CCC solid 1px; 446 display:block; 447 line-height:1.3; 448 } 449 450 /* 420 451 .deliv_confirm dd:last-child{ 421 border-bottom:none; 422 } 452 border-bottom:none; 453 }*/ 454 455 .deliv_confirm dd p.deliv_name{ 456 margin-bottom:3px; 457 font-size:14px; 458 line-height:1.3; 459 } 460 423 461 .date_confirm li{ 424 padding-right:1em;425 display:inline;462 padding-right:1em; 463 display:inline; 426 464 } 427 465 /* ----------------------------------------------- … … 429 467 ----------------------------------------------- */ 430 468 dl.form_entry{ 431 width:100%;432 margin:0 0 15px 0;433 padding:0;434 border-top:#999 solid 1px;435 border-bottom:#999 solid 1px;436 position:relative;469 width:100%; 470 margin:0 0 15px 0; 471 padding:0; 472 border-top:#999 solid 1px; 473 border-bottom:#999 solid 1px; 474 position:relative; 437 475 } 438 476 dl.form_entry dt{ 439 font-weight:bold;440 padding:10px 12px 0;477 font-weight:bold; 478 padding:10px 12px 0; 441 479 } 442 480 dl.form_entry dd{ 443 padding:0 12px 10px; 444 border-bottom:#CCC solid 1px; 481 padding:0 12px 10px; 482 border-bottom:#CCC solid 1px; 483 line-height:1.2; 445 484 } 446 485 dl.form_entry dd:last-child{ 447 border-bottom:0;486 border-bottom:0; 448 487 } 449 488 dl.form_entry .selectdate{ 450 margin-top:12px;451 padding:5px 6px 5px 2px;452 font-size:12px;453 vertical-align:bottom;489 margin-top:12px; 490 padding:5px 6px 5px 4px; 491 font-size:12px; 492 vertical-align:bottom; 454 493 } 455 494 dl.form_entry li{ 456 margin-bottom:0.3em;457 vertical-align:middle;495 margin-bottom:0.3em; 496 vertical-align:middle; 458 497 } 459 498 /* ----------------------------------------------- … … 461 500 ----------------------------------------------- */ 462 501 .thankstext{ 463 font-size:16px; 464 color:#FF6633; 465 font-weight:bold; 466 padding:10px; 467 margin-bottom:10px; 468 } 502 font-size:16px; 503 color:#FF6633; 504 font-weight:bold; 505 padding:10px; 506 margin-bottom:10px; 507 } 508 #completetext p{ 509 line-height:1.3; 510 } 511 469 512 #completetext,.shopInformation{ 470 font-size:14px;471 padding:10px;472 clear:both;513 font-size:14px; 514 padding:10px; 515 clear:both; 473 516 } 474 517 #completetext p,.shopInformation p{ 475 margin-bottom:0.5em;518 margin-bottom:0.5em; 476 519 } 477 520 /* ----------------------------------------------- … … 479 522 ----------------------------------------------- */ 480 523 dl.form_info{ 481 width:100%;482 margin:10px 0 15px 0;483 padding:0;484 border-bottom:#999 solid 1px;485 position:relative;524 width:100%; 525 margin:10px 0 15px 0; 526 padding:0; 527 border-bottom:#999 solid 1px; 528 position:relative; 486 529 } 487 530 dl.form_info dt{ 488 font-weight:bold;489 padding:10px 10px 0;531 font-weight:bold; 532 padding:10px 10px 0; 490 533 } 491 534 dl.form_info dd{ 492 padding:0 10px 10px;493 border-bottom:#CCC solid 1px;535 padding:0 10px 10px; 536 border-bottom:#CCC solid 1px; 494 537 } 495 538 dl.form_info dd:last-child{ 496 border-bottom:0;539 border-bottom:0; 497 540 } 498 541 499 542 #maps{ 500 width:88%!important;501 margin:10px auto!important;543 width:88%!important; 544 margin:10px auto!important; 502 545 } 503 546 /* ----------------------------------------------- … … 505 548 ----------------------------------------------- */ 506 549 #kiyaku_text{ 507 padding:10px 20px;508 border-bottom:#999 solid 1px;509 border-top:#999 solid 1px;510 overflow: hidden;511 text-overflow: ellipsis;512 line-height:1.3;550 padding:10px 20px; 551 border-bottom:#999 solid 1px; 552 border-top:#999 solid 1px; 553 overflow: hidden; 554 text-overflow: ellipsis; 555 line-height:1.3; 513 556 } 514 557 /*------------------------------------------------- … … 516 559 ----------------------------------------*/ 517 560 #errorBox { 518 text-align:left; 519 padding:20px; 520 } 561 text-align:left; 562 padding:20px; 563 } 564 565 -
branches/version-2_11-dev/html/user_data/packages/sphone/css/import.css
r21081 r21093 9 9 @import url("./button.css"); 10 10 @import url("./jqm.css"); 11 -
branches/version-2_11-dev/html/user_data/packages/sphone/css/jqm.css
r21081 r21093 2 2 /* =================================================================== 3 3 CSS information 4 file name :jqm.css 4 5 style info :jqmテーマ 5 6 =================================================================== */ … … 7 8 /* F 8 9 -----------------------------------------------------------------------------------------------------------*/ 9 10 .ui-header-f{ 11 color:#fff; 12 text-shadow: 0px -1px 1px rgba(0,0,0,0.3)!important; 13 background:#494e57; 14 background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494e57 100%)!important; 15 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6D7481),color-stop(0.8, #505765),color-stop(1, #494e57))!important; 16 border-top:none 17 border-bottom:#74828B solid 1px!important; 18 } 10 19 .ui-bar-f { 11 border: 1px solid #ccc; 12 background: #bbb; 13 color: #333; 14 text-shadow: 0 1px 0 #eee; 15 background-image: -moz-linear-gradient(top, #6D7481, #494e57); 16 background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #6D7481), color-stop(1, ##494e57)); 17 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dddddd', EndColorStr='#bbbbbb')"; 20 color:#fff; 21 border: 1px solid #ccc; 22 background: #bbb; 23 color: #333; 24 text-shadow: 0 1px 0 #eee; 25 background-image: -moz-linear-gradient(top, 26 #6D7481, 27 #494e57); 28 background-image: -webkit-gradient(linear,left top,left bottom, 29 color-stop(0, #6D7481), 30 color-stop(1, ##494e57)); 31 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dddddd', EndColorStr='#bbbbbb')"; 18 32 } 19 33 .ui-bar-f, … … 22 36 .ui-bar-f textarea, 23 37 .ui-bar-f button { 24 font-family: Helvetica, Arial, sans-serif;38 font-family: Helvetica, Arial, sans-serif; 25 39 } 26 40 .ui-bar-f .ui-link-inherit { 27 color:#333;41 color: #333; 28 42 } 29 43 .ui-bar-f .ui-link { 30 color:#324E85;31 font-weight: bold;44 color: #324E85; 45 font-weight: bold; 32 46 } 33 47 .ui-body-f { 34 border: 1px solid#ccc;35 color:#333333;36 text-shadow: 0 1px 0 #fff;37 background:#ffffff;48 border: 1px solid #ccc; 49 color: #333333; 50 text-shadow: none; 51 background: #ffffff; 38 52 } 39 53 .ui-body-f, … … 42 56 .ui-body-f textarea, 43 57 .ui-body-f button { 44 font-family: Helvetica, Arial, sans-serif;58 font-family: Helvetica, Arial, sans-serif; 45 59 } 60 61 .ui-body-f input, 62 .ui-body-f select, 63 .ui-body-f textarea{ 64 border:#4C4C4C solid 1px; 65 } 66 46 67 .ui-body-f .ui-link-inherit { 47 color:#333333;68 color: #333333; 48 69 } 49 70 .ui-body-f .ui-link { 50 color:#324E85;51 font-weight: bold;71 color: #324E85; 72 font-weight: bold; 52 73 } 53 74 .ui-btn-up-f { 54 border: 1px solid #ccc; 55 background: #fff; 56 font-weight: bold; 57 color: #333; 58 text-decoration: none; 59 text-shadow: 0 1px 1px #fff; 75 border: 1px solid #ccc; 76 background: #eee; 77 font-weight: bold; 78 color: #444; 79 cursor: pointer; 80 text-shadow: 0 1px 1px #f6f6f6; 81 text-decoration: none; 82 background-image: -moz-linear-gradient(top, 83 #fefefe, 84 #eeeeee); 85 background-image: -webkit-gradient(linear,left top,left bottom, 86 color-stop(0, #fdfdfd), 87 color-stop(1, #eeeeee)); 88 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')"; 60 89 } 61 90 .ui-btn-up-f a.ui-link-inherit { 62 color:#333;91 color: #333; 63 92 } 64 93 .ui-btn-hover-f { 65 border: 1px solid #aaa; 66 background: #eeeeee; 67 font-weight: bold; 68 color: #222; 69 cursor: pointer; 70 text-shadow: 0 1px 1px #fff; 71 text-decoration: none; 72 background-image: -moz-linear-gradient(top, #fdfdfd, #eeeeee); 73 background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fdfdfd), color-stop(1, #eeeeee)); 74 -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')"; 94 border: 1px solid #bbb; 95 background: #dadada; 96 font-weight: bold; 97 color: #101010; 98 text-decoration: none; 99 text-shadow: 0 1px 1px #fff; 100 background-image: -moz-linear-gradient(top, 101 #ededed, 102 #dadada); 103 background-image: -webkit-gradient(linear,left top,left bottom, 104 color-stop(0, #ededed), 105 color-stop(1, #dadada)); 106 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededed', EndColorStr='#dadada')"; 75 107 } 76 108 .ui-btn-hover-f a.ui-link-inherit { 77 color:#222;109 color: #222; 78 110 } 79 111 .ui-btn-down-f { 80 border: 1px solid #aaaaaa; 81 background: #ffffff; 82 font-weight: bold; 83 color: #111; 84 text-shadow: 0 1px 1px #ffffff; 85 background-image: -moz-linear-gradient(top, #eeeeee, #ffffff); 86 background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #eeeeee), color-stop(1, #ffffff)); 87 -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#ffffff')"; 112 border: 1px solid #808080; 113 background: #fdfdfd; 114 font-weight: bold; 115 color: #111111; 116 text-shadow: 0 1px 1px #ffffff; 117 background-image: -moz-linear-gradient(top, 118 #eeeeee, 119 #fdfdfd); 120 background-image: -webkit-gradient(linear,left top,left bottom, 121 color-stop(0, #eeeeee), 122 color-stop(1, #fdfdfd)); 123 -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#fdfdfd')"; 88 124 } 89 125 .ui-btn-down-f a.ui-link-inherit { 90 border: 1px solid #808080; 91 background: #ced0d2; 92 font-weight: bold; 93 color: #111; 94 text-shadow: none; 95 background-image: -moz-linear-gradient(top, #cccccc, #eeeeee); 96 background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #cccccc), color-stop(1, #eeeeee)); 97 -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee')"; 126 border: 1px solid #808080; 127 background: #ced0d2; 128 font-weight: bold; 129 color: #111; 130 text-shadow: none; 131 background-image: -moz-linear-gradient(top, 132 #cccccc, 133 #eeeeee); 134 background-image: -webkit-gradient(linear,left top,left bottom, 135 color-stop(0, #cccccc), 136 color-stop(1, #eeeeee)); 137 -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee')"; 98 138 } 99 139 .ui-btn-up-f, 100 140 .ui-btn-hover-f, 101 141 .ui-btn-down-f { 102 font-family: Helvetica, Arial, sans-serif; 142 font-family: Helvetica, Arial, sans-serif; 143 } 144 .dialogbox .ui-body{ 145 border:#ccc solid 1px; 146 } 147 .ui-link:link { 148 color: #324E85; 149 150 } 151 .ui-link:visited { 152 color: #603E7D; 153 font-weight: bold; 103 154 } 104 155 105 .ui-link:link { 106 color: #324E85; 107 font-weight: bold; 108 } 109 .ui-link:visited { 110 color: #603E7D; 111 font-weight: bold; 112 } 156 -
branches/version-2_11-dev/html/user_data/packages/sphone/css/mypage.css
r21081 r21093 2 2 /* =================================================================== 3 3 CSS information 4 file name :mypage.css 4 5 style info :マイページ 5 6 =================================================================== */ … … 8 9 ----------------------------------------------- */ 9 10 #mypagecolumn{ 10 width:100%; 11 width:100%; 12 padding-bottom:35px; 11 13 } 12 14 #mypagecolumn h2.title{ 13 font-size:18px;14 border-bottom:#CCC solid 1px;15 -webkit-box-shadow:none;16 -moz-box-shadow:none;17 margin-bottom:0!important;15 font-size:18px; 16 border-bottom:#CCC solid 1px; 17 -webkit-box-shadow:none; 18 -moz-box-shadow:none; 19 margin-bottom:0!important; 18 20 } 19 21 h3.title_mypage{ 20 font-size:18px;21 line-height:1.2;22 margin-bottom:10px;23 padding:10px 10px 10px 25px;24 background:url(../img/common/bg_tit_bar.png) 10px 12px no-repeat;25 -webkit-box-shadow: 1px 5px 5px #E2E2E2;26 -moz-box-shadow: 1px 5px 5px #E2E2E2;22 font-size:18px; 23 line-height:1.2; 24 margin-bottom:10px; 25 padding:10px 10px 10px 25px; 26 background:url(../img/common/bg_tit_bar.png) 10px 12px no-repeat; 27 -webkit-box-shadow: 1px 5px 5px #E2E2E2; 28 -moz-box-shadow: 1px 5px 5px #E2E2E2; 27 29 } 28 30 /**イントロダクション*/ 29 31 #mypagecolumn .information{ 30 font-size:12px;31 padding:10px 10px 0 10px;32 border-bottom:0;33 font-weight:normal;32 font-size:12px; 33 padding:10px 10px 0 10px; 34 border-bottom:0; 35 font-weight:normal; 34 36 } 35 37 #mypagecolumn .information p:first-child{ 36 font-size:14px;37 font-weight:bold;38 margin-bottom:0;38 font-size:14px; 39 font-weight:bold; 40 margin-bottom:0; 39 41 } 40 42 /*----------------------------------------------- … … 42 44 ----------------------------------------------- */ 43 45 #mypage_nav{ 44 width:100%; 45 margin-bottom:10px; 46 background:#DAE0E5; 47 background: -moz-linear-gradient(center top, #EEF0F3 0%,#DAE0E5 90%,#DAE0E5 0%); 48 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEF0F3),color-stop(0.9, #DAE0E5),color-stop(0, #DAE0E5)); 49 margin-bottom:15px; 50 -webkit-box-shadow: 1px 5px 5px #C0C0C0; 51 -moz-box-shadow: 1px 5px 5px #C0C0C0; 46 width:100%; 47 background:#DAE0E5; 48 background: -moz-linear-gradient(center top, #FDFDFD 0%,#DAE0E5 90%,#DAE0E5 0%); 49 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(0.9, #DAE0E5),color-stop(0, #DAE0E5)); 50 margin-bottom:15px; 51 -webkit-box-shadow: 1px 5px 5px #C0C0C0; 52 -moz-box-shadow: 1px 5px 5px #C0C0C0; 52 53 } 53 54 #mypage_nav ul{ 54 width:auto;55 clear:both;56 margin:0 auto;55 width:auto; 56 clear:both; 57 margin:0 auto; 57 58 } 58 59 #mypage_nav ul li{ 59 float:left;60 text-align:center;61 border-left:#FFF solid 1px;62 border-right:#CCC solid 1px;63 border-bottom:#CCC solid 1px;64 white-space:nowrap;60 float:left; 61 text-align:center; 62 border-left:#FFF solid 1px; 63 border-right:#CCC solid 1px; 64 border-bottom:#CCC solid 1px; 65 white-space:nowrap; 65 66 } 66 67 #mypage_nav ul li a{ 67 color:#000;68 padding:9px 0 8px 0;69 display:block;70 text-shadow: 0px -1px 1px rgba(255,255,255,0.7);71 background-color:#DAE0E5;72 background: -moz-linear-gradient(center top, #EEF0F3 0%,#DAE0E5 90%,#DAE0E5 100%);73 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEF0F3),color-stop(0.9, #DAE0E5),color-stop(1, #DAE0E5));68 color:#000; 69 padding:9px 0 8px 0; 70 display:block; 71 text-shadow: 0px -1px 1px rgba(255,255,255,0.7); 72 background-color:#DAE0E5; 73 background: -moz-linear-gradient(center top, #EEF0F3 0%,#DAE0E5 90%,#DAE0E5 100%); 74 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEF0F3),color-stop(0.9, #DAE0E5),color-stop(1, #DAE0E5)); 74 75 } 75 76 #mypage_nav ul li a:hover{ 76 color:#FFF;77 text-shadow: 0px -1px 1px rgba(0,0,0,0.5);78 background:#5393c5;79 background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%);80 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2));77 color:#FFF; 78 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 79 background:#5393c5; 80 background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%); 81 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2)); 81 82 } 82 83 #mypage_nav ul li.nav_delivadd,#mypage_nav ul li.nav_change{ 83 width:49.7%;84 width:49.7%; 84 85 } 85 86 #mypage_nav ul li.nav_history,#mypage_nav ul li.nav_favorite,#mypage_nav ul li.nav_refusal{ 86 width:33%; 87 } 88 #mypage_nav li:first-child,#mypage_nav li:nth-child(3){ 89 border-left:none; 90 } 87 width:33%; 88 } 89 #mypage_nav li:first-child{ 90 border-left:none; 91 } 92 #mypage_nav li:nth-child(3){ 93 border-top:#FFF solid 1px; 94 border-left:none; 95 } 96 #mypage_nav li:nth-child(4),#mypage_nav li:nth-child(5){ 97 border-top:#FFF solid 1px; 98 } 99 91 100 #mypage_nav li:last-child,#mypage_nav li:nth-child(2){ 92 border-right:none;101 border-right:none; 93 102 } 94 103 … … 97 106 ----------------------------------------------- */ 98 107 #historyBox{ 99 padding:10px;100 background:#F7F5F0;101 border:#A9ABAD solid 1px;102 border-radius:7px;103 -moz-border-radius:7px;104 -webkit-border-radius:7px;105 margin-bottom:10px;108 padding:10px 10px 5px; 109 background:#F7F5F0; 110 border:#A9ABAD solid 1px; 111 border-radius:7px; 112 -moz-border-radius:7px; 113 -webkit-border-radius:7px; 114 margin-bottom:10px; 106 115 } 107 116 #historyBox p{ 108 font-size:12px;109 width:70%;110 display:inline;111 float:left;117 font-size:12px; 118 width:70%; 119 display:inline; 120 float:left; 112 121 } 113 122 #historyBox .btn_reorder{ 114 width:5em; 115 float:right; 116 padding:15px; 117 display:inline; 118 margin:0; 119 } 123 width:5em; 124 float:right; 125 padding:15px; 126 display:inline; 127 margin:0; 128 } 129 #mypagecolumn .cartinContents div{ 130 min-height:65px; 131 } 132 120 133 #mypagecolumn .cartinContents ul li.result{ 121 padding-top:0!important;122 padding-left:1em;134 padding-top:0!important; 135 padding-left:1em; 123 136 } 124 137 /*メール履歴詳細*/ 125 138 #news_area li{ 126 padding:10px;127 display:block;128 clear:both;129 line-height:1.3;130 background-color:#FEFEFE;131 background: -moz-linear-gradient(center top, #FEFEFE 0%,#eeeeee 100%);132 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #eeeeee));133 border-top:#FFF solid 1px;134 border-bottom:#CCC solid 1px;139 padding:10px; 140 display:block; 141 clear:both; 142 line-height:1.3; 143 background-color:#FEFEFE; 144 background: -moz-linear-gradient(center top, #FEFEFE 0%,#eeeeee 100%); 145 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #eeeeee)); 146 border-top:#FFF solid 1px; 147 border-bottom:#CCC solid 1px; 135 148 } 136 149 /* ----------------------------------------------- … … 138 151 ----------------------------------------------- */ 139 152 .favoriteBox{ 140 padding:10px;141 border-bottom:#CCC solid 1px;142 clear:both;143 position:relative;153 padding:10px; 154 border-bottom:#CCC solid 1px; 155 clear:both; 156 position:relative; 144 157 } 145 158 .favoriteBox:last-child{ 146 border-bottom:none;159 border-bottom:none; 147 160 } 148 161 .favoriteBox .photoL{ 149 width:80px;162 width:80px; 150 163 } 151 164 .favoriteContents{ 152 width:70%;153 float:right;154 display:block;155 position:relative;165 width:70%; 166 float:right; 167 display:block; 168 position:relative; 156 169 } 157 170 .favoriteContents .btn_delete{ 158 padding:1px;159 right:10px;160 float:right;161 position:absolute;162 top:0;171 padding:1px; 172 right:10px; 173 float:right; 174 position:absolute; 175 top:0; 163 176 } 164 177 … … 167 180 ----------------------------------------------- */ 168 181 #mypagecolumn .thankstext{ 169 padding:15px 10px 10px 10px;182 padding:15px 10px 10px 10px; 170 183 } 171 184 /* ----------------------------------------------- … … 173 186 ----------------------------------------------- */ 174 187 #mypagecolumn .btn_area_top{ 175 margin-top:10px;188 margin-top:10px; 176 189 } 177 190 .delivBox{ 178 padding:10px;179 border-bottom:#CCC solid 1px;180 clear:both;181 position:relative;191 padding:10px; 192 border-bottom:#CCC solid 1px; 193 clear:both; 194 position:relative; 182 195 } 183 196 .delivBox:last-child{ 184 border-bottom:none;197 border-bottom:none; 185 198 } 186 199 … … 189 202 ----------------------------------------------- */ 190 203 .refusetxt{ 191 padding:15px 10px 10px 10px;204 padding:15px 10px 10px 10px; 192 205 } 193 206 .btn_refuse{ 194 padding:0;195 margin:20px auto 0 auto; 207 padding:0; 208 margin:20px auto 0 auto; 196 209 } 197 210 .btn_refuse li{ 198 display:inline;199 float:left;200 } 201 .btn_refuse .btn{202 font-size:13px!important;203 display:inline;211 display:inline-block; 212 vertical-align:middle; 213 } 214 .btn_refuse a.btn,.btn_refuse input[type="submit"].btn{ 215 font-size:13px!important; 216 display:inline; 204 217 } 205 218 .btn_refuse li:first-child{ 206 margin-right:1.2em;207 } 219 margin-right:1em; 220 } -
branches/version-2_11-dev/html/user_data/packages/sphone/css/popup.css
r21081 r21093 2 2 /* =================================================================== 3 3 CSS information 4 file name :popup.css 4 5 style info :スライド/ポップアップ 5 6 =================================================================== */ … … 8 9 ----------------------------------------------- */ 9 10 #windowcolumn{ 10 background:#FFF;11 padding-bottom:30px;11 background:#FFF; 12 padding-bottom:30px; 12 13 } 13 14 #windowcolumn h2.title,#slidewindow h2.title{ 14 margin-bottom:0!important;15 margin-bottom:0!important; 15 16 } 16 17 #slidewindow .title_box,#windowcolumn .title_box{ 17 margin:0;18 padding:0!important;19 text-align:center;20 clear:both;18 margin:0; 19 padding:0!important; 20 text-align:center; 21 clear:both; 21 22 } 22 23 /**イントロダクション*/ 23 24 #windowcolumn .information{ 24 padding:15px 10px;25 border-bottom:none;25 padding:15px 10px; 26 border-bottom:none; 26 27 } 27 28 /* ----------------------------------------------- … … 29 30 ----------------------------------------------- */ 30 31 #slidewindow{ 31 background:#F0F0F1;32 background:#F0F0F1; 32 33 } 33 34 /*jqm追記*/ 34 35 .ui-btn-right{ 35 top:9px!important;36 vertical-align:middle;36 top:9px!important; 37 vertical-align:middle; 37 38 } 38 39 /* ----------------------------------------------- … … 40 41 ----------------------------------------------- */ 41 42 .login_area{ 42 background:#FFF;43 padding:10px 15px;44 text-align:center;45 -webkit-box-shadow: 1px 5px 5px #ccc;46 -moz-box-shadow: 1px 5px 5px #ccc;43 background:#FFF; 44 padding:10px 15px; 45 text-align:center; 46 -webkit-box-shadow: 1px 5px 5px #ccc; 47 -moz-box-shadow: 1px 5px 5px #ccc; 47 48 } 48 49 .login_area_btm{ 49 padding:15px 15px 50px 15px;50 padding:15px 15px 50px 15px; 50 51 } 51 52 .login_area_btm p:last-child{ 52 width:95%;53 margin:0 auto;54 line-height:1.3;53 width:95%; 54 margin:0 auto; 55 line-height:1.3; 55 56 } 56 57 .loginareaBox{ 57 padding:15px;58 margin: 0 auto 0 -10px;59 display:block;60 clear:both;61 border-radius:7px;62 -moz-border-radius:7px;63 -webkit-border-radius:7px;64 text-align:center;65 position:relative;58 padding:15px; 59 margin: 0 auto 0 -10px; 60 display:block; 61 clear:both; 62 border-radius:7px; 63 -moz-border-radius:7px; 64 -webkit-border-radius:7px; 65 text-align:center; 66 position:relative; 66 67 } 67 68 .mailtextBox{ 68 width:97%;69 margin:0;70 padding:10px;71 background: #fff;72 border-radius:7px 7px 0 0;73 -moz-border-radius:7px 7px 0 0;74 -webkit-border-radius:7px 7px 0 0;75 border:#A9ABAD solid 1px;76 border-bottom:none;77 display:block;78 -webkit-box-shadow:none;79 -moz-box-shadow:none;69 width:97%; 70 margin:0; 71 padding:10px; 72 background: #fff; 73 border-radius:7px 7px 0 0; 74 -moz-border-radius:7px 7px 0 0; 75 -webkit-border-radius:7px 7px 0 0; 76 border:#A9ABAD solid 1px; 77 border-bottom:none!important; 78 display:block; 79 -webkit-box-shadow:none; 80 -moz-box-shadow:none; 80 81 } 81 82 .passtextBox{ 82 width:97%;83 margin:0;84 padding:10px;85 background: #fff;86 border-radius:0 0 7px 7px;87 -moz-border-radius: 0 0 7px 7px;88 -webkit-border-radius: 0 0 7px 7px;89 border:#A9ABAD solid 1px;90 display:block;91 -webkit-box-shadow:none;92 -moz-box-shadow:none;83 width:97%; 84 margin:0; 85 padding:10px; 86 background: #fff; 87 border-radius:0 0 7px 7px; 88 -moz-border-radius: 0 0 7px 7px; 89 -webkit-border-radius: 0 0 7px 7px; 90 border:#A9ABAD solid 1px; 91 display:block; 92 -webkit-box-shadow:none; 93 -moz-box-shadow:none; 93 94 } 94 95 95 96 .navBox{ 96 width:95%;97 margin:10px auto;98 background:#FFF;99 border-radius:7px;100 -moz-border-radius:7px;101 -webkit-border-radius:7px;102 display:block;103 border:#A9ABAD solid 1px;97 width:95%; 98 margin:10px auto; 99 background:#FFF; 100 border-radius:7px; 101 -moz-border-radius:7px; 102 -webkit-border-radius:7px; 103 display:block; 104 border:#A9ABAD solid 1px; 104 105 } 105 106 .navBox li{ 106 width:100%;107 vertical-align:middle;108 background:url(../img/common/ico_arrowR.png) 95% center no-repeat;109 padding:0;110 display:block;111 border-bottom:#CCC solid 1px;107 width:100%; 108 vertical-align:middle; 109 background:url(../img/common/ico_arrowR.png) 95% center no-repeat; 110 padding:0; 111 display:block; 112 border-bottom:#CCC solid 1px; 112 113 } 113 114 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 114 .navBox li {115 background: url(../img/common/ico_arrowR2.png) 95% center no-repeat;116 -webkit-background-size: 10px 15px;117 background-size: 10px 15px;118 }115 .navBox li { 116 background: url(../img/common/ico_arrowR2.png) 95% center no-repeat; 117 -webkit-background-size: 10px 15px; 118 background-size: 10px 15px; 119 } 119 120 } 120 121 .navBox li a{ 121 padding:10px;122 display:block;123 cursor:pointer;122 padding:10px; 123 display:block; 124 cursor:pointer; 124 125 } 125 126 126 127 input[type="submit"].nav_nonmember{ 127 font-weight:bold; 128 background:none; 129 border:none; 130 padding:0; 131 display:block; 128 width:100%; 129 padding:5px 10px; 130 font-weight:bold; 131 background:none; 132 border:none; 133 display:block; 134 text-align:left; 132 135 } 133 136 .navBox li:last-child{ 134 border-bottom:none;137 border-bottom:none; 135 138 } 136 139 .navBox li a:link, .navBox li a:visited{ 137 color:#000;140 color:#000; 138 141 } 139 142 … … 143 146 ----------------------------------------------- */ 144 147 .window_area { 145 margin-bottom:10px;146 padding:5px 0;147 border-top:#999 solid 1px;148 border-bottom:#999 solid 1px;148 margin-bottom:10px; 149 padding:5px 0; 150 border-top:#999 solid 1px; 151 border-bottom:#999 solid 1px; 149 152 } 150 153 .window_area p{ 151 padding:5px 10px;152 line-height:1.3;154 padding:5px 10px; 155 line-height:1.3; 153 156 } 154 157 .window_area #completebox{ 155 font-size:16px;156 font-weight:bold;157 color:#CC0000;158 text-align:center;159 padding:20px 10px;158 font-size:16px; 159 font-weight:bold; 160 color:#CC0000; 161 text-align:center; 162 padding:20px 10px; 160 163 } 161 164 /* ----------------------------------------------- … … 163 166 ----------------------------------------------- */ 164 167 .view_detail{ 165 margin:10px0;166 min-height:150px;168 margin:0; 169 min-height:150px; 167 170 } 168 171 .view_detail dt{ 169 padding:10px 12px;170 border-bottom:#CCC solid 1px;172 padding:10px 12px; 173 border-bottom:#CCC solid 1px; 171 174 } 172 175 .view_detail dd{ 173 padding:10px 12px;176 padding:10px 12px; 174 177 } -
branches/version-2_11-dev/html/user_data/packages/sphone/css/products.css
r21081 r21093 2 2 /* =================================================================== 3 3 CSS information 4 5 file name :contents.css 4 6 style info :コンテンツ用(商品一覧/検索結果/商品詳細) 7 5 8 =================================================================== */ 6 9 /* ----------------------------------------------- … … 8 11 ----------------------------------------------- */ 9 12 .pagenumberarea{ 10 margin-top:10px;11 padding:10px 0;12 box-shadow:0 1px 1px 1px rgba(255,255,255,1) inset;13 -webkit-box-shadow:0 1px 1px 0 rgba(255,255,255,1) inset;14 -moz-box-shadow: 0 1px 1px rgba(255,255,255,1) inset;15 border-top: 1px solid #CCC;16 border-bottom: 1px solid #CCC;17 background:#EEE;18 display:block;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; 19 22 } 20 23 .pagenumberarea ul{ 21 width:95%;22 margin:0 auto;23 border:#A9ABAD solid 1px;24 border-radius: 5px;25 -webkit-border-radius: 5px;26 -moz-border-radius: 5px;27 display:block;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; 28 31 } 29 32 .pagenumberarea li { 30 color: #000; 31 font-size:16px; 32 font-weight:bold; 33 margin:0; 34 padding:0; 35 display:inline; 36 float: left; 37 width: 50%; 38 text-align:center; 39 color:#FFF; 40 background:#5393c5; 41 background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%); 42 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2)); 43 text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 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,.pagenumberarea li a:visited{ 49 color:#000; 44 50 } 45 51 .pagenumberarea li a { 46 color: #FFF;47 display: block;48 padding:5px 0;49 text-decoration: none;50 text-shadow: 1px 1px 1px rgba(255,255,255,1);52 color: #FFF; 53 display: block; 54 padding:5px 0; 55 text-decoration: none; 56 text-shadow: 1px 1px 1px rgba(255,255,255,1); 51 57 } 52 58 .pagenumberarea li.on_number{ 53 color: #FFF;54 display: block;55 padding:5px 0;56 text-shadow: 0px 1px 1px rgba(0,0,0,0.5);59 color: #FFF; 60 display: block; 61 padding:5px 0; 62 text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 57 63 } 58 64 .pagenumberarea li:first-child{ 59 border-radius: 5px 0 0 5px;60 -moz-border-radius: 5px 0 0 5px;61 -webkit-border-radius: 5px 0 0 5px;65 border-radius: 5px 0 0 5px; 66 -moz-border-radius: 5px 0 0 5px; 67 -webkit-border-radius: 5px 0 0 5px; 62 68 } 63 69 .pagenumberarea li:last-child{ 64 border-radius: 0 5px 5px 0;65 -moz-border-radius: 0 5px 5px 0;66 -webkit-border-radius: 0 5px 5px 0;70 border-radius: 0 5px 5px 0; 71 -moz-border-radius: 0 5px 5px 0; 72 -webkit-border-radius: 0 5px 5px 0; 67 73 } 68 74 .pagenumberarea li:first-child a{ 69 border-radius: 5px 0 0 5px;70 -moz-border-radius: 5px 0 0 5px;71 -webkit-border-radius: 5px 0 0 5px;72 border-right:#A9ABAD solid 1px;73 text-shadow: 1px 1px 1px rgba(255,255,255,1);74 background:#FDFDfD;75 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);76 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));75 border-radius: 5px 0 0 5px; 76 -moz-border-radius: 5px 0 0 5px; 77 -webkit-border-radius: 5px 0 0 5px; 78 border-right:#A9ABAD solid 1px; 79 text-shadow: 1px 1px 1px rgba(255,255,255,1); 80 background:#FDFDfD; 81 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 82 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 77 83 } 78 84 .pagenumberarea li:last-child a{ 79 border-radius: 0 5px 5px 0;80 -moz-border-radius: 0 5px 5px 0;81 -webkit-border-radius: 0 5px 5px 0;82 border-left:#FFF solid 1px;83 text-shadow: 1px 1px 1px rgba(255,255,255,1);84 background:#FDFDfD;85 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%);86 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3));87 box-shadow: 1px 0px 1px 1px rgba(255,255,255,1) inset;88 -webkit-box-shadow: 1px 0px 1px 0px rgba(255,255,255,1) inset;89 -moz-box-shadow: 1px 1px 1px 0px rgba(255,255,255,1) inset;90 } 91 .pagenumberarea li :first-child a:hover,.pagenumberarea li:last-child a:hover{92 color:#FFF;93 text-shadow: 0px 1px 1px rgba(0,0,0,0.5);94 background:#5393c5;95 background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%);96 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2));85 border-radius: 0 5px 5px 0; 86 -moz-border-radius: 0 5px 5px 0; 87 -webkit-border-radius: 0 5px 5px 0; 88 border-left:#FFF solid 1px; 89 text-shadow: 1px 1px 1px rgba(255,255,255,1); 90 background:#FDFDfD; 91 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 92 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 93 box-shadow: 1px 0px 1px 1px rgba(255,255,255,1) inset; 94 -webkit-box-shadow: 1px 0px 1px 0px rgba(255,255,255,1) inset; 95 -moz-box-shadow: 1px 1px 1px 0px rgba(255,255,255,1) inset; 96 } 97 .pagenumberarea li.on_number{ 98 color:#FFF; 99 text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 100 background:#5393c5; 101 background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%); 102 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2)); 97 103 } 98 104 ul.status_icon { 99 clear:both;105 clear:both; 100 106 } 101 107 ul.status_icon li{ 102 color:#FFF;103 background:#9AAABD;104 display:inline;105 float:left;106 margin-right :5px;107 margin-bottom:2px;108 padding:2px 5px;109 font-size:11px;110 text-shadow:none;108 color:#FFF; 109 background:#9AAABD; 110 display:inline; 111 float:left; 112 margin-right :5px; 113 margin-bottom:2px; 114 padding:2px 5px; 115 font-size:11px; 116 text-shadow:none; 111 117 } 112 118 /* ----------------------------------------------- … … 114 120 ----------------------------------------------- */ 115 121 #product_list{ 116 padding-bottom:35px;122 padding-bottom:35px; 117 123 } 118 124 … … 120 126 ----------------------------------------------- */ 121 127 .list_area { 122 margin: 0;123 padding:10px 5px 15px 10px;124 background-color:#FEFEFE;125 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #eeeeee));126 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #eeeeee));127 border-top:#FFF solid 1px;128 border-bottom:#CCC solid 1px;129 display:block;130 clear:both;131 position:relative;132 cursor:pointer;128 margin: 0; 129 padding:10px 5px 15px 10px; 130 background-color:#FEFEFE; 131 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE)); 132 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE)); 133 border-top:#FFF solid 1px; 134 border-bottom:#CCC solid 1px; 135 display:block; 136 clear:both; 137 position:relative; 138 cursor:pointer; 133 139 } 134 140 .list_area ul.status_icon{ 135 margin-bottom:5px;141 margin-bottom:5px; 136 142 } 137 143 .listphoto{ 138 margin:0 10px 10px 0;139 float:left;140 clear:left;144 margin:0 10px 10px 0; 145 float:left; 146 clear:left; 141 147 } 142 148 .listrightblock { 143 width:67%; 144 float:right; 145 padding-right:10px; 146 background:url(../img/common/ico_arrowR.png) right center no-repeat; 147 } 148 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 149 .listrightblock { 150 background: url(../img/common/ico_arrowR2.png) right center no-repeat; 151 -webkit-background-size: 10px 15px; 152 background-size: 10px 15px; 153 } 149 width:67%; 150 float:right; 151 padding-right:10px; 154 152 } 155 153 .listrightblock h3{ 156 font-size:15px;157 clear:both;154 font-size:15px; 155 clear:both; 158 156 } 159 157 .listrightblock .listcomment{ 160 line-height:1.4;158 line-height:1.4; 161 159 } 162 160 … … 165 163 ----------------------------------------------- */ 166 164 #product_detail{ 167 padding-bottom:35px;165 padding-bottom:35px; 168 166 } 169 167 /*商品情報*/ 170 168 #detailarea { 171 background:#F0F0F1;172 padding:20px 10px 35px 10px;169 background:#F0F0F1; 170 padding:20px 10px 35px 10px; 173 171 } 174 172 #detailrightblock{ 175 margin-top:25px;176 padding:0;177 background:#FFF;178 border:#CCC solid 1px;179 border-radius:7px;180 -moz-border-radius:7px;181 -webkit-border-radius:7px;173 margin-top:25px; 174 padding:0; 175 background:#FFF; 176 border:#CCC solid 1px; 177 border-radius:7px; 178 -moz-border-radius:7px; 179 -webkit-border-radius:7px; 182 180 } 183 181 #detailrightblock div:after { 184 content: ".";185 display: block;186 clear: both;187 height: 0;188 visibility: hidden;182 content: "."; 183 display: block; 184 clear: both; 185 height: 0; 186 visibility: hidden; 189 187 } 190 188 #detailrightblock div{ 191 border-bottom:#CCC solid 1px;189 border-bottom:#CCC solid 1px; 192 190 } 193 191 #detailrightblock div:last-child{ 194 border-bottom:none;195 border-radius:0 0 7px 7px;196 -moz-border-radius: 0 0 7px 7px;197 -webkit-border-radius: 0 0 7px 7px;192 border-bottom:none; 193 border-radius:0 0 7px 7px; 194 -moz-border-radius: 0 0 7px 7px; 195 -webkit-border-radius: 0 0 7px 7px; 198 196 } 199 197 /*ステータスアイコン*/ 200 198 #detailrightblock .status_icon{ 201 padding:10px 12px;202 border-bottom:#CCC solid 1px;199 padding:10px 12px; 200 border-bottom:#CCC solid 1px; 203 201 } 204 202 /*商品情報(テキストなど)*/ 205 203 #detailrightblock .product_detail{ 206 padding:12px;207 border-bottom:#CCC solid 1px;204 padding:12px; 205 border-bottom:#CCC solid 1px; 208 206 } 209 207 #detailrightblock h3{ 210 font-size:14px;211 clear:both;208 font-size:14px; 209 clear:both; 212 210 } 213 211 #detailrightblock .price{ 214 font-size:14px; 212 font-size:14px; 213 } 214 #detailrightblock .normal_price{ 215 font-size:11px; 215 216 } 216 217 .relative_cat{ 217 font-size:12px;218 margin-bottom:10px;218 font-size:12px; 219 margin-bottom:10px; 219 220 } 220 221 221 222 /*商品情報(規格部分)*/ 222 223 .cart_area{ 223 padding:12px;224 padding:12px; 224 225 } 225 226 .cart_area dl { 226 margin: 0;227 padding:0;227 margin: 0; 228 padding:0; 228 229 } 229 230 .cart_area dt { 230 margin: 0;231 font-weight: bold;232 line-height: 1.3;231 margin: 0; 232 font-weight: bold; 233 line-height: 1.3; 233 234 } 234 235 .cart_area dd { 235 padding:0;236 clear:both;237 padding-bottom:5px;236 padding:0; 237 clear:both; 238 padding-bottom:5px; 238 239 } 239 240 .cart_area dd:last-child { 240 padding-bottom:0;241 padding-bottom:0; 241 242 } 242 243 243 244 /*商品情報(数量)*/ 244 245 .cartin_btn{ 245 padding:15px;246 background:#F1F0E7;247 border-top:#FFF solid 1px;246 padding:15px; 247 background:#F1F0E7; 248 border-top:#FFF solid 1px; 248 249 } 249 250 .cartin_btn dl{ 250 width:40%;251 float:left;252 clear:left;251 width:40%; 252 float:left; 253 clear:left; 253 254 } 254 255 .cartin_btn dt{ 255 width:2em; 256 float:left; 257 padding:5px; 258 vertical-align:bottom; 259 line-height:1.1; 256 width:2em; 257 float:left; 258 padding:15px 5px 5px; 259 vertical-align:bottom; 260 line-height:1.1; 261 font-weight:bold; 260 262 } 261 263 .cartin_btn dd{ 262 width:3.2em;263 display:inline;264 float:left;264 width:3.2em; 265 display:inline; 266 float:left; 265 267 } 266 268 .detail_quantity dd .quantitybox{ 267 width:3em;269 width:3em; 268 270 } 269 271 .cartbtn_default{ 270 width:54%;271 float:right;272 clear:right;272 width:54%; 273 float:right; 274 clear:right; 273 275 } 274 276 275 277 /*お気に入り*/ 276 278 .btn_favorite{ 277 padding:10px 30px;278 background:#F1F0E7;279 padding:10px 15px; 280 background:#F1F0E7; 279 281 } 280 282 /*サブエリア*/ 281 283 .subarea{ 282 padding:10px;283 border-bottom:#CCC solid 1px;284 clear:both;284 padding:10px; 285 border-bottom:#CCC solid 1px; 286 clear:both; 285 287 } 286 288 .subarea h3{ 287 margin-bottom:10px;288 padding:5px 0;289 border-bottom:#CCC solid 1px;290 clear:both;289 margin-bottom:10px; 290 padding:5px 0; 291 border-bottom:#CCC solid 1px; 292 clear:both; 291 293 } 292 294 .subphotoimg{ 293 margin-left:10px;294 float:right;295 clear:right;295 margin-left:10px; 296 float:right; 297 clear:right; 296 298 } 297 299 #sub_area div:last-child{ 298 border-bottom:none;300 border-bottom:none; 299 301 } 300 302 /*商品詳細メイン画像スライド*/ 301 303 #detailphotoblock { 302 width: 100%;303 background-color: #ffffff;304 text-align:center;305 -webkit-box-shadow: 1px 5px 5px #ccc;306 -moz-box-shadow: 1px 5px 5px #ccc;307 position:relative;304 width: 100%; 305 background-color: #ffffff; 306 text-align:center; 307 -webkit-box-shadow: 1px 5px 5px #ccc; 308 -moz-box-shadow: 1px 5px 5px #ccc; 309 position:relative; 308 310 } 309 311 #detailphotoblock div.moveWrap { 310 width:200px;311 height:auto;312 margin:0 auto;313 position:relative;314 overflow:hidden;315 -webkit-box-sizing:border-box;312 width:200px; 313 height:auto; 314 margin:0 auto; 315 position:relative; 316 overflow:hidden; 317 -webkit-box-sizing:border-box; 316 318 } 317 319 #detailphotoblock ul.moveWrapBG { 318 width:200px; 319 height:auto; 320 visibility:hidden; 321 display:inline-block; 322 position:relative; 323 -webkit-box-sizing:border-box; 324 margin:0 auto; 325 padding:0; 320 width:200px; 321 height:auto; 322 visibility:hidden; 323 display:inline-block; 324 position:relative; 325 -webkit-box-sizing:border-box; 326 margin:0 auto; 327 padding:0; 328 } 329 #detailphotoblock li{ 330 width:200px; 326 331 } 327 332 #detailphotoblock div.slideMask { 328 position:absolute;329 top:0;330 left:0;331 /*border:4px #FFF solid;*/332 -webkit-box-sizing:border-box;333 margin-right:0!important;333 position:absolute; 334 top:0; 335 left:0; 336 /*border:4px #FFF solid;*/ 337 -webkit-box-sizing:border-box; 338 margin-right:0!important; 334 339 } 335 340 #detailphotoblock div.moveWrap>ul.move { 336 margin:0;337 padding:0;338 position:relative;339 left:0;340 top:0;341 list-style:none;342 width:2000px;343 -webkit-transition:all 0.6s ease-in-out;344 -webkit-transform:translate3d(0,0,0);345 -webkit-transition-duration: 400ms;346 -webkit-transition-property: -webkit-transform;347 margin:0;348 padding:0;349 display:none;341 margin:0; 342 padding:0; 343 position:relative; 344 left:0; 345 top:0; 346 list-style:none; 347 width:2000px; 348 -webkit-transition:all 0.6s ease-in-out; 349 -webkit-transform:translate3d(0,0,0); 350 -webkit-transition-duration: 400ms; 351 -webkit-transition-property: -webkit-transform; 352 margin:0; 353 padding:0; 354 display:none; 350 355 } 351 356 #detailphotoblock div.moveWrap>ul.move li.slideUnit { 352 margin:0px;353 padding:0;354 float:left;355 list-style:none;356 text-align:center;357 -webkit-box-sizing:border-box;357 margin:0px; 358 padding:0; 359 float:left; 360 list-style:none; 361 text-align:center; 362 -webkit-box-sizing:border-box; 358 363 } 359 364 #detailphotoblock li.slideUnit>div { 360 padding:0px;361 display:inline-block;362 vertical-align:middle;363 text-align:center;364 -webkit-box-sizing:border-box;365 padding:0px; 366 display:inline-block; 367 vertical-align:middle; 368 text-align:center; 369 -webkit-box-sizing:border-box; 365 370 } 366 371 #detailphotoblock div.flickSlideBottom { 367 width:100%;368 margin-top:5px;372 width:100%; 373 margin-top:5px; 369 374 } 370 375 #detailphotoblock div.flickSlideBottom div.bottomLeft,#detailphotoblock div.flickSlideBottom div.bottomRight { 371 padding:0 10px;372 display:table-cell;373 vertical-align:middle;376 padding:0 10px; 377 display:table-cell; 378 vertical-align:middle; 374 379 } 375 380 #detailphotoblock div.flickSlideBottom div.bottomRight { 376 font-size:24px;377 font-weight: bold;378 color:#7F7F7F;379 background-color:transparent;380 right:5px;381 top:100px;382 position:absolute;381 font-size:24px; 382 font-weight: bold; 383 color:#7F7F7F; 384 background-color:transparent; 385 right:5px; 386 top:100px; 387 position:absolute; 383 388 } 384 389 #detailphotoblock div.flickSlideBottom div.bottomLeft { 385 font-size:24px;386 font-weight: bold;387 color:#7F7F7F;388 background-color:transparent;389 left:5px;390 top:100px;391 position:absolute;390 font-size:24px; 391 font-weight: bold; 392 color:#7F7F7F; 393 background-color:transparent; 394 left:5px; 395 top:100px; 396 position:absolute; 392 397 } 393 398 #detailphotoblock div.flickSlideBottom div.bottomLeft:after { 394 font-size:12px;395 padding:5px;396 text-align:left;397 display:table-cell;399 font-size:12px; 400 padding:5px; 401 text-align:left; 402 display:table-cell; 398 403 } 399 404 #detailphotoblock div.flickSlideBottom div.bottomLeft:before { 400 padding:5px;401 text-align:left;402 display:table-cell;405 padding:5px; 406 text-align:left; 407 display:table-cell; 403 408 } 404 409 #detailphotoblock div.flickSlideBottom div.bottomRight:before { 405 font-size:12px;406 padding:5px;407 text-align:right;408 display:table-cell;410 font-size:12px; 411 padding:5px; 412 text-align:right; 413 display:table-cell; 409 414 } 410 415 #detailphotoblock div.flickSlideBottom div.bottomRight:after { 411 padding:5px;412 text-align:right;413 display:table-cell;416 padding:5px; 417 text-align:right; 418 display:table-cell; 414 419 } 415 420 #detailphotoblock div.flickSlideBottom ul.slidePager { 416 display:block;417 width:auto;418 text-align:center;419 margin:0 auto;;420 padding:0;421 display:block; 422 width:auto; 423 text-align:center; 424 margin:0 auto;; 425 padding:0; 421 426 } 422 427 #detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer { 423 font-size:11px;424 width:6px;425 height:6px;426 margin:12px 6px 6px 6px;427 display:inline-block;428 background-color:#CCC;429 border-radius: 6px;430 -webkit-border-radius: 6px;431 -moz-border-radius: 6px;428 font-size:11px; 429 width:6px; 430 height:6px; 431 margin:12px 6px 6px 6px; 432 display:inline-block; 433 background-color:#CCC; 434 border-radius: 6px; 435 -webkit-border-radius: 6px; 436 -moz-border-radius: 6px; 432 437 } 433 438 #detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer.active { 434 background-color:#333;439 background-color:#333; 435 440 } 436 441 437 442 /*その他オススメ商品スライド*/ 438 443 #product_detail .title_box_sub:last-child{ 439 margin-top:20px;444 margin-top:20px; 440 445 } 441 446 #whobought_area{ 442 width:100%;443 margin-top:30px;444 margin-bottom:15px;445 clear:both;446 position:relative;447 width:100%; 448 margin-top:30px; 449 margin-bottom:15px; 450 clear:both; 451 position:relative; 447 452 } 448 453 #whobought_area h3{ 449 clear:both; 454 clear:both; 455 line-height:1.2; 456 } 457 /*liの長さ追加*/ 458 #whobought_area li{ 459 width:80px; 450 460 } 451 461 #whobought_area li img{ 452 clear:both; 462 margin-bottom:5px; 463 clear:both; 453 464 } 454 465 #whobought_area .sale_price{ 455 clear:both;456 float:right;457 text-align:right;466 clear:both; 467 float:right; 468 text-align:right; 458 469 } 459 470 #whobought_area div.moveWrap { 460 width:80%;461 height:auto;462 position:relative;463 margin:0 auto;464 overflow:hidden;465 -webkit-box-sizing:border-box;471 width:80%; 472 height:auto; 473 position:relative; 474 margin:0 auto; 475 overflow:hidden; 476 -webkit-box-sizing:border-box; 466 477 } 467 478 #whobought_area ul.moveWrapBG { 468 width:auto;469 height:auto;470 display:inline-block;471 position:relative;472 visibility:hidden;473 -webkit-box-sizing:border-box;474 margin:0;475 padding:0;479 width:auto; 480 height:auto; 481 display:inline-block; 482 position:relative; 483 visibility:hidden; 484 -webkit-box-sizing:border-box; 485 margin:0; 486 padding:0; 476 487 } 477 488 #whobought_area div.slideMask { 478 position:absolute;479 top:0;480 left:0;481 border:4px #FFF solid;482 -webkit-box-sizing:border-box;483 margin-right:1px;489 position:absolute; 490 top:0; 491 left:0; 492 border:4px #FFF solid; 493 -webkit-box-sizing:border-box; 494 margin-right:1px; 484 495 } 485 496 #whobought_area div.moveWrap>ul.move { 486 width:600px;487 margin:0;488 padding:0;489 position:relative;490 left:0;491 top:0;492 list-style:none;493 -webkit-transition:all 0.6s ease-in-out;494 -webkit-transform:translate3d(0,0,0);495 /*-webkit-transition-duration: 400ms;496 -webkit-transition-property: -webkit-transform;497 */498 margin:0;499 padding:0;500 display:none;497 width:600px; 498 margin:0; 499 padding:0; 500 position:relative; 501 left:0; 502 top:0; 503 list-style:none; 504 -webkit-transition:all 0.6s ease-in-out; 505 -webkit-transform:translate3d(0,0,0); 506 /*-webkit-transition-duration: 400ms; 507 -webkit-transition-property: -webkit-transform; 508 */ 509 margin:0; 510 padding:0; 511 display:none; 501 512 } 502 513 #whobought_area div.moveWrap>ul.move li.slideUnit { 503 width:85px!important;504 float:left;505 display:inline;506 list-style:none;507 padding:4px 8px 4px 0;508 margin-right:0px;509 -webkit-box-sizing:border-box;514 width:85px!important; 515 float:left; 516 display:inline; 517 list-style:none; 518 padding:4px 8px 4px 0; 519 margin-right:0px; 520 -webkit-box-sizing:border-box; 510 521 } 511 522 #whobought_area li.slideUnit>div { 512 padding:4px;513 display:inline;514 vertical-align:middle;515 -webkit-box-sizing:border-box;523 padding:4px; 524 display:inline; 525 vertical-align:middle; 526 -webkit-box-sizing:border-box; 516 527 } 517 528 #whobought_area div.flickSlideBottom { 518 width:100%;519 margin-top:5px;529 width:100%; 530 margin-top:5px; 520 531 } 521 532 #whobought_area div.flickSlideBottom div.bottomLeft,#whobought_area div.flickSlideBottom div.bottomRight { 522 padding:0 10px;523 display:table-cell;524 vertical-align:middle;533 padding:0 10px; 534 display:table-cell; 535 vertical-align:middle; 525 536 } 526 537 #whobought_area div.flickSlideBottom div.bottomRight { 527 font-size:16px;528 font-weight: bold;529 color:#7F7F7F;530 background-color:transparent;531 right:0;532 top:80px;533 position:absolute;538 font-size:16px; 539 font-weight: bold; 540 color:#7F7F7F; 541 background-color:transparent; 542 right:0; 543 top:80px; 544 position:absolute; 534 545 } 535 546 #whobought_area div.flickSlideBottom div.bottomLeft { 536 font-size:16px;537 font-weight: bold;538 color:#7F7F7F;539 background-color:transparent;540 left:0;541 top:80px;542 position:absolute;547 font-size:16px; 548 font-weight: bold; 549 color:#7F7F7F; 550 background-color:transparent; 551 left:0; 552 top:80px; 553 position:absolute; 543 554 } 544 555 #whobought_area div.flickSlideBottom div.bottomLeft:after { 545 font-size:10px;546 padding:0;547 text-align:left;548 display:table-cell;556 font-size:10px; 557 padding:0; 558 text-align:left; 559 display:table-cell; 549 560 } 550 561 #whobought_area div.flickSlideBottom div.bottomLeft:before { 551 padding:0;552 text-align:left;553 display:table-cell;562 padding:0; 563 text-align:left; 564 display:table-cell; 554 565 } 555 566 #whobought_area div.flickSlideBottom div.bottomRight:before { 556 font-size:10px;557 padding:0;558 text-align:right;559 display:table-cell;567 font-size:10px; 568 padding:0; 569 text-align:right; 570 display:table-cell; 560 571 } 561 572 #whobought_area div.flickSlideBottom div.bottomRight:after { 562 padding:0;563 text-align:right;564 display:table-cell;573 padding:0; 574 text-align:right; 575 display:table-cell; 565 576 } 566 577 #whobought_area div.flickSlideBottom ul.slidePager { 567 display:block;568 width:auto;569 text-align:center;570 margin:0 auto;571 padding:0;578 display:block; 579 width:auto; 580 text-align:center; 581 margin:0 auto; 582 padding:0; 572 583 } 573 584 #whobought_area div.flickSlideBottom ul.slidePager li.slidePagerPointer { 574 display:none; 575 } 585 display:none; 586 } 587 -
branches/version-2_11-dev/html/user_data/packages/sphone/css/set.css
r21081 r21093 2 2 html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, 3 3 header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav { 4 margin: 0;5 padding: 0;6 /*font-size: 100%;*/4 margin: 0; 5 padding: 0; 6 /*font-size: 100%;*/ 7 7 } 8 8 body { 9 line-height: 1.0;10 -webkit-text-size-adjust: none;9 line-height: 1.0; 10 -webkit-text-size-adjust: none; 11 11 } 12 12 article,aside,canvas,details,figcaption,figure, 13 13 footer,header,hgroup,menu,nav,section,summary { 14 display:block;14 display:block; 15 15 } 16 16 address,caption,cite,code,dfn,em,strong,th,var { 17 font-style: normal;17 font-style: normal; 18 18 } 19 19 img{ 20 border: 0;21 vertical-align: bottom;20 border: 0; 21 vertical-align: bottom; 22 22 } 23 23 img a{ 24 border:0;25 text-decoration:none;24 border:0; 25 text-decoration:none; 26 26 } 27 27 ul, ol { 28 list-style: none;28 list-style: none; 29 29 } 30 30 a { 31 margin:0;32 padding:0;33 font-size:100%;34 vertical-align:baseline;35 background:transparent;31 margin:0; 32 padding:0; 33 font-size:100%; 34 vertical-align:baseline; 35 background:transparent; 36 36 } 37 37 table { 38 border-collapse:collapse;39 border-spacing:0;38 border-collapse:collapse; 39 border-spacing:0; 40 40 } 41 41 input, select { 42 vertical-align:middle;43 font-size:100%;42 vertical-align:middle; 43 font-size:100%; 44 44 } 45 45 46 46 hr { 47 display:block;48 height:1px;49 border:0;50 border-top:1px solid #cccccc;51 margin:1em 0;52 padding:0;47 display:block; 48 height:1px; 49 border:0; 50 border-top:1px solid #cccccc; 51 margin:1em 0; 52 padding:0; 53 53 } 54
Note: See TracChangeset
for help on using the changeset viewer.
