Changeset 21052


Ignore:
Timestamp:
2011/07/27 13:53:29 (9 years ago)
Author:
468
Message:

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

Location:
branches/version-2_11-dev/html/user_data/packages/sphone/css
Files:
9 added
3 edited

Legend:

Unmodified
Added
Removed
  • branches/version-2_11-dev/html/user_data/packages/sphone/css/button.css

    r20764 r21052  
    11@charset "utf-8"; 
     2/* =================================================================== 
     3CSS information 
    24 
    3 /* スマートフォン用グラデーションボタン 
    4 ----------------------------------------------- */ 
    5 /*.spbtn { 
    6 display: block; 
    7 margin: 0.5em auto 0.3em; 
    8 padding: 0.4em 0; 
    9 font: bold large helvetica; 
    10 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    11 vertical-align: middle; 
    12 text-align:center; 
    13 text-decoration: none; 
    14 color: #ffffff; 
    15 background-color: #666666; 
    16 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    17 border: solid 2px #666666; 
    18 -webkit-border-radius: 8px; 
    19 -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); 
    20 }*/ 
    21 .spbtn:before { 
    22 content: ""; 
    23 display: block; 
    24 height: 0; 
    25 clear: both; 
    26 visibility: hidden; 
    27 } 
    28 /*a.spbtn { 
    29 width: 79%; 
    30 max-width: 236px; 
    31 }*/ 
    32 input.spbtn { 
    33 width: 100%; 
    34 } 
     5file name  :button.css 
     6style info :ボタン用 
    357 
    36 /* ボタン大(汎用) 
    37 ----------------------------------------------- */ 
    38 .spbtn-normal { 
    39 color: #ffffff; 
    40 border: solid 2px #666666; 
    41 background-color: #666666; 
    42 /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));*/ 
     8=================================================================== */ 
     9.btn_area{ 
     10padding:10px; 
     11clear:both; 
     12} 
     13ul.btn_btm{ 
     14clear:both; 
     15} 
     16.btn_area li,ul.btn_btm li{ 
     17margin-bottom:12px; 
     18} 
     19.btn_area_top{ 
     20box-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; 
     23border-top: 1px solid #CCC; 
     24border-bottom: 1px solid #CCC; 
     25background:#EEE; 
     26display:block; 
     27clear:both; 
     28margin-bottom:10px; 
     29padding:10px 0; 
     30} 
     31/*----------------------------------------------- 
     32ボタン(進む系ボタン:グリーン) 
     33----------------------------------------------- */ 
     34a.btn,a.btn:link,a.btn:visited,a.btn:hover{ 
     35color:#FFF; 
     36font-size: 16px; 
     37font-weight:bold; 
     38text-decoration: none; 
     39text-align:center; 
     40padding: 10px; 
     41text-shadow: 0 -1px 1px rgba(0,0,0,1); 
     42border: 1px solid #A9ABAD; 
     43border-radius: 5px; 
     44-moz-border-radius: 5px; 
     45-webkit-border-radius: 5px; 
     46display:block; 
     47background:#B4DF34; 
     48background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%); 
     49background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222)); 
     50cursor:pointer; 
     51-webkit-transition:opacity 0.5s ease-in; 
     52-moz-transition:opacity 0.5s ease-in; 
     53} 
     54input[type="submit"].btn{ 
     55width:100%; 
     56color:#FFF; 
     57font-size: 16px; 
     58font-weight:bold; 
     59text-decoration: none; 
     60text-align:center; 
     61padding: 10px; 
     62text-shadow: 0 -1px 1px rgba(0,0,0,1); 
     63border: 1px solid #A9ABAD; 
     64border-radius: 5px; 
     65-moz-border-radius: 5px; 
     66-webkit-border-radius: 5px; 
     67display:block; 
     68background:#B4DF34; 
     69background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%); 
     70background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222)); 
     71cursor:pointer; 
     72-webkit-transition:opacity 0.5s ease-in; 
     73-moz-transition:opacity 0.5s ease-in; 
     74} 
     75/*----------------------------------------------- 
     76ボタン(戻る系ボタン:グレー) 
     77----------------------------------------------- */ 
     78a.btn_back,a.btn_back:link,a.btn_back:visited,a.btn_back:hover { 
     79color:#FFF; 
     80font-size: 16px; 
     81font-weight:bold; 
     82text-decoration: none; 
     83text-align:center; 
     84text-shadow: 0 -1px 1px rgba(0,0,0,1); 
     85border: 1px solid #A9ABAD; 
     86border-radius: 5px; 
     87-moz-border-radius: 5px; 
     88-webkit-border-radius: 5px; 
     89display:block; 
     90padding:5px 0; 
     91background:#999999; 
     92background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%); 
     93background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999)); 
     94} 
     95input[type="submit"].btn_back{ 
     96color:#FFF; 
     97font-size: 16px; 
     98font-weight:bold; 
     99text-decoration: none; 
     100text-align:center; 
     101text-shadow: 0 -1px 1px rgba(0,0,0,1); 
     102border: 1px solid #A9ABAD; 
     103border-radius: 5px; 
     104-moz-border-radius: 5px; 
     105-webkit-border-radius: 5px; 
     106display:block; 
     107padding:5px 0; 
     108background:#999999; 
     109background: -moz-linear-gradient(center top, #C5C5C5 0%,#999999 100%); 
     110background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5C5C5),color-stop(1, #999999)); 
     111} 
     112/*----------------------------------------------- 
     113ボタン(サブ系ボタン:ライトグレー) 
     114----------------------------------------------- */ 
     115.btn_sub,a.btn_sub,a.btn_sub:link,a.btn_sub:visited,a.btn_sub:hover { 
     116color:#000; 
     117font-size: 16px; 
     118padding:5px 0; 
     119font-weight:bold; 
     120text-decoration: none; 
     121text-align:center; 
     122text-shadow: 0 -1px 1px rgba(0,0,0,0.3); 
     123border: 1px solid #A9ABAD; 
     124border-radius: 5px; 
     125-moz-border-radius: 5px; 
     126-webkit-border-radius: 5px; 
     127display:block; 
     128background:#FDFDfD; 
     129background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 
     130background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 
     131} 
     132input[type="submit"].btn_sub{ 
     133color:#000; 
     134font-size: 16px; 
     135padding:5px 0; 
     136font-weight:bold; 
     137text-decoration: none; 
     138text-align:center; 
     139text-shadow: 0 -1px 1px rgba(0,0,0,0.3); 
     140border: 1px solid #A9ABAD; 
     141border-radius: 5px; 
     142-moz-border-radius: 5px; 
     143-webkit-border-radius: 5px; 
     144display:block; 
     145background:#FDFDfD; 
     146background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 
     147background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 
     148} 
     149/*----------------------------------------------- 
     150ボタン(追加系ボタン:ホワイト) 
     151----------------------------------------------- */ 
     152a.btn_more,a.btn_more:link,a.btn_more:visited,a.btn_more:hover{ 
     153color:#000; 
     154font-size: 16px; 
     155padding:5px 0; 
     156font-weight:bold; 
     157text-decoration: none; 
     158text-align:center; 
     159border: 1px solid #A9ABAD; 
     160border-radius: 5px; 
     161-moz-border-radius: 5px; 
     162-webkit-border-radius: 5px; 
     163display:block; 
     164background: #FFF; 
     165clear:both; 
     166margin:10px; 
     167} 
     168input[type="submit"].btn_more{ 
     169color:#000; 
     170font-size: 16px; 
     171padding:5px 0; 
     172font-weight:bold; 
     173text-decoration: none; 
     174text-align:center; 
     175border: 1px solid #A9ABAD; 
     176border-radius: 5px; 
     177-moz-border-radius: 5px; 
     178-webkit-border-radius: 5px; 
     179display:block; 
     180background: #FFF; 
     181clear:both; 
     182} 
     183/*----------------------------------------------- 
     184ボタン(フッター) 
     185----------------------------------------------- */ 
     186a.btn_btm{ 
     187width:150px; 
     188text-align: center; 
     189color: #FFF; 
     190background-color: #000; 
     191background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%); 
     192background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323)); 
     193border:#303030 solid 1px; 
     194text-shadow: 0 -1px 1px rgba(0,0,0,0.5); 
     195-moz-border-radius: 5px; 
     196-webkit-border-radius: 5px; 
     197padding: 5px; 
     198margin:10px auto; 
     199transition: background-color 1s ease-in; 
     200-webkit-transition: background-color 1s ease-in; 
     201-moz-transition: opacity 1s ease-int; 
     202} 
     203.btn_btm,a.btn_btm:link,a.btn_btm:hover,a.btn_btm:visited{ 
     204color:#FFF; 
     205text-decoration:none; 
     206} 
     207input[type="submit"].btn_btm{ 
     208width:150px; 
     209text-align: center; 
     210color: #FFF; 
     211background-color: #000; 
     212background: -moz-linear-gradient(center top, #5E5E5E 0%,#232323 48%); 
     213background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5E5E5E),color-stop(0.48, #232323)); 
     214border:#303030 solid 1px; 
     215text-shadow: 0 -1px 1px rgba(0,0,0,0.5); 
     216-moz-border-radius: 5px; 
     217-webkit-border-radius: 5px; 
     218padding: 5px; 
     219margin:10px auto; 
     220transition: background-color 1s ease-in; 
     221-webkit-transition: background-color 1s ease-in; 
     222-moz-transition: opacity 1s ease-int; 
     223cursor:pointer; 
     224} 
     225/*----------------------------------------------- 
     226ボタン小(編集/削除) 
     227----------------------------------------------- */ 
     228ul.edit{ 
     229float:right; 
     230clear:right; 
     231display:inline; 
     232vertical-align:top; 
     233line-height:1; 
     234position:absolute; 
     235right:10px; 
     236top:15px; 
     237} 
     238ul.edit li{ 
     239display:inline; 
     240float:left; 
     241line-height:1; 
     242vertical-align:middle; 
     243} 
     244ul.edit li:first-child{ 
     245margin-right:0.8em; 
     246} 
     247a.b_edit:link,a.b_edit:visited,a.b_edit:hover{ 
     248color:#000; 
     249font-size:11px; 
     250padding:4px 5px; 
     251border:#CCC solid 1px; 
     252border-radius: 12px; 
     253-moz-border-radius: 12px; 
     254-webkit-border-radius: 12px; 
     255background:#D7DDE3; 
     256background: -moz-linear-gradient(center top, #FFFFFF 0%,#D7DDE3 100%); 
     257background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(1, #D7DDE3)); 
     258display:inline; 
     259text-align:center; 
     260cursor:pointer; 
     261vertical-align:middle; 
     262} 
     263a.b_delete:link,a.b_delete:visited,a.b_delete:hover{ 
     264vertical-align:top; 
     265cursor:pointer; 
     266} 
     267/*----------------------------------------------- 
     268ボタン(商品詳細:カゴに入れる) 
     269----------------------------------------------- */ 
     270.cartbtn_default{ 
     271width:50%!important; 
     272font-size:15px; 
     273padding:10px 0; 
     274background:#669222; 
     275background: -moz-linear-gradient(center top, #B4DF34 0%,#669222 100%); 
     276background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B4DF34),color-stop(1, #669222)); 
    43277} 
    44278 
    45 /* ボタン大(承諾、送信) 
    46 ----------------------------------------------- */ 
    47 .spbtn-agree { 
    48     background-color: #6dc935; 
    49     border: 1px solid #666666; 
    50     color: #FFFFFF; 
    51     display: block; 
    52     font: bold 120% helvetica; 
    53     margin: 0.5em auto 0.3em; 
    54     padding: 7px; 
    55     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); 
    56     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    57     -webkit-border-radius: 6px; 
    58     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); 
    59     text-decoration:none; 
    60 } 
    61  
    62 /* ボタン大(キャンセル、退会) 
    63 ----------------------------------------------- */ 
    64 .spbtn-cancel { 
    65 color: #ffffff; 
    66 border: solid 2px #666666; 
    67 background-color: #fc4743; 
    68 /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));*/ 
    69 } 
    70  
    71 /* ボタン中(お問い合わせ、友達に教える) 
    72 ----------------------------------------------- */ 
    73 .spbtn-medeum { 
    74     background-color: #aaaaaa; 
    75     border: 1px solid #666666; 
    76     color: #FFFFFF; 
    77     display: block; 
    78     font: bold 100% helvetica; 
    79     margin: 0 auto; 
    80     padding: 7px; 
    81     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); 
    82     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    83     -webkit-border-radius: 6px; 
    84     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); 
    85 /*text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    86 -webkit-border-radius: 6px; 
    87 -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);*/ 
    88 } 
    89 a.spbtn-medeum { 
    90 width: 95%; 
    91 text-decoration:none; 
    92 text-align:center; 
    93 } 
    94 input.spbtn-medeum { 
    95 width: 100%; 
    96 } 
    97  
    98 .spbtn-medeum02 { 
    99     background-color: #aaaaaa; 
    100     border: 1px solid #666666; 
    101     color: #FFFFFF; 
    102     display: block; 
    103     font: bold 100% helvetica; 
    104     margin: 0 auto; 
    105     padding: 7px; 
    106     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); 
    107     text-align:center; 
    108         -webkit-border-radius: 6px; 
    109 /*text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    110 -webkit-border-radius: 6px; 
    111 -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);*/ 
    112 } 
    113  
    114  
    115  
    116 /* ボタン小(お気に入りに登録、住所自動入力) 
    117 ----------------------------------------------- */ 
    118 .spbtn-small { 
    119 display: inline-block; 
    120 margin: 0; 
    121 padding: 0.2em 0.4em; 
    122 color: #ffffff; 
    123 text-shadow: 0px -1px 1px rgba(0,0,0,1); 
    124 font: bold 100% helvetica; 
    125 font-weight: bold; 
    126 background-color: #666666; 
    127 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    128 text-align:center; 
    129 vertical-align: middle; 
    130 text-decoration: none; 
    131 border: solid 1px #333333; 
    132 -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.7); 
    133 } 
    134  
    135  
    136 /* ×ボタン (お気に入りから削除) 
    137 ----------------------------------------------- */ 
    138 .spbtn-delete { 
    139 display: inline-block; 
    140 line-height: 1em; 
    141 width: 1em; 
    142 height: 1em; 
    143 margin: 0; 
    144 margin-left: 5px; 
    145 padding: 0; 
    146 color: #ffffff; 
    147 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    148 font-family: verdana; 
    149 font-weight: bold; 
    150 background-color: #333333; 
    151 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    152 text-align:center; 
    153 vertical-align: middle; 
    154 text-decoration: none; 
    155 -webkit-border-radius: 4px; 
    156 border: solid 1px #666666; 
    157 } 
    158  
    159 /* ログイン・会員登録・マイページボタン 
    160 ----------------------------------------------- */ 
    161  
    162 #block-login .spbtn{ 
    163     background-color: #666666; 
    164     border-left: 1px solid #666666; 
    165     color: #FFFFFF; 
    166     display: block; 
    167     float: left; 
    168     margin: 5px 0; 
    169     padding: 0.3em 0; 
    170     text-align: center; 
    171     text-decoration: none; 
    172     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); 
    173     vertical-align: middle; 
    174     width: 49.6%; 
    175 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    176 background-color: #666666; 
    177 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    178 } 
    179  
    180 #block-login .spbtn:first-child{ 
    181 width: 49.6%; 
    182 border-left: none; 
    183 margin-left: 0px; 
    184 -webkit-border-top-left-radius: 4px; 
    185 -webkit-border-bottom-left-radius: 4px; 
    186 } 
    187 #block-login .spbtn:last-child{ 
    188 width: 49.6%; 
    189 -webkit-border-top-right-radius: 4px; 
    190 -webkit-border-bottom-right-radius: 4px; 
    191 margin-left:1px 
    192 } 
    193 #block-login .spbtn:only-child{ 
    194 width: 100%; 
    195 max-width: 100%; 
    196 -webkit-border-radius: 4px; 
    197 } 
    198 #block-login .spbtn > a{ 
    199 } 
    200  
    201 /*ご利用規約はこちら ボタン 
    202 ------------------------------------------------*/ 
    203 .kybtn{ 
    204     background-color: #666666; 
    205     border-left: 1px solid #666666; 
    206     color: #FFFFFF; 
    207     display: block; 
    208     float: left; 
    209     margin: 5px 0; 
    210     padding: 0.3em 0; 
    211     text-align: center; 
    212     text-decoration: none; 
    213     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); 
    214     vertical-align: middle; 
    215     width: 100%; 
    216     font-size: 90%; 
    217 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    218 background-color: #666666; 
    219 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    220 } 
    221  
    222  
    223 /*住所自動入力 ボタン 
    224 ------------------------------------------------*/ 
    225 .oubtn{ 
    226     background-color: #666666; 
    227     border-left: 1px solid #666666; 
    228     color: #FFFFFF; 
    229     display: block; 
    230     float: left; 
    231     margin: 5px 0; 
    232     padding: 0.3em 0; 
    233     text-align: center; 
    234     text-decoration: none; 
    235     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); 
    236     vertical-align: middle; 
    237     width: 99%; 
    238 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    239 background-color: #666666; 
    240 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    241 } 
    242  
    243  
    244 /* 「TOPへ」ボタン 
    245 ----------------------------------------------- */ 
    246 #btn-top { 
    247 display:block; 
    248 position: absolute; 
    249 top: 4px; 
    250 right: 0.4em; 
    251 font: bold 100% helvetica; 
    252 width: 4.3em; 
    253 border: 1px solid rgba(0,0,0,0.5); 
    254 border-top: 1px solid rgba(0,0,0,0.7); 
    255 background-color: rgba(51,51,51,0.2); 
    256 background-color: #333332; 
    257 background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,0.01)), color-stop(.02,rgba(255,255,255,0.4)),color-stop(.5,rgba(255,255,255,0.3))); 
    258 -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.3); 
    259 vertical-align: middle; 
    260 text-align: center; 
    261 text-decoration: none; 
    262 -webkit-border-radius: 5px; 
    263 } 
    264 #btn-top > a { 
    265 display: block; 
    266 padding-top: 0.3em; 
    267 padding-bottom: 0.4em; 
    268 color: #ffffff; 
    269 font: bold 100% helvetica; 
    270 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    271 vertical-align: middle; 
    272 text-decoration: none; 
    273 } 
    274  
    275 /* ショッピング関連ボタン 
    276 ----------------------------------------------- */ 
    277 .spbtn-shopping { 
    278     background-color: #6dc935; 
    279     border: 1px solid #666666; 
    280     color: #FFFFFF; 
    281     display: block; 
    282     font: bold 120% helvetica; 
    283     margin: 0 auto; 
    284     padding: 7px; 
    285     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); 
    286     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    287     -webkit-border-radius: 6px; 
    288     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); 
    289  
    290 /*display: block; 
    291 margin: 0.5em auto 0.3em; 
    292 font: bold 100% helvetica; 
    293 border: solid 1px #666666; 
    294 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    295 color: #ffffff; 
    296 background-color: #fc4743; 
    297 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    298 -webkit-border-radius: 6px; 
    299 -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);*/ 
    300 } 
    301 a.spbtn-shopping { 
    302 width: 95%; 
    303 text-decoration:none; 
    304 margin:0; 
    305 text-align:center; 
    306 } 
    307 input.spbtn-shopping { 
    308 width: 100%; 
    309 margin:0; 
    310 } 
    311  
    312 p.addbtn { 
    313 margin-bottom:20px; 
    314 } 
     279/*----------------------------------------------- 
     280ボタン(商品詳細:お気に入り) 
     281----------------------------------------------- */ 
     282.btn_favorite .btn_sub{ 
     283width:auto; 
     284display:block; 
     285} 
     286/*----------------------------------------------- 
     287ボタン(新しいお届け先を追加する) 
     288----------------------------------------------- */ 
     289.addbtn{ 
     290margin:0 30px; 
     291padding:5px 0; 
     292} 
     293/*----------------------------------------------- 
     294ボタン(トップページへ) 
     295----------------------------------------------- */ 
     296.btn_s{ 
     297width:12em; 
     298padding:10px 0!important; 
     299margin:10px auto; 
     300clear:both; 
     301} 
     302/*----------------------------------------------- 
     303ボタン(住所自動入力) 
     304----------------------------------------------- */ 
     305.btn_inputzip{ 
     306margin:12px 0 5px 0; 
     307} 
     308/*----------------------------------------------- 
     309ボタン(ログイン/ウィンドウ) 
     310----------------------------------------------- */ 
     311.btn_login,.btn_close{ 
     312width:70%; 
     313margin:10px auto; 
     314} 
  • branches/version-2_11-dev/html/user_data/packages/sphone/css/common.css

    r20969 r21052  
    11@charset "utf-8"; 
    2  
    3 /* body 
     2/* =================================================================== 
     3CSS information 
     4file name  :common.css 
     5style info :共通 
     6=================================================================== */ 
     7/*----------------------------------------------- 
     8body 
    49----------------------------------------------- */ 
    510body { 
    6 background: #fff; 
    7 background-position: 50% 0% fixed; 
    8 font-family: helvetica, Osaka; 
    9 font-size:medium; 
    10 margin: 0px 3.13% 10px; 
    11 padding: 0px; 
     11background: #FFF; 
     12font-family: Helvetica, san-serif; 
     13line-height: 1.5; 
     14font-size: 14px; 
     15margin: 0; 
     16padding: 0; 
    1217-webkit-user-select: none; 
    1318-webkit-text-size-adjust: none; 
    14 -webkit-tap-highlight-color: rgba(51,102,204,0.70); 
    15 max-width: 100%; 
    16 } 
     19-webkit-touch-callout:none; 
     20-webkit-tap-highlight-color: rgba(0,0,0,0.50); 
     21} 
     22/*----------------------------------------------- 
     23リンク指定 
     24----------------------------------------------- */ 
     25a:link{ 
     26color:#324E85; 
     27text-decoration: none; 
     28} 
     29a:visited { 
     30color: #603E7D; 
     31text-decoration: none; 
     32} 
     33a:link:hover{ 
     34text-decoration:none; 
     35cursor:pointer; 
     36} 
     37/*右矢印リンクテキスト*/ 
     38.arrowRtxt{ 
     39display:inline; 
     40clear:both; 
     41margin:5px auto; 
     42padding-right:15px; 
     43background:url(../img/common/ico_arrowR.png) right center no-repeat; 
     44} 
     45@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
     46.arrowRtxt { 
     47background: url(../img/common/ico_arrowR2.png) right center no-repeat; 
     48-webkit-background-size: 10px 15px; 
     49background-size: 10px 15px; 
     50} 
     51} 
     52div,li,p{ 
     53-webkit-tap-highlight-color: rgba(0,0,0,0.50);} 
     54/*----------------------------------------------- 
     55clearfix  
     56----------------------------------------------- */ 
     57.clearfix:after { 
     58content: ".";   
     59display: block;  
     60clear: both; 
     61height: 0; 
     62visibility: hidden; 
     63} 
     64ul:after{ 
     65content: ".";   
     66display: block; 
     67clear: both; 
     68height: 0; 
     69visibility: hidden; 
     70} 
     71dl:after{ 
     72content: ".";   
     73display: block; 
     74clear: both; 
     75height: 0; 
     76visibility: hidden; 
     77} 
     78/*----------------------------------------------- 
     79汎用 
     80----------------------------------------------- */ 
     81.photoL{ 
     82float:left; 
     83clear:left; 
     84} 
     85.photoR{ 
     86float:right; 
     87clear:right; 
     88} 
     89.clear{ 
     90clear:both; 
     91} 
     92.inner{ 
     93padding:10px; 
     94} 
     95.intro{ 
     96padding:5px 10px 10px; 
     97font-weight:bold; 
     98} 
     99.hidden { 
     100display: none; 
     101} 
     102.end{ 
     103border-bottom:none!important; 
     104} 
     105.top{ 
     106margin-bottom:1em!important; 
     107} 
     108.bg_head{ 
     109background:#EEE; 
     110} 
     111/*----------------------------------------------- 
     112font 
     113----------------------------------------------- */ 
     114h2{ 
     115font-size:20px; 
     116} 
     117h3,h4,h5 { 
     118font-size: 100%; 
     119font-weight:bold; 
     120} 
     121em{ 
     122font-weight:bold; 
     123} 
     124.attention { 
     125color: #CC0000; } 
     126.mini { 
     127font-size: 11px; 
     128font-weight:normal; } 
     129.fb{ 
     130font-size:14px; 
     131font-weight:bold; 
     132} 
     133.price{ 
     134color:#CC0000; 
     135font-weight:bold; 
     136} 
     137.attentionSt{ 
     138color:#CC0000; 
     139font-weight:bold; 
     140} 
     141/*------------------------------------------------- 
     142レイアウト 
     143----------------------------------------------- */ 
     144.frame_outer { 
     145overflow: hidden; 
     146width: 100%; 
     147background: #FFF; 
     148} 
     149#main-content{ 
     150} 
     151/*---------------------------------------------------- 
     152ランドスケープ表示 
     153----------------------------------------------------*/ 
     154@media screen and (max-width: 480px){   
     155/*body { 
     156font-size: 12px; 
     157}*/ 
     158} 
     159/*----------------------------------------------- 
     160タイトル 
     161----------------------------------------------- */ 
     162h2.title { 
     163color: #FFF; 
     164font-size:20px; 
     165font-weight:bold; 
     166line-height:45px; 
     167text-align:center; 
     168text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
     169margin: 0 0 15px 0; 
     170padding:0 10px; 
     171background:#494E57; 
     172background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494e57 100%); 
     173background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6D7481),color-stop(0.8, #505765),color-stop(1, #494e57)); 
     174border-top:#868D99 1px solid; 
     175border-bottom:#C6C2C8 1px solid; 
     176-webkit-box-shadow: 1px 5px 5px #CCC; 
     177-moz-box-shadow: 1px 5px 5px #CCC; 
     178vertical-align: middle; 
     179white-space:nowrap; 
     180overflow:hidden; 
     181text-overflow: ellipsis; 
     182clear:both; 
     183} 
     184/*ボタンで展開するタイトルバー*/ 
     185.title_box{ 
     186color: #FFF; 
     187text-shadow: 0px -1px 1px rgba(0,0,0,0.3); 
     188line-height:45px; 
     189padding:0 10px; 
     190margin: 0 0 15px 0; 
     191background:#494e57; 
     192background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494e57 100%); 
     193background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6D7481),color-stop(0.8, #505765),color-stop(1, #494e57)); 
     194border-top: #74828B solid 1px; 
     195border-bottom:#74828B solid 1px; 
     196vertical-align: middle; 
     197clear:both; 
     198} 
     199.title_box h2{ 
     200font-size:20px; 
     201text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
     202width:85%; 
     203float:left; 
     204clear:left; 
     205white-space:nowrap; 
     206overflow:hidden; 
     207text-overflow: ellipsis; 
     208line-height:45px; 
     209vertical-align:middle; 
     210} 
     211.title_box h3{ 
     212width:85%; 
     213float:left; 
     214clear:left; 
     215font-size:18px; 
     216text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
     217white-space:nowrap; 
     218overflow:hidden; 
     219text-overflow: ellipsis; 
     220line-height:30px; 
     221vertical-align:middle; 
     222} 
     223/*サブタイトル*/ 
     224h3.subtitle{ 
     225font-size:18px; 
     226color: #FFF; 
     227line-height:30px; 
     228text-shadow: 0px -1px 1px rgba(0,0,0,0.3); 
     229padding:0 10px; 
     230margin: 0 0 10px 0; 
     231background:#84949F; 
     232background: -moz-linear-gradient(center top, #96A4AF 0%,#84949F 100%); 
     233background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96A4AF),color-stop(1, #84949F)); 
     234border-top: #74828B solid 1px; 
     235border-bottom:#74828B solid 1px;vertical-align: middle; 
     236white-space:nowrap; 
     237overflow:hidden; 
     238text-overflow: ellipsis; 
     239clear:both; 
     240-webkit-box-shadow: 1px 0px 1px #FFF; 
     241-moz-box-shadow: 1px 0px 1px #FFF; 
     242position:relative; 
     243} 
     244/*ボタンで展開するサブタイトルバー*/ 
     245.title_box_sub{ 
     246color: #FFF; 
     247line-height:30px; 
     248padding:0 10px; 
     249margin: 0 0 20px 0; 
     250background:#84949F; 
     251background: -moz-linear-gradient(center top, #96A4AF 0%,#84949F 100%); 
     252background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96A4AF),color-stop(1, #84949F)); 
     253border-top: #74828B solid 1px; 
     254border-bottom:#74828B solid 1px; 
     255vertical-align: middle; 
     256clear:both; 
     257position:relative; 
     258} 
     259.title_box_sub h2,.title_box_sub h3{ 
     260font-size:18px; 
     261text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
     262width:85%; 
     263float:left; 
     264clear:left; 
     265white-space:nowrap; 
     266overflow:hidden; 
     267text-overflow: ellipsis; 
     268line-height:30px; 
     269vertical-align:middle; 
     270} 
     271.title_box_sub .b_expand{ 
     272width:22px; 
     273height:21px; 
     274float:right; 
     275clear:right; 
     276position:absolute; 
     277top:-6px; 
     278right:15px; 
     279z-index:2; 
     280padding:2px; 
     281} 
     282/*---------------------------------------------------- 
     283input/select 
     284----------------------------------------------------*/ 
     285input { 
     286padding:6px; 
     287margin:5px 0; 
     288font-size: 14px; 
     289} 
     290input[type="radio"]{ 
     291vertical-align:top; 
     292padding:0; 
     293margin-right:0.5em; 
     294} 
     295.text, .textarea, .dropdown{ 
     296color: #999; 
     297padding: 0.5em; 
     298border:#4C4C4C solid 1px; 
     299background: #FFF; 
     300border-radius: 5px; 
     301-webkit-border-radius: 5px; 
     302-moz-border-radius: 5px; 
     303} 
     304.textarea{ 
     305width:100%; 
     306margin:0 0 10px -8px; 
     307min-height:60px; 
     308} 
     309.cartin_quantity,.box_point{ 
     310width:2em; 
     311} 
     312.boxLong{ 
     313width:96%; 
     314} 
     315.boxMedium{ 
     316width:35%; 
     317} 
     318.boxShort { 
     319width: 20%; 
     320} 
     321.boxHarf{ 
     322width:41%; 
     323} 
     324/*---------------------------------------------------- 
     325header 
     326----------------------------------------------------*/ 
    17327 
    18 /* 共通 
    19 ----------------------------------------------- */ 
    20 /* IE用hackここから */ 
    21 .clearfix{ 
    22     zoom:100%; 
    23 } 
    24 /* IE用hackここまで */ 
     328/* ヘッダーロゴ 
     329------------------------------------------------ */ 
     330header { 
     331background: #FFF; 
     332margin: 0 auto; 
     333padding:10px 5px; 
     334clear:both; 
     335} 
     336#site_name{ 
     337width:47%; 
     338float:left; 
     339clear:left; 
     340position:relative; 
     341} 
     342header h1 { 
     343margin-top:-8px; 
     344} 
    25345 
    26 .clearfix:after{ 
    27     display:block; 
    28     clear:both; 
    29     height:0px; 
    30     visibility:hidden; 
    31     content:"."; 
     346/* ヘッダーナビ 
     347------------------------------------------------ */ 
     348.header_utility{ 
     349width:50%; 
     350padding-left:5px; 
     351float:right; 
     352display:inline; 
     353} 
     354.header_navi{ 
     355font-size:11px; 
     356padding-top:5px; 
     357float:right; 
     358display:inline; 
     359text-align:right; 
     360line-height:1.2; 
     361} 
     362.header_navi ul{ 
     363display:inline; 
     364float:right; 
     365} 
     366.header_navi li{ 
     367float:left; 
     368display:block; 
     369margin:0; 
     370padding:8px 5px; 
     371text-align:center; 
     372border:#A9ABAD solid 1px; 
     373border-radius: 5px; 
     374-moz-border-radius: 5px; 
     375-webkit-border-radius: 5px; 
     376background:#FDFDfD; 
     377background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 
     378background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 
     379} 
     380.header_navi li a{ 
     381text-decoration:none; 
     382} 
     383.header_navi li:first-child{ 
     384margin-right:1em; 
     385} 
     386.popup_mypage{ 
     387font-size:small; 
     388width: 150px; 
     389padding:10px; 
     390display: none; 
     391position: absolute; 
     392top: 55px; 
     393z-index: 1; 
     394background:#FFF; 
     395background: -moz-linear-gradient(center top, #FDFDFD 0%,#E5E5E5 100%); 
     396background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #E5E5E5)); 
     397border:#CCC solid 1px; 
     398border-radius: 5px; 
     399-webkit-border-radius: 5px; 
     400-moz-border-radius: 5px; 
     401} 
     402.popup_cart{ 
     403font-size:small; 
     404width: 180px; 
     405padding:10px; 
     406display: none; 
     407position: absolute; 
     408top: 55px; 
     409z-index: 1; 
     410background:#FFF; 
     411background: -moz-linear-gradient(center top, #FDFDFD 0%,#E5E5E5 100%); 
     412background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #E5E5E5)); 
     413border:#CCC solid 1px; 
     414border-radius: 5px; 
     415-webkit-border-radius: 5px; 
     416-moz-border-radius: 5px; 
     417} 
     418.popup_mypage a,.popup_cart a{ 
     419text-decoration:underline; 
     420} 
     421.popup_mypage h2,.popup_cart h2{ 
     422font-size:1.2em; 
     423} 
     424.quentity,.money{ 
     425font-weight:bold; 
     426} 
     427.popup_cart hr.dashed:last-child{ 
     428display:none; 
     429} 
     430hr.dashed{ 
     431display:block; 
     432height:1px; 
     433border:0;    
     434border-top:#CCC dashed 1px; 
     435margin:0.2em 0; 
     436padding:0;} 
     437.free_money{ 
     438} 
     439.dl_item{ 
     440margin-top:5px; 
    32441} 
    33442 
    34  
    35 /* HTML default 
    36 ----------------------------------------------- */ 
    37 a { 
    38     color: #3399cc; 
    39     text-decoration: border; 
    40 } 
    41 form { 
    42     margin: 0; 
    43     padding: 0; 
    44 } 
    45 table,img,p { 
    46     border: 0; 
    47 } 
    48 em { 
    49     font-weight: bold; 
    50     font-style: normal; 
    51     color: #ff0000; 
    52 } 
    53 hr { 
    54     display: none; 
    55 } 
    56 p { 
    57     margin: 0 0 1em; 
    58     padding: 0; 
    59 } 
    60 li { 
    61 list-style-type: none; 
    62 } 
    63 img { 
    64 vertical-align: bottom; 
    65 } 
    66 .hidden { 
    67     display: none; 
    68 } 
    69 br.clear { 
     443/*index menu/トップページヘッダー3列ボタン*/ 
     444.top_menu{ 
     445width:100%; 
     446margin-bottom:10px; 
     447-webkit-box-shadow: 1px 5px 5px #ccc; 
     448-moz-box-shadow: 1px 5px 5px #ccc; 
     449background:#494E57; 
     450background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494E57 100%); 
     451background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(0.8, #505765),color-stop(1, #494E57)); 
     452} 
     453.top_menu ul{ 
     454width:auto; 
     455margin:0 auto; 
     456clear:both; 
     457} 
     458.top_menu ul li{ 
     459width:33%; 
     460float:left; 
     461text-align:center; 
     462border-left:#747B83 solid 1px; 
     463border-right:#3D3D3D solid 1px; 
     464border-bottom:#141517 solid 1px; 
     465border-top:#A1A7AF solid 2px; 
     466} 
     467.top_menu ul li img{ 
     468margin:0 auto; 
     469display:block; 
     470clear:both; 
     471} 
     472.top_menu ul li a:link,.top_menu ul li a:visited{ 
     473color:#FFF; 
     474text-shadow: 0px 1px 1px rgba(0,0,0,1); 
     475padding:9px 0 8px 0; 
     476display:block; 
     477background:#494E57; 
     478background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494E57 100%); 
     479background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481),color-stop(0.8, #505765),color-stop(1, #494E57)); 
     480-webkit-transition:background-color 0.5s ease-in; 
     481-moz-transition:background-color 0.5s ease-in; 
     482} 
     483.top_menu ul li a:hover{ 
     484color:#FFF; 
     485text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 
     486background:#5393C5; 
     487background: -moz-linear-gradient(center top, #5393C5 10%,#80B6E2 100%); 
     488background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393C5),color-stop(1, #80B6E2)); 
     489text-decoration:none; 
     490} 
     491.top_menu li:first-child{ 
     492border-left:none; 
     493} 
     494.top_menu li:last-child{ 
     495border-right:none; 
     496} 
     497/*------------------------------------------------- 
     498footer 
     499----------------------------------------------- */ 
     500footer.global_footer { 
     501padding:0 0 10px 0; 
     502background: #F5F5F5; 
     503text-align:center; 
     504} 
     505.footer_utility{ 
     506background: #F5F5F5; 
     507} 
     508/*フッター4列ボタン*/ 
     509.footer_navi { 
     510width:100%; 
     511display:block; 
     512clear:both; 
     513padding:0.5em 0; 
     514-webkit-box-shadow: 1px 1px 1px #FFF; 
     515-moz-box-shadow: 1px 1px 1px #FFF; 
     516background:#272a2b; 
     517background: -moz-linear-gradient(center top, #808080 0%,#272a2b 100%); 
     518background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #808080),color-stop(1, #272a2b)); 
     519}  
     520.footer_navi ul{ 
     521width:100%; 
     522display:block; 
     523} 
     524.footer_navi:after { 
     525content: ".";  
     526display: block; 
    70527clear: both; 
    71 display: none; 
    72 font-size: 0px; 
    73 line-height: 0%; 
    74 height: 0px 
    75 } 
    76  
    77 /* クリアフィックス 
    78 ----------------------------------------------- */ 
    79 #block-login:after, 
    80 .block-center:after, 
    81 .listarea:after, 
    82 .recomendblock > div  
    83 .whoboughtblock > div { 
    84 content: ""; 
    85 display: block; 
    86 height: 0; 
    87 clear: both; 
    88 visibility: hidden; 
    89 } 
    90  
    91 /* font 
    92 ----------------------------------------------- */ 
    93 h1,h2,h3,h4,h5 { 
    94 font-size: 100%; 
    95 line-height: 150%; 
    96 } 
    97 .attention { color: #ff0000; } 
    98 .mini { font-size: 80%; } 
    99  
    100  
    101  
    102 /* wrapper 
    103 ----------------------------------------------- */ 
    104 div#wrapper { 
    105 margin: 0 auto; 
    106 padding: 0; 
    107 text-align: left; 
    108 background: #FFFFFF; 
    109 overflow: hidden; 
    110 } 
    111  
    112 /* 見出し (h2) 
    113 ----------------------------------------------- */ 
    114 h2 { 
    115 color:#4D576B; 
    116 font: bold 110% helvetica; 
    117 background:url(../img/common/line_01.gif) repeat-x left bottom; 
    118 /*text-shadow: 0px 1px 1px #ffffff;*/ 
    119 margin: 0 0 10px 0; 
    120 padding:0 0 5px 0; 
    121 } 
    122  
    123 table th h2.product_name { 
    124 text-align:left; 
    125 margin: 5px 0; 
    126 color:#4D576B; 
    127 font: bold 110% helvetica; 
    128 background:#F0F0F0; 
    129 /*text-shadow: 0px 1px 1px #ffffff;*/ 
    130 margin: 5px auto; 
    131 } 
    132  
    133 /* 見出し (h3) 
    134 ----------------------------------------------- */ 
    135 #mycontentsarea h3 { 
    136 color:#4D576B; 
    137 font: bold 100% helvetica; 
    138 /*text-shadow: 0px 1px 1px #ffffff;*/ 
    139 } 
    140  
    141 /* ナビゲーションバー・ページタイトル 
    142 ----------------------------------------------- */ 
    143 #navigation_bar, 
    144 h2.title, 
    145 #title-list, 
    146 .title-mypagecolumn, 
    147 #windowarea h2, 
    148 #pan + h2 { 
    149 display: inline-block; 
    150 width: 106.8%; 
    151 margin: 0 0 1em -3.4%; 
    152 color: #ffffff; 
    153 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
    154 font: bold 120% helvetica; 
    155 padding: 0.45em 0; 
    156 background-color: #333332; 
    157 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 
    158 border-top: 1px solid rgba(255,255,255,0.3); 
    159 border-bottom: 1px solid rgba(0,0,0,1); 
    160 text-align:center; 
    161 vertical-align: middle; 
    162 white-space: nowrap; 
    163 overflow: hidden; 
    164 text-overflow: ellipsis; 
    165 } 
    166  
    167 /* ページタイトル 
    168 ----------------------------------------------- */ 
    169 #navigation_bar > h2{ 
    170 font: bold 100% helvetica; 
    171 color: #ffffff; 
    172 vertical-align: middle; 
    173 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
     528height:0; 
     529} 
     530.footer_navi li{ 
     531width:23%; 
     532height:49px; 
     533display:block; 
     534margin:0 1%; 
     535padding:0; 
     536float:left; 
     537background:#202223; 
     538background: -moz-linear-gradient(center top, #282A2A 0%,#202223 100%); 
     539background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #282A2A),color-stop(1, #202223)); 
     540text-align:center; 
     541color:#FFF; 
     542font-size:10px; 
     543border-radius: 8px; 
     544-webkit-border-radius: 8px; 
     545-moz-border-radius: 8px; 
     546-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; 
     547-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; 
     548position:relative; 
     549} 
     550.footer_status_area{ 
     551margin:0; 
     552padding:10px; 
     553text-align:center; 
     554background: #F5F5F5; 
     555} 
     556.footer_status_area p:last-child{ 
     557margin:10px auto; 
     558} 
     559.guide_area{ 
     560clear:both; 
     561margin:0; 
     562padding:10px 0 0 0; 
     563text-align:center; 
     564border-top:#999 solid 1px; 
     565} 
     566.guide_area p{ 
     567font-weight:bold; 
     568line-height:2.4; 
     569} 
     570.guide_area a{ 
     571padding:0.5em 0.3em; 
     572margin:0.5em 0.1em; 
     573} 
     574footer.global_footer p.copyright { 
    174575margin: 0; 
    175 display: inline-block; 
    176 max-width: 65%; 
    177 white-space: nowrap; 
    178 overflow: hidden; 
    179 text-overflow: ellipsis; 
    180 -webkit-text-overflow: ellipsis; 
    181 } 
    182  
    183 /* header 
    184 ----------------------------------------------- */ 
    185 /* information 
    186 ----------------------------------------------- */ 
    187 /* navigation 
    188 ----------------------------------------------- */ 
    189 /* フレーム 
    190 ----------------------------------------------- */ 
    191 /* contents 
    192 ----------------------------------------------- */ 
    193  
    194 /* footer 
    195 ----------------------------------------------- */ 
    196 #pagetop { 
    197 width: 100%; 
    198 margin: 10px 0 0; 
    199 text-align: right; 
    200 } 
    201 #pagetop a{ 
    202 color:#4D576B; 
    203 font: normal 100% helvetica; 
    204 text-shadow: 0px 1px 1px #ffffff; 
    205 text-decoration: underline; 
    206 } 
    207 div#footer { 
    208     margin: 0; 
    209     padding: 20px 0 0; 
    210     text-align: center; 
    211 } 
    212  
    213 /* footer information 
    214 ----------------------------------------------- */ 
    215 #footer-menu { 
    216 text-align: left; 
    217 font: bold 100% helvetica; 
    218 } 
    219 #footer-menu li{ 
    220 background: #ffffff url(../img/common/chevron.png) no-repeat right center; 
    221 } 
    222 #footer-navi { 
    223 float:left; 
    224 list-style:none outside none; 
    225 margin: 0 auto 4px; 
    226 padding: 0; 
    227 text-align:center; 
    228 width: 100%; 
    229 border: none; 
    230 background-color: transparent; 
    231 } 
    232 #footer-navi > li{ 
    233 display: inline; 
    234 color:#4D576B; 
    235 font: normal 70% helvetica; 
    236 background-color: transparent; 
    237 /*text-shadow: 0px 1px 1px #ffffff;*/ 
    238 border: none; 
    239 /*border-right: 1px dotted #999999;*/ 
    240 /*-webkit-border-radius: 0;*/ 
    241 line-height: 1.8em; 
    242 margin: 0; 
    243 padding: 0; 
    244 } 
    245 #footer-navi > li:last-child{ 
    246 border-right: none; 
    247 } 
    248 #footer-navi > li > a { 
    249 margin: 0; 
    250 padding: 0; 
    251 display: inline; 
    252 color:#4D576B; 
    253 text-decoration:underline; 
    254 } 
    255 #copyright { 
    256 margin: 7px 0px; 
    257 color: #4D576B; 
    258 font: normal 70% helvetica; 
    259 /*text-shadow: 0px 1px 1px #ffffff;*/ 
    260576text-align: center; 
    261 } 
    262 #copyright a{ 
    263 color: #4D576B; 
    264 text-decoration: under-line; 
    265 } 
    266  
    267 /* ニュース 
    268 ----------------------------------------------- */ 
    269 /* おすすめ 
    270 ----------------------------------------------- */ 
    271  
    272 /* panlist 
    273 ----------------------------------------------- */ 
    274 div#pan { 
    275 display: none; 
    276 } 
    277  
    278 /* error 
    279 ----------------------------------------*/ 
    280  
    281 div .error { 
    282     text-align:left; 
    283     padding: 15px 0; 
    284 } 
    285  
    286  
    287 /* フォーム 
    288 ----------------------------------------------- */ 
    289 /*input[size="40"] { 
    290 width: 50%; 
    291 }*/ 
    292 /*input[type="password"] { 
    293 width: 50%; 
    294 }*/ 
    295 input[type="tel"] { 
    296 width: 3em; 
    297 } 
    298 input, tr, th, td { 
    299 max-width: 100%; 
    300 } 
    301 input { 
    302 font-size: 100%; 
    303 } 
    304 textarea{ 
    305 font-size: 100%; 
    306 width: 95%; 
    307 } 
    308 form dl{ 
    309 font: bold 100% helvetica; 
    310 margin: 10px 0; 
    311 } 
    312 form dt{ 
    313 margin: 5px 0; 
    314 color:#4D576B; 
    315 font: bold 100% helvetica; 
    316 background-color: transparent; 
    317 /*text-shadow: 0px 1px 1px #ffffff;*/ 
    318 border: none; 
    319 } 
    320 form dd{ 
    321 margin:0; 
    322 background-color: rgba(255,255,255,0.3); 
    323 color: #999999; 
    324 list-style-type: none; 
    325 padding: 10px 7px; 
    326 } 
    327  
    328 body, p, 
    329 table, thead, tbody, th, td { 
    330 word-break: break-all; 
    331 } 
    332 table, thead, tbody { 
    333 white-space: normal; 
    334 overflow: hidden; 
    335 } 
    336  
    337 /* プライバシーポリシー 
    338 ----------------------------------------------- */ 
    339 ol { 
    340 padding-start:0; 
    341 -o-padding-start:0;  
    342 -moz-padding-start:0; 
    343 -webkit-padding-start:0; 
    344 margin: 1em 3.13%; 
    345 } 
    346 ol > li.privacy_ol{ 
    347 margin: 1em; 
    348 } 
    349 ol > li.privacy_ol > strong{ 
    350 color:#4D576B; 
    351 font: bold 100% helvetica; 
    352 text-shadow: 0px 1px 1px #ffffff; 
    353 line-height: 2em; 
    354 } 
    355  
    356 /* 特定商取引に基づく表記 
    357 ----------------------------------------------- */ 
    358 #undercolumn_order dl{ 
    359 margin: 0; 
    360 } 
    361 #undercolumn_order dt{ 
    362 color:#4D576B; 
    363 font: bold 100% helvetica; 
    364 text-shadow: 0px 1px 1px #ffffff; 
    365 line-height: 2em; 
    366 } 
    367 #undercolumn_order dd, 
    368 #undercolumn_order ul { 
    369 padding-start:0; 
    370 -o-padding-start:0;  
    371 -moz-padding-start:0; 
    372 -webkit-padding-start:0; 
    373 margin: 0 3.13%; 
    374 } 
    375  
    376 /* マイページ 
    377 ----------------------------------------------- */ 
    378 #welcome-message { 
    379 color: #4D576B; 
    380 text-shadow: 0px 1px 1px #ffffff; 
    381 } 
    382 .your-point { 
    383 display: inline-block; 
    384 padding: 0.1em; 
    385 text-align: right; 
    386 color: #ffffff; 
    387 width: 100%; 
    388 background-color: rgba(0,0,0,0.3); 
    389 margin-bottom: 5px; 
    390 } 
    391 .your-point em { 
    392 text-shadow: 0 0 2px #ffffff; 
    393 } 
    394 #btn-mypagetop { 
    395 width: 100%; 
    396 text-align: left; 
    397 -webkit-border-radius: 8px; 
    398 background: #ffffff url(../img/common/chevron.png) no-repeat right center; 
    399 border: solid 1px #cccccc; 
    400 margin: 10px 0; 
    401 } 
    402 #btn-mypagetop a { 
    403 display: inline-block; 
    404 margin: 7px 3.3%; 
    405 width: 93%; 
    406 color: black; 
    407 text-decoration: none; 
    408 font: bold 100% helvetica; 
    409 } 
    410  
    411 /* マイページ・購入履歴 
    412 ----------------------------------------------- */ 
    413 table[summary="購入履歴"] td:first-child { 
    414 width: 20%; 
     577padding:10px 0; 
     578} 
     579/*------------------------------------------------- 
     580検索バー 
     581----------------------------------------------- */ 
     582#search_area { 
     583padding: 10px; 
     584background: #E7E8E9; 
     585clear:both; 
    415586text-align: center; 
    416587} 
    417 table[summary="購入履歴"] tr[onclick] td:last-child { 
    418 background: #ffffff url(../img/common/chevron.png) no-repeat right center; 
    419 } 
    420 table[summary="お届け先の指定"] td:nth-child(2), 
    421 table[summary="購入履歴"] tr[onclick] td:last-child { 
    422 text-align: left; 
    423 } 
    424  
    425 /* 商品詳細・カート 
    426 ----------------------------------------------- */ 
    427 div#cartbtn_default { 
    428 text-align:center; 
    429 } 
    430  
    431 /*商品一覧ページ 
    432 -----------------------------------------------*/ 
    433 .navi li { 
    434 width:100%; 
    435 display:inline; 
    436 } 
    437  
    438 p.listcomment { 
    439 font-size:90%; 
    440 } 
    441  
    442 /*規約内容 
    443 -----------------------------------------------*/ 
    444 div#kiyaku_text { 
    445 padding:10px 0; 
    446 font-size:70%; 
    447 border-top-width: 1px; 
    448 border-right-width: 0px; 
    449 border-bottom-width: 1px; 
    450 border-left-width: 0px; 
    451 border-top-style: solid; 
    452 border-right-style: none; 
    453 border-bottom-style: solid; 
    454 border-left-style: none; 
    455 border-top-color: #cccccc; 
    456 border-right-color: #cccccc; 
    457 border-bottom-color: #cccccc; 
    458 border-left-color: #cccccc; 
    459 } 
     588/*jqm追記*/ 
     589#search_area .ui-input-search{ 
     590border-radius: 20px; 
     591-webkit-border-radius: 20px; 
     592-moz-border-radius: 20px; 
     593} 
  • branches/version-2_11-dev/html/user_data/packages/sphone/css/import.css

    r20764 r21052  
    11@charset "utf-8"; 
     2@import url("./set.css"); 
     3@import url("./common.css"); 
     4@import url("./products.css"); 
     5@import url("./contents.css"); 
     6@import url("./mypage.css"); 
     7@import url("./block.css"); 
     8@import url("./popup.css"); 
     9@import url("./button.css"); 
    210 
    3 @import url("./width.css"); 
    4  
    5 @import url("./common.css"); 
    6 @import url("./iphone.css"); 
    7  
    8 @import url("./button.css"); 
    9 @import url("./table.css"); 
    10  
    11 @import url("./wreckage.css"); 
    12  
    13 @import url("./top.css"); 
    14 @import url("./detail.css"); 
Note: See TracChangeset for help on using the changeset viewer.