@charset "utf-8";

/************************************************
 ブラウザリセット
************************************************ */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
}

table,
caption,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0px;
    empty-cells: show;
    text-align: left;
    font-weight: normal;
}

a img,
iframe {
    border: none;
}

ol,
ul,
li {
    list-style: none;
}

input,
textarea,
select,
button {
    font-size: 100%;
    font-family: inherit;
}

/************************************************
 共通設定
************************************************ */

body {
    color: #666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #f5f5f5;
    font-size: 72.5%;
    line-height: 150%;
    letter-spacing: 0.1em;
}

/* 写真 */

img.picture {
    border: 1px solid #ccc;
}

/* ==============================================
 フレーム
=============================================== */
/* 全体を包括 */

.frame_outer {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

/* コンテンツ */

#container {
    margin: 0 auto;
    padding: 0 0 30px;
    width: 980px;
    background: #fff;
    text-align: left;
}

/* ==============================================
 カラム指定
=============================================== */

/* メイン部
----------------------------------------------- */

#main_column {
    padding: 10px 0 0;

    /* 1カラム時 */
    &.colnum1 {
        margin: 0 auto;
        width: 80%;
    }

    /* 2カラム時 (共通) */
    &.colnum2 {
        width: 78%;

        /* 2カラム時 (メイン部が左) */
        &.left {
            padding-left: 1.5%;
            float: left;
        }

        /* 2カラム時 (メイン部が右) */
        &.right {
            padding-right: 1.5%;
            float: right;
        }
    }

    /* 3カラム時 */
    &.colnum3 {
        padding-left: 0.5%;
        width: 59%;
        float: left;
    }
}

/* サイドカラム
----------------------------------------------- */

.side_column {
    padding: 10px 0 0;
}

#leftcolumn {
    float: left;
    width: 20%;
}

#rightcolumn {
    float: right;
    width: 20%;
}

/* 他
----------------------------------------------- */
/* ヘッダーとフッターの上下 */

#topcolumn,
#bottomcolumn,
#footerbottomcolumn {
    margin: 0px;
    background: #fff;
    text-align: left;
    clear: both;
}

/* 下層コンテンツ */

#undercolumn {
    width: 100%;
    margin: 0 0 30px 0;
}

/* ==============================================
 ユーティリティ
=============================================== */
/* フロート回り込み解除
----------------------------------------------- */

.clearfix {
    &:after {
        display: block;
        clear: both;
        height: 0px;
        line-height: 0px;
        visibility: hidden;
        content: ".";
    }
}

.clear {
    clear: both;
}

/* リンク指定
----------------------------------------------- */

a {

    &:link,
    &:visited {
        color: #39c;
        text-decoration: none;
    }

    &:link:hover,
    &[href]:hover {
        color: #f60;
        text-decoration: underline;
    }
}

/* フォント
----------------------------------------------- */

h1,
h2,
h3,
h4,
h5 {
    font-size: 100%;
    line-height: 150%;
}


.point {
    color: #f00;
    font-weight: bold;
}

.user_name {
    font-weight: bold;
}


.attention {
    color: #f00;
}

.attentionSt {
    color: #f00;
    font-weight: bold;
}

.st {
    font-weight: bold;
}

.mini {
    font-size: 90%;
}

/* 行揃え
----------------------------------------------- */

.alignC {
    text-align: center;
}

.alignR {
    text-align: right;
}

.alignL {
    text-align: left;
}


/* フォーム
----------------------------------------------- */

select {
    border: solid 1px #ccc;
}

input {

    &[type='text'],
    &[type='password'] {
        border: solid 1px #ccc;
        padding: 2px;
    }
}

.box40 {
    width: 40px;
}

.box60 {
    width: 60px;
}

.box100 {
    width: 100px;
}

.box120 {
    width: 120px;
}

.box140 {
    width: 140px;
}

.box145 {
    width: 145px;
}

.box150 {
    width: 150px;
}

.box240 {
    width: 240px;
}

.box300 {
    width: 300px;
}

.box320 {
    width: 320px;
}

.box350 {
    width: 350px;
}

.box380 {
    width: 380px;
}

/* フォームが縦に重なり合う場合に併用する余白 */
/* FIXME 簡素な単語は、単独で、込み入った指定に使用しない */

.top {
    margin-bottom: 5px;
}

/* タイトル
----------------------------------------------- */

h2.title {
    margin-bottom: 10px;
    padding: 8px;
    border-top: solid 1px #ebeced;
    color: #f60;
    background: none repeat-x left bottom;
    background-color: #fef3d8;
    font-size: 170%;
}

#main_column .sub_area h3,
#undercolumn_shopping h3,
#undercolumn_cart h3 {
    margin: 0 0 10px 0;
    padding: 5px 0 10px;
    color: #f60;
    background: none repeat-x left bottom;
    font-size: 120%;
}



/* ==============================================
 ヘッダー
=============================================== */
/* レイアウト
----------------------------------------------- */

#header_wrap {
    border-top: solid 3px #f90;
    min-height: 82px;
    background: none repeat-x bottom #fffaf0;
}

#header {
    margin: auto;
    width: 980px;
}

#header_utility {
    float: right;
    width: 580px;
}

#errorHeader {
    color: #F00;
    font-weight: bold;
    font-size: 12px;
    background-color: #FEB;
    text-align: center;
    padding: 5px;
}

/* ロゴ
----------------------------------------------- */

#logo_area {
    padding-left: 10px;
    float: left;
    width: 390px;
    text-align: left;
}

#site_description {
    font-size: 90%;
}

/* ヘッダーナビ
----------------------------------------------- */

#header_navi {
    float: right;
    width: 409px;
    height: 38px;

    ul li {
        display: block;
        float: left;

    }
}

/* ==============================================
 フッター
=============================================== */

#footer_wrap {
    margin: 0 auto;
    width: 980px;
    height: 80px;
    background: #fff;
}

#footer {
    margin: auto;
    padding-top: 10px;
    border-top: solid 1px #ccc;
    width: 950px;
}

#pagetop {
    width: 210px;
    float: right;
    text-align: right;
}

#copyright {
    width: 740px;
    float: left;
    text-align: left;
    font-size: 97%;
}

/* ==============================================
 パーツ
=============================================== */
/* ボタン
----------------------------------------------- */

.btn_area {
    margin-top: 10px;
    width: 100%;
    text-align: center;

    li {
        padding-right: 10px;
        display: inline;
    }
}

/* 完了メッセージ
----------------------------------------------- */

div {
    &#complete_area {
        margin-bottom: 20px;

        .message {
            margin-bottom: 20px;
            line-height: 150%;
            font-weight: bold;
            font-size: 120%;
        }
    }



    &#complete_area .shop_information {
        margin-top: 40px;
        padding: 20px 0 0 0;
        border-top: solid 1px #ccc;

        .name {
            margin-bottom: 10px;
            font-weight: bold;
            font-size: 140%;
        }
    }
}

/************************************************
 各ページコンテンツ用
************************************************ */
/* ==============================================
▼TOP
=============================================== */
/* メインイメージ
----------------------------------------------- */

#main_image {
    margin-bottom: 10px;
    text-align: center;
}

/* ==============================================
▼下層
=============================================== */
/* ==============================================
▼ガイド
=============================================== */
/* ◎◎について
----------------------------------------------- */
#undercolumn_aboutus {
}

/* 特定商取引法
----------------------------------------------- */
#undercolumn_order {
}

/* お問い合わせ
----------------------------------------------- */
#undercolumn_contact {
    margin: 0 auto;
    width: 100%;
}

.zipimg img {
    vertical-align: middle;
}

/* ==============================================
▼エラー
=============================================== */

#undercolumn_error .message_area {
    width: 80%;
    margin: 30px auto;
    padding: 30px;
    border: 1px solid #ccc;
    text-align: center;

    .error {
        padding: 120px 0;
    }
}

/* ==============================================
▼検索結果
=============================================== */

p.condition_area {
    margin: 0 auto;
    padding: 5px;
    border: solid 1px #333;
    width: 566px;
}

/************************************************
 tables
************************************************ */
/* デフォルトテーブル
----------------------------------------------- */

table {
    margin: 15px auto 20px auto;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    width: 100%;
    border-collapse: collapse;
    text-align: left;

    th {
        padding: 8px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        color: #333;
        background-color: #f0f0f0;
        font-weight: normal;
    }

    td {
        padding: 8px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
}

/* 見出し
----------------------------------------------- */

#undercolumn_shopping table {
    th[scope=col] {
        text-align: center;
    }

    &.delivname th {
        width: 155px;
    }
}

/* MYページ */



/* その他
----------------------------------------------- */

table select {
    margin-bottom: 7px;
    border: solid 1px #ccc;
}

/************************************************
 ブロック用
************************************************ */
/*** 目次 ***

▼ブロック共通
リスト
タイトル
ヘッダー上、フッター下のブロックエリア

▼各機能ブロックの指定
-新着情報
-ガイドリンク
-ログイン（サイド用）
-検索
-カレンダー
*/

/* ==============================================
ブロック共通
    * #container から指定することで、ヘッダー・フッターには適用していない。
/* ============================================= */

.side_column {
    overflow-x: hidden;
    /* IE6 表示乱れ防止 */

    .block_body {
        border: solid 1px #ccc;
        border-top: none;
    }
}

#main_column .block_body {
    border: solid 1px #ccc;
    border-top: none;
}

.side_column .block_body .box {
    border: solid 1px #ccc;
    width: 145px;
}

/* 外枠
----------------------------------------------- */

#container {
    .block_outer {
        /* #container の背景色を欠けさせないため敢えて padding */
        padding: 0 15px 10px;
    }

    #main_column .block_outer {
        padding: 0 0 20px;
    }

    .side_column .block_outer {
        padding: 0 7% 10px;
    }

    /* リスト
    ----------------------------------------------- */
    /* ログイン 検索条件 */
    .block_outer .block_body dl.formlist {
        margin-bottom: 8px;

        dd {
            margin-bottom: 5px;
        }

        dt {
            margin-bottom: 3px;
            padding-left: 15px;
            background: none no-repeat left;
            font-size: 90%;
        }

        span {
            vertical-align: top;
        }
    }
}


/* タイトル
----------------------------------------------- */

h2 {
    /* タイトルの背景 白 */

    #search_area & {
        padding: 5px 0 8px 10px;
        border-style: solid;
        border-color: #f90 #ccc #ccc;
        border-width: 1px 1px 0;
        background: none repeat-x left bottom;
        font-size: 14px;
    }

    /* タイトルの背景 オレンジ */

    #news_area & {
        padding: 5px 0 8px 10px;
        border-style: solid;
        border-color: #f90 #ccc #ccc;
        border-width: 1px 1px 0;
        background: none repeat-x left bottom #fef3d8;
    }
}

/* ***********************************************
▼各機能ブロックの指定
/*********************************************** */

/* ===============================================
▼新着情報
=============================================== */
#news_area {
    .news_contents {
        padding: 10px;
        max-height: 260px;
        height: auto !important;

        /* hack? */
        height: 260px;

        /* hack? */
        overflow: auto;
        overflow-y: scroll;
    }

    dl.newslist {
        background: none repeat-x bottom;

        &:last-child {
            background: none;
        }

        dt {
            margin-bottom: 5px;
        }

        dd {
            margin-bottom: 10px;
            padding-bottom: 10px;
        }
    }
}

/* ===============================================
▼ガイドリンク
=============================================== */

#guide_area {
    border: none;

    li {
        margin-bottom: 5px;
        letter-spacing: -0.05em;
    }
}

ul.button_like li {
    margin: 0;
    padding: 0 0 1px 0;
    background: none bottom repeat-x;

    a {
        margin: 0;
        padding: 10px 15px 10px 10px;
        border: 1px solid;
        border-bottom: none;
        border-color: #ccc;
        display: block;
        background: none no-repeat right;
        text-decoration: none;
        outline: none;
    }
}

/************************************************
 インヘッダーブロック
************************************************ */

#headerInternalColumn {
    margin-top: 5px;
    float: right;
    width: 520px;
    height: 35px;
}

/* ログイン（ヘッダー用）
----------------------------------------------- */



/* ***********************************************
追加ブロック
************************************************ */
/* 共通
----------------------------------------------- */

#container .block_outer #banner_area .block_body {
    border: none;
}

/* 【メイン】バナーエリア_02
----------------------------------------------- */

#main_column .block_outer #banner_area .block_body ul {
    width: 100%;

    li {
        float: left;

        &.sub_01 {
            padding-right: 8px;
        }
    }
}

/* 【サイド】バナーエリア_01
----------------------------------------------- */
/* 【サイド】バナーエリア_02
----------------------------------------------- */

#leftcolumn .block_outer #banner_area .block_body ul li,
#rightcolumn .block_outer #banner_area .block_body ul li {
    margin-bottom: 8px;
}

/************************************************
 印刷用
************************************************ */

@media print {
    body {
        zoom: 75%;
    }
}