source: branches/version-2_5-dev/html/user_data/packages/sphone/css/common.css @ 20566

@charset "utf-8";

/* body
----------------------------------------------- */
body {
    background: rgb(197,204,211) url(../img/common/stripes.png);
    background-position: 50% 0% fixed;
    font-family: helvetica, Osaka;
    font-size:small;
    margin: 0px 3.13% 10px;
    padding: 0px;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(51,102,204,0.70);
    max-width: 100%;
}

/* HTML default
----------------------------------------------- */
a {
    color: #5B87A4;
    text-decoration: none;
}
form {
    margin: 0;
    padding: 0;
}
table,img,p {
    border: 0;
}
em {
    font-weight: bold;
    font-style: normal;
    color: #C00;
}
hr {
    display: none;
}
p {
    margin: 0 0 1em;
    padding: 0;
}
li {
    list-style-type: none;
}
img {
    vertical-align: bottom;
}
.hidden {
    display: none;
}
br.clear {
    clear: both;
    display: none;
    font-size: 0px;
    line-height: 0%;
    height: 0px
}

/* クリアフィックス
----------------------------------------------- */
#block-login:after,
.block-center:after,
.listarea:after,
.recomendblock > div 
.whoboughtblock > div {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* font
----------------------------------------------- */
h1,h2,h3,h4,h5 {
    font-size: 100%;
    line-height: 150%;
}
.price { color: #ff0000; font-weight: bold; }
.attention { color: #ff0000; }
.mini { font-size: 80%; }

/* wrapper
----------------------------------------------- */
div#wrapper {
    margin: 0 auto;
    padding: 0;
    text-align: left;
    background: #FFFFFF;
    overflow: hidden;
}

/* 見出し (h2)
----------------------------------------------- */
h2 {
    color:#4D576B;
    font: bold 22px helvetica;
    background-color: transparent;
    text-shadow: 0px 1px 1px #ffffff;
    margin: 10px 0px;
}

/* 見出し (h3)
----------------------------------------------- */
#mycontentsarea h3 {
    color:#4D576B;
    font: bold 19px helvetica;
    text-shadow: 0px 1px 1px #ffffff;
}

/* ナビゲーションバー・ページタイトル
----------------------------------------------- */
#navigation_bar,
h2.title,
.title-undercolumn,
.title-under02column,
#title-list,
.title-mypagecolumn,
#windowarea h2,
#pan + h2 {
    display: inline-block;
    width: 106.8%;
    margin: 0 0 1em -3.4%;
    color: #ffffff;
    text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
    font: bold 17px helvetica;
    padding: 0.45em 0;
    background-color: #333332;
    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)));
    border-top: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(0,0,0,1);
    text-align:center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ページタイトル
----------------------------------------------- */
#navigation_bar > h2{
    font: bold 17px helvetica;
    color: #ffffff;
    vertical-align: middle;
    text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
    margin: 0;
    display: inline-block;
    max-width: 65%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}

/* header
----------------------------------------------- */
/* information
----------------------------------------------- */
/* navigation
----------------------------------------------- */
/* フレーム
----------------------------------------------- */
/* contents
----------------------------------------------- */

/* footer
----------------------------------------------- */
#pagetop {
    width: 100%;
    margin: 25px 0 0;
    text-align: right;
}
#pagetop a{
    color:#4D576B;
    font: bold 13px helvetica;
    text-shadow: 0px 1px 1px #ffffff;
    text-decoration: underline;
}
div#footer {
    margin: 0;
    padding: 0;
    text-align: center;
}

/* footer information
----------------------------------------------- */
#footer-menu {
    text-align: left;
    font: bold 15px helvetica;
}
#footer-menu li{
    background: #ffffff url(../img/common/chevron.png) no-repeat right center;
}
#footer-navi {
    float:left;
    list-style:none outside none;
    margin: 0 auto 4px;
    padding: 0 0 0 5px;
    text-align:center;
    width: 100%;
    border: none;
    background-color: transparent;
}
#footer-navi > li{
    display: inline;
    color:#4D576B;
    font: bold 12px helvetica;
    background-color: transparent;
    text-shadow: 0px 1px 1px #ffffff;
    border: none;
    border-right: 1px dotted #999999;
    -webkit-border-radius: 0;
    line-height: 1em;
    margin: 0;
    padding: 0;
}
#footer-navi > li:last-child{
    border-right: none;
}
#footer-navi > li > a {
    margin: 0;
    padding: 0;
    display: inline;
    color:#4D576B;
}
#copyright {
    margin: 7px 0px;
    color: #4D576B;
    font: bold 17px helvetica;
    text-shadow: 0px 1px 1px #ffffff;
    text-align: center;
}
#copyright a{
    color: #4D576B;
    text-decoration: under-line;
}

/* ニュース
----------------------------------------------- */
/* おすすめ
----------------------------------------------- */

/* panlist
----------------------------------------------- */
div#pan {
    display: none;
}

/* error
----------------------------------------*/

div .error {
    text-align:center;
    padding: 30px 0;
}


/* フォーム
----------------------------------------------- */
input[size="40"] {
    width: 50%;
}
input[type="password"] {
    width: 50%;
}
input[type="tel"] {
    width: 3em;
}
input, tr, th, td {
    max-width: 93.8%;
}
input {
    font-size: small;
}
textarea{
    font-size: small;
    width: 95%;
}
form dl{
    font: bold small helvetica;
    margin: 10px 0;
}
form dt{
    margin: 5px 0;
    color:#4D576B;
    font: bold small helvetica;
    background-color: transparent;
    text-shadow: 0px 1px 1px #ffffff;
    border: none;
}
form dd{
    margin:0;
    background-color: rgba(255,255,255,0.3);
    color: #999999;
    border: 2px dotted #B4B4B4;
    list-style-type: none;
    padding: 10px 7px;
    -webkit-border-radius: 8px;
}

body, p,
table, thead, tbody, th, td {
    word-break: break-all;
}
table, thead, tbody {
    white-space: normal;
    overflow: hidden;
}

/* プライバシーポリシー
----------------------------------------------- */
ol {
    padding-start:0;
    -o-padding-start:0; 
    -moz-padding-start:0;
    -webkit-padding-start:0;
    margin: 1em 3.13%;
}
ol > li.privacy_ol{
    margin: 1em;
}
ol > li.privacy_ol > strong{
    color:#4D576B;
    font: bold 17px helvetica;
    text-shadow: 0px 1px 1px #ffffff;
    line-height: 2em;
}

/* 特定商取引に基づく表記
----------------------------------------------- */
#undercolumn_order dl{
    margin: 0;
}
#undercolumn_order dt{
    color:#4D576B;
    font: bold 17px helvetica;
    text-shadow: 0px 1px 1px #ffffff;
    line-height: 2em;
}
#undercolumn_order dd,
#undercolumn_order ul {
    padding-start:0;
    -o-padding-start:0; 
    -moz-padding-start:0;
    -webkit-padding-start:0;
    margin: 0 3.13%;
}

/* マイページ
----------------------------------------------- */
#welcome-message {
    color: #4D576B;
    text-shadow: 0px 1px 1px #ffffff;
}
.your-point {
    display: inline-block;
    padding: 0.1em;
    text-align: right;
    color: #ffffff;
    width: 100%;
    background-color: rgba(0,0,0,0.3);
    margin-bottom: 5px;
}
.your-point em {
    text-shadow: 0 0 2px #ffffff;
}
#btn-mypagetop {
    width: 100%;
    text-align: left;
    -webkit-border-radius: 8px;
    background: #ffffff url(../img/common/chevron.png) no-repeat right center;
    border: solid 1px #cccccc;
    margin: 10px 0;
}
#btn-mypagetop a {
    display: inline-block;
    margin: 7px 3.3%;
    width: 93%;
    color: black;
    text-decoration: none;
    font: bold 15px helvetica;
}

/* マイページ・購入履歴
----------------------------------------------- */
table[summary="購入履歴"] td:first-child {
    width: 20%;
    text-align: center;
}
table[summary="購入履歴"] tr[onclick] td:last-child {
    background: #ffffff url(../img/common/chevron.png) no-repeat right center;
}
table[summary="お届け先の指定"] td:nth-child(2),
table[summary="購入履歴"] tr[onclick] td:last-child {
    text-align: left;
}

/* 商品詳細
----------------------------------------------- */