Ignore:
Timestamp:
2011/08/01 19:03:34 (13 years ago)
Author:
468
Message:

#1413 スマートフォン版スタイルシート修正対応

File:
1 edited

Legend:

Unmodified
Added
Removed

  • branches/version-2_11-dev/html/user_data/packages/sphone/css/common.css

    r21081 r21093  
    22/* =================================================================== 
    33CSS information 
     4file name  :common.css 
    45style info :共通 
    56=================================================================== */ 
    … …  
    89----------------------------------------------- */ 
    910body { 
    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); 
     11background: #FFF; 
     12font-family: Helvetica, san-serif; 
     13line-height: 1.5; 
     14font-size: 14px; 
     15margin: 0; 
     16padding: 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); 
    2021} 
    2122/*----------------------------------------------- 
    2223リンク指定 
    2324----------------------------------------------- */ 
    24 a:link { 
    25     color: #324E85; 
    26     text-decoration: none; 
     25a:link{ 
     26color:#324E85; 
     27text-decoration: none; 
    2728} 
    2829a:visited { 
    29     color: #603E7D; 
    30     text-decoration: none; 
    31 } 
    32 a:hover { 
    33     text-decoration: none; 
    34     cursor: pointer; 
     30color: #603E7D; 
     31text-decoration: none; 
     32} 
     33a:hover{ 
     34text-decoration:none; 
     35cursor:pointer; 
    3536} 
    3637 
    3738/*右矢印リンクテキスト*/ 
     39.arrowRtxt{ 
     40display:inline; 
     41clear:both; 
     42margin:5px auto; 
     43padding-right:15px; 
     44background:url(../img/common/ico_arrowR.png) right center no-repeat; 
     45} 
     46@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    3847.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 { 
     48background: url(../img/common/ico_arrowR2.png) right center no-repeat; 
     49-webkit-background-size: 10px 15px; 
     50background-size: 10px 15px; 
     51} 
     52} 
     53div,li,p{ 
    5354-webkit-tap-highlight-color: rgba(0,0,0,0.50);} 
    5455/*----------------------------------------------- 
    … …  
    5657----------------------------------------------- */ 
    5758.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; 
     59content: ".";   
     60display: block;  
     61clear: both; 
     62height: 0; 
     63visibility: hidden; 
     64} 
     65ul:after{ 
     66content: ".";   
     67display: block; 
     68clear: both; 
     69height: 0; 
     70visibility: hidden; 
     71} 
     72dl:after{ 
     73content: ".";   
     74display: block; 
     75clear: both; 
     76height: 0; 
     77visibility: hidden; 
    7778} 
    7879/*----------------------------------------------- 
    7980汎用 
    8081----------------------------------------------- */ 
    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{ 
     83float:left; 
     84clear:left; 
     85} 
     86.photoR{ 
     87float:right; 
     88clear:right; 
     89} 
     90.clear{ 
     91clear:both; 
     92} 
     93.inner{ 
     94padding:10px; 
     95} 
     96.intro{ 
     97padding:5px 10px 10px; 
     98font-weight:bold; 
     99} 
     100.intro p{ 
     101line-height:1.3; 
    98102} 
    99103.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; 
     104display: none; 
     105} 
     106.end{ 
     107border-bottom:none!important; 
     108} 
     109.top{ 
     110margin-bottom:8px!important; 
     111} 
     112.bg_head{ 
     113background:#EEE; 
    110114} 
    111115/*----------------------------------------------- 
    112116font 
    113117----------------------------------------------- */ 
    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; 
     118h2{ 
     119font-size:20px; 
     120} 
     121h3,h4,h5 { 
     122font-size: 100%; 
     123font-weight:bold; 
     124} 
     125em{ 
     126font-weight:bold; 
    123127} 
    124128.attention { 
    125     color: #CC0000; 
    126 } 
     129color: #CC0000; } 
    127130.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; 
     131font-size: 11px; 
     132font-weight:normal; } 
     133.fb{ 
     134font-size:14px; 
     135font-weight:bold; 
     136} 
     137.fn{ 
     138font-weight:normal; 
     139} 
     140.price{ 
     141color:#CC0000; 
     142font-weight:bold; 
     143} 
     144.attentionSt{ 
     145color:#CC0000; 
     146font-weight:bold; 
    142147} 
    143148/*------------------------------------------------- 
    … …  
    145150----------------------------------------------- */ 
    146151.frame_outer { 
    147     overflow: hidden; 
    148     width: 100%; 
    149     background: #FFF; 
    150 } 
    151 #main-content { 
     152overflow: hidden; 
     153width: 100%; 
     154background: #FFF; 
     155} 
     156#main-content{ 
    152157} 
    153158/*----------------------------------------------- 
    … …  
    155160----------------------------------------------- */ 
    156161h2.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; 
     162color: #FFF; 
     163font-size:20px; 
     164font-weight:bold; 
     165line-height:45px; 
     166text-align:center; 
     167text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
     168margin: 0 0 15px 0; 
     169padding:0 10px; 
     170background:#494E57; 
     171background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494e57 100%); 
     172background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6D7481),color-stop(0.8, #505765),color-stop(1, #494e57)); 
     173border-top:#868D99 1px solid; 
     174border-bottom:#C6C2C8 1px solid; 
     175-webkit-box-shadow: 1px 5px 5px #CCC; 
     176-moz-box-shadow: 1px 5px 5px #CCC; 
     177vertical-align: middle; 
     178white-space:nowrap; 
     179overflow:hidden; 
     180text-overflow: ellipsis; 
     181clear:both; 
    177182} 
    178183/*ボタンで展開するタイトルバー*/ 
    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{ 
     185color: #FFF; 
     186text-shadow: 0px -1px 1px rgba(0,0,0,0.3); 
     187line-height:45px; 
     188padding:0 10px; 
     189margin: 0 0 15px 0; 
     190background:#494e57; 
     191background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494e57 100%); 
     192background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6D7481),color-stop(0.8, #505765),color-stop(1, #494e57)); 
     193border-top: #74828B solid 1px; 
     194border-bottom:#74828B solid 1px; 
     195vertical-align: middle; 
     196clear:both; 
     197} 
     198.title_box h2{ 
     199font-size:20px; 
     200text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
     201width:85%; 
     202float:left; 
     203clear:left; 
     204white-space:nowrap; 
     205overflow:hidden; 
     206text-overflow: ellipsis; 
     207line-height:45px; 
     208vertical-align:middle; 
     209} 
     210.title_box h3{ 
     211width:85%; 
     212float:left; 
     213clear:left; 
     214font-size:18px; 
     215text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
     216white-space:nowrap; 
     217overflow:hidden; 
     218text-overflow: ellipsis; 
     219line-height:30px; 
     220vertical-align:middle; 
    216221} 
    217222/*サブタイトル*/ 
    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; 
     223h3.subtitle{ 
     224font-size:18px; 
     225color: #FFF; 
     226line-height:30px; 
     227text-shadow: 0px -1px 1px rgba(0,0,0,0.3); 
     228padding:0 10px; 
     229margin: 0 0 10px 0; 
     230background:#84949F; 
     231background: -moz-linear-gradient(center top, #96A4AF 0%,#84949F 100%); 
     232background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96A4AF),color-stop(1, #84949F)); 
     233border-top: #74828B solid 1px; 
     234border-bottom:#74828B solid 1px;vertical-align: middle; 
     235white-space:nowrap; 
     236overflow:hidden; 
     237text-overflow: ellipsis; 
     238clear:both; 
     239-webkit-box-shadow: 1px 0px 1px #FFF; 
     240-moz-box-shadow: 1px 0px 1px #FFF; 
     241position:relative; 
    237242} 
    238243/*ボタンで展開するサブタイトルバー*/ 
    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{ 
     245color: #FFF; 
     246line-height:30px; 
     247padding:0 10px; 
     248margin: 0 0 20px 0; 
     249background:#84949F; 
     250background: -moz-linear-gradient(center top, #96A4AF 0%,#84949F 100%); 
     251background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96A4AF),color-stop(1, #84949F)); 
     252border-top: #74828B solid 1px; 
     253border-bottom:#74828B solid 1px; 
     254vertical-align: middle; 
     255clear:both; 
     256position:relative; 
     257} 
     258.title_box_sub h2,.title_box_sub h3{ 
     259font-size:18px; 
     260text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 
     261width:85%; 
     262float:left; 
     263clear:left; 
     264white-space:nowrap; 
     265overflow:hidden; 
     266text-overflow: ellipsis; 
     267line-height:30px; 
     268vertical-align:middle; 
     269} 
     270.title_box_sub .b_expand{ 
     271width:22px; 
     272height:21px; 
     273float:right; 
     274clear:right; 
     275position:absolute; 
     276top:-6px; 
     277right:15px; 
     278z-index:2; 
     279padding:2px; 
    276280} 
    277281/*---------------------------------------------------- 
    … …  
    279283----------------------------------------------------*/ 
    280284input { 
    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%; 
     285margin:5px 0; 
     286padding:5px; 
     287-webkit-box-shadow:none; 
     288-moz-box-shadow:none; 
     289} 
     290input[type="text"]{ 
     291} 
     292input[type="number"]{ 
     293padding:5px 0; 
     294text-indent:5px; 
     295} 
     296input[type="number"]:first-child{ 
     297margin-right:-2px; 
     298} 
     299input[type="radio"],input[type="check"]{ 
     300vertical-align:bottom; 
     301padding:5px; 
     302line-height:1.5; 
     303margin-right:0.5em; 
     304} 
     305.text, .textarea, .dropdown{ 
     306padding:0.5em; 
     307margin:0; 
     308border:#4C4C4C solid 1px; 
     309background: #FFF; 
     310border-radius: 5px; 
     311-webkit-border-radius: 5px; 
     312-moz-border-radius: 5px; 
     313} 
     314.textarea{ 
     315width:97%; 
     316padding:0.5em; 
     317margin:0 0 10px 0; 
     318height:auto; 
     319min-height:70px; 
     320overflow:visible; 
     321} 
     322.cartin_quantity,.box_point{ 
     323width:2em; 
     324} 
     325.boxLong{ 
     326width:95%; 
     327} 
     328.boxMedium{ 
     329width:35%; 
    312330} 
    313331.boxShort { 
    314     width: 20%; 
    315 } 
    316 .boxHarf { 
    317     width: 41%; 
     332width: 22%; 
     333} 
     334.boxHarf{ 
     335width:42%; 
     336} 
     337 
     338select.boxLong{ 
     339width:100%; 
     340} 
     341select.boxMedium{ 
     342width:40%; 
     343} 
     344select.boxShort{ 
     345width:25%; 
     346} 
     347select.boxHarf{ 
     348width:46%; 
    318349} 
    319350/*---------------------------------------------------- 
    … …  
    324355------------------------------------------------ */ 
    325356header { 
    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; 
     357width:100%; 
     358background: #FFF; 
     359margin: 0 auto; 
     360padding:10px 0; 
     361clear:both; 
     362} 
     363header h1{ 
     364width:47%; 
     365height:25px; 
     366float:left; 
     367clear:left; 
     368padding-right:5px; 
     369margin:0 0 0 5px; 
     370max-width:150px; 
     371position:relative; 
     372} 
     373header h1 a{ 
     374display:block; 
     375padding:0; 
     376margin:0; 
     377cursor:pointer; 
     378vertical-align:middle; 
     379} 
     380header h1 img{ 
     381width:150px; 
     382height:25px; 
     383margin:-5px 0 0 0; 
     384padding:0; 
     385vertical-align:middle; 
    339386} 
    340387 
    341388/* ヘッダーナビ 
    342389------------------------------------------------ */ 
    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{ 
     391width:47%; 
     392padding:0 5px; 
     393float:right; 
     394} 
     395.header_navi{ 
     396font-size:11px; 
     397padding-top:5px; 
     398float:right; 
     399display:inline; 
     400text-align:right; 
     401line-height:1.2; 
     402} 
     403.header_navi ul{ 
     404display:inline; 
     405float:right; 
     406} 
     407.header_navi li{ 
     408float:left; 
     409margin:0; 
     410padding:8px 5px; 
     411border:#A9ABAD solid 1px; 
     412border-radius: 5px; 
     413-moz-border-radius: 5px; 
     414-webkit-border-radius: 5px; 
     415background:#FDFDfD; 
     416background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 
     417background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 
     418} 
     419.header_navi li:first-child{ 
     420margin-right:1em; 
     421} 
     422.header_navi p { 
     423line-height:1.3; 
     424} 
     425.popup_mypage{ 
     426font-size:small; 
     427width:auto; 
     428min-width:100px; 
     429padding:10px; 
     430display: none; 
     431position: absolute; 
     432line-height:1.2; 
     433top: 55px; 
     434z-index: 1; 
     435background:#FFF; 
     436background: -moz-linear-gradient(center top, #FDFDFD 0%,#E5E5E5 100%); 
     437background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #E5E5E5)); 
     438border:#CCC solid 1px; 
     439border-radius: 5px; 
     440-webkit-border-radius: 5px; 
     441-moz-border-radius: 5px; 
     442} 
     443.popup_mypage p:first-child{ 
     444line-height:1.3; 
     445margin-bottom:0.5em; 
     446}  
     447.popup_cart{ 
     448font-size:small; 
     449width:auto; 
     450min-width:100px; 
     451padding:10px; 
     452display: none; 
     453position: absolute; 
     454top: 55px; 
     455margin-right:5px; 
     456z-index: 1; 
     457background:#FFF; 
     458background: -moz-linear-gradient(center top, #FDFDFD 0%,#E5E5E5 100%); 
     459background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #E5E5E5)); 
     460border:#CCC solid 1px; 
     461border-radius: 5px; 
     462-webkit-border-radius: 5px; 
     463-moz-border-radius: 5px; 
     464} 
     465.popup_mypage a,.popup_cart a{ 
     466text-decoration:underline; 
     467} 
     468 
     469.popup_mypage h2,.popup_cart h2{ 
     470font-size:1.2em; 
     471} 
     472.quantity,.money{ 
     473font-size:14px; 
     474font-weight:bold; 
     475} 
     476.popup_cart hr.dashed:last-child{ 
     477display:none; 
     478} 
     479hr.dashed{ 
     480display:block; 
     481height:1px; 
     482border:0;    
     483border-top:#CCC dashed 1px; 
     484margin:0.2em 0; 
     485padding:0;} 
     486.free_money_area{ 
     487font-size:11px; 
     488} 
     489.dl_item{ 
     490margin-top:5px; 
    439491} 
    440492 
    441493/*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{ 
     495width:100%; 
     496margin-bottom:10px; 
     497-webkit-box-shadow: 1px 5px 5px #ccc; 
     498-moz-box-shadow: 1px 5px 5px #ccc; 
     499background:#494E57; 
     500background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494E57 100%); 
     501background: -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{ 
     504width:auto; 
     505margin:0 auto; 
     506clear:both; 
     507} 
     508.top_menu ul li{ 
     509width:33%; 
     510float:left; 
     511text-align:center; 
     512border-left:#747B83 solid 1px; 
     513border-right:#3D3D3D solid 1px; 
     514border-bottom:#141517 solid 1px; 
     515border-top:#A1A7AF solid 2px; 
     516} 
     517.top_menu ul li img{ 
     518margin:0 auto; 
     519display:block; 
     520clear:both; 
     521} 
     522.top_menu ul li a:link,.top_menu ul li a:visited{ 
     523color:#FFF; 
     524text-shadow: 0px 1px 1px rgba(0,0,0,1); 
     525padding:9px 0 8px 0; 
     526display:block; 
     527background:#494E57; 
     528background: -moz-linear-gradient(center top, #6D7481 10%,#505765 80%,#494E57 100%); 
     529background: -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{ 
     534color:#FFF; 
     535text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 
     536background:#5393C5; 
     537background: -moz-linear-gradient(center top, #5393C5 10%,#80B6E2 100%); 
     538background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393C5),color-stop(1, #80B6E2)); 
     539text-decoration:none; 
     540} 
     541.top_menu li:first-child{ 
     542border-left:none; 
     543} 
     544.top_menu li:last-child{ 
     545border-right:none; 
    495546} 
    496547/*------------------------------------------------- 
    … …  
    498549----------------------------------------------- */ 
    499550footer.global_footer { 
    500     padding: 0 0 10px 0; 
    501     background: #E6E6E6; 
    502     text-align: center; 
    503 } 
    504 .footer_utility { 
    505     background: #E6E6E6; 
     551padding:0 0 10px 0; 
     552background: #E6E6E6; 
     553text-align:center; 
     554} 
     555.footer_utility{ 
     556background: #E6E6E6; 
    506557} 
    507558/*フッター4列ボタン*/ 
    508559.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; 
     560width:100%; 
     561display:block; 
     562clear:both; 
     563padding:0.5em 0; 
     564-webkit-box-shadow: 1px 1px 1px #FFF; 
     565-moz-box-shadow: 1px 1px 1px #FFF; 
     566background:#272a2b; 
     567background: -moz-linear-gradient(center top, #808080 0%,#272a2b 100%); 
     568background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #808080),color-stop(1, #272a2b)); 
     569}  
     570.footer_navi ul{ 
     571width:100%; 
     572display:block; 
    522573} 
    523574.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; 
     575content: ".";  
     576display: block; 
     577clear: both; 
     578height:0; 
     579} 
     580.footer_navi li{ 
     581width:23%; 
     582height:49px; 
     583display:block; 
     584margin:0 1%; 
     585padding:0; 
     586float:left; 
     587background:#202223; 
     588background: -moz-linear-gradient(center top, #282A2A 0%,#202223 100%); 
     589background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #282A2A),color-stop(1, #202223)); 
     590text-align:center; 
     591color:#FFF; 
     592font-size:10px; 
     593border-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; 
     598position:relative; 
     599} 
     600.footer_status_area{ 
     601margin:0; 
     602padding:20px 10px 10px; 
     603text-align:center; 
     604background: #E6E6E6; 
     605} 
     606.footer_status_area p:last-child{ 
     607margin:10px auto; 
     608} 
     609.guide_area{ 
     610clear:both; 
     611margin:0; 
     612padding:10px 0 0 0; 
     613text-align:center; 
     614border-top:#999 solid 1px; 
     615} 
     616.guide_area p{ 
     617font-size:14px; 
     618font-weight:bold; 
     619line-height:2.4; 
     620} 
     621.guide_area a{ 
     622padding:0.5em 0.3em; 
     623margin:0.5em 0.1em; 
    573624} 
    574625@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    575     .guide_area p { 
    576         font-size: 12px; 
    577     } 
     626.guide_area p{ 
     627font-size:12px; 
     628} 
    578629} 
    579630footer.global_footer p.copyright { 
    580     margin: 0; 
    581     text-align: center; 
    582     padding: 10px 0; 
     631margin: 0; 
     632text-align: center; 
     633padding:10px 0; 
    583634} 
    584635/*------------------------------------------------- 
    … …  
    586637----------------------------------------------- */ 
    587638#search_area { 
    588     padding: 10px; 
    589     background: #E7E8E9; 
    590     clear: both; 
    591     text-align: center; 
     639padding: 10px; 
     640background: #E7E8E9; 
     641clear:both; 
     642text-align: center; 
    592643} 
    593644/*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{ 
     646border-radius: 20px; 
     647-webkit-border-radius: 20px; 
     648-moz-border-radius: 20px; 
     649border:#CCC solid 1px; 
     650} 
Note: See TracChangeset for help on using the changeset viewer.