@charset "utf-8";

/* +++++++++++++++++++++++++++++++

 purchase.css
購入導線

+++++++++++++++++++++++++++++++ */
/*
共通：レイアウト
-----------------------------------*/
header.purchase {
    border-bottom: 3px solid #de0010;
}
header.purchase .box_tel {
    float: right;
    margin-top: -10px;
    width: 240px;
    color: #4e4e4e;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
header.purchase .box_tel .tel {
    float: none;
    margin: 5px 0;
    padding: 0;
    border-radius: 4px;
    background: #e9e9e9;
    color :#222;
}
header.purchase .box_tel .tel:before {
    display: inline-block;
    width: 16px;
    height: 17px;
    margin-right: 5px;
    background: url(../images/common/ico_header_tel.png) no-repeat left center;
    content: " ";
    vertical-align: middle;
}
header.purchase .box_tel span {
    color :#222;
    font-size: 10px;
    font-weight: normal;
}

#purchase {
    width: 950px;
    margin: 0 auto;
}
main > #purchase { margin-top: 30px; }

#purchase .form {
    position: relative;
    margin-top: 20px;
}
#purchase .form + .form { margin-top: 40px; }

/*
共通：フロー
-----------------------------------*/
#flow {
    margin: 40px 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
#flow li {
    position: relative;
    display: inline-block;
    width: 120px;
    line-height: 1.1;
    vertical-align: top;
}
#flow li:after {
    position: absolute;
    top: 13px;
    left: -50%;
    display: block;
    width: 93px;
    height: 2px;
    margin-left: 12px;
    background: #d3d3d3;
    content: " ";
}
#flow li:first-child:after { width: 0; }
#flow i {
    display: block;
    width: 26px;
    height: 19px;
    margin: 0 auto 5px;
    padding: 4px 0 3px;
    border: 2px solid #f4f4f4;
    background: #f4f4f4;
    font-size: 16px;
    font-style: normal;
    line-height: 19px;
    text-align: center;
}
#flow .current i {
    border-color: #666;
    background :#fff;
    font-weight: bold;
}
#flow .entered i {
    border-color: #666;
    background :#666;
    color: #fff;
}

/*
共通：カートテーブル
-----------------------------------*/
.table_cart { width: 100%; }
.table_cart th {
    padding: 5px 0 4px;
    background: #d3d3d3;
    font-size: 11px;
    font-weight: normal;
    text-align: center;
    line-height: 1.2;
}
.table_cart td {
    padding: 10px 15px;
    border-bottom: 1px solid #d3d3d3;
    background: #f4f4f4;
}
.table_cart td.number {
    width: 20px;
    background: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}
.table_cart td.image { background: #fff; }
.table_cart .image { width: 60px; }
.table_cart td.code {
    width: 70px;
    background: #fff;
    font-size: 13px;
    text-align: center;
}
.table_cart td.item {
    width: 418px;
    padding: 10px 10px 9px;
    background: #fff;
}
.table_cart .code {
    margin: 0 0 5px;
    font-size: 10px;
}
.table_cart .name { margin: 0 0 10px; }
.table_cart .name a {
    color :#666;
    text-decoration: underline;
}
.table_cart .name a:hover { text-decoration: none; }
.table_cart .status {
    margin: 0;
    color: #e63a46;
    font-size: 11px;
    font-weight: bold;
}
.table_cart .icon {
    padding: 0px 0px 0px;
    height: 20px;
}
.table_cart .cmnt {
    margin: 0;
    font-size: 11px;
}
.table_cart .price,
.table_cart .sub_total {
    width: 70px;
    text-align: right;
}
.table_cart .option {
    width: 100px;
    color: #666;
    font-size: 11px;
    text-align: center;
}
.table_cart .kumiari {
    background:#e9e9e9;
}
.table_cart .option span {
    display: block;
    color: #222;
    font-size: 13px;
}
.table_cart .quantity {
    width: 50px;
    text-align: center;
}
.table_cart .quantity input {
    width: 32px;
    text-align: left;
}
.table_cart .sub_total { width: 80px; }
.table_cart .action { width: 28px;}

/* カートフッター*/
.footer_cart {
    padding: 5px;
    background: #e9e9e9;
    text-align: right;
}
.footer_cart p,
.footer_cart .button {
    display: inline-block;
    vertical-align: middle;
}

/*
共通：代金計算テーブル
-----------------------------------*/
.table_calc {
    width: 100%;
    margin-top: 20px;
    border-bottom: 2px solid #d3d3d3;
}
.table_calc th,
.table_calc td {
    border-top: 1px solid #fff;
    font-weight: normal;
    text-align: right;
}
.table_calc tr:first-child th,
.table_calc tr:first-child td { border-top: 2px solid #d3d3d3; }
.table_calc th {
    width: 760px;
    padding: 8px 20px 7px;
    background: #f4f4f4;
}
.table_calc td { padding: 8px 10px 7px; }
.table_calc .total {
    color: #e63a46;
    font-weight: bold;
}

.cart_notes {
    margin-top: 10px;
    padding: 10px;
    text-align: right;
}
.cart_notes p {
    display: inline-block;
    margin: 0;
}
.cart_notes p:before {
    display: inline-block;
    width: 19px;
    height: 14px;
    padding: 3px 0 2px;
    margin-right: 5px;
    border-radius: 50px;
    background: #e67e22;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 14px;
    content: "！";
}
.cart_caution {
    margin-top: 10px;
    padding: 10px;
    color: #e63a46;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
}
.cart_caution p {
    display: inline-block;
    margin: 0;
}

/*
共通：ボタン
-----------------------------------*/
#purchase .box_button {
    margin-top: 30px;
    text-align: center;
}
/* 削除ボタン */
.button_ico_delete {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px #a7a7a7;
    font-size: 0;
}
.button_ico_delete:after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 16px;
    height: 18px;
    margin: -9px 0 0 -8px;
    background: url(../images/purchase/sprite_icon.png) no-repeat left top;
    content: " ";
}
.button_ico_delete:hover {
    top: 1px;
    box-shadow: none;
}

/* 更新ボタン */
.button_update {
    padding-right: 38px;
    background: #666;
    box-shadow: 0 2px #393939;
    color: #fff;
    font-size: 11px;
    line-height: 13px;
}
.button_update:after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    width: 16px;
    height: 14px;
    margin-top: -7px;
    background: url(../images/purchase/sprite_icon.png) no-repeat -50px 0;
    content: " ";
}
.button_update:hover { background-color: #4e4e4e; }

/* 次へボタン */
.button_purchase {
    width: 450px;
    background: #e67e22;
    box-shadow: 0 2px #b3621b;
    color: #fff;
}
.button_purchase:after {
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-top: -12px;
    background: #fff url(../images/common/sprite_arrow.png) no-repeat -192px  -145px;
    content: " ";
}
.button_purchase:hover { background-color: #d96b0b; }

/* 戻るボタン */
.button_back {
    display: block;
    margin: 15px auto 0;
    padding: 10px 0 9px;
    font-size: 11px;
}
.button_back:after {
    position: absolute;
    top: 50%;
    left: 13px;
    display: block;
    width: 6px;
    height: 10px;
    margin-top: -5px;
    background: url(../images/common/sprite_arrow.png) no-repeat -250px top;
    content: " ";
}

/* 修正ボタン */
.button_modify {
    display: block;
    margin: 15px auto 0;
    padding: 5px 20px 4px 10px;
    font-size: 11px;
}
.button_modify:after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    width: 6px;
    height: 10px;
    margin-top: -5px;
    background: url(../images/common/sprite_arrow.png) no-repeat -200px top;
    content: " ";
}



/*
カートトップ
-----------------------------------*/
/* オプション選択 */
#option_select {
    position: relative;
    margin-top: 30px;
}
#option_select .title {
    margin: 0 0 10px;
    font-size: 14px;
}
#option_select .icon { margin-right: 5px; }
#option_select a {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 15px;
    font-size: 10px;
}
#option_select a:after {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 6px;
    height: 10px;
    margin-top: -5px;
    background: url(../images/common/sprite_arrow.png) no-repeat -200px 0;
    content: " ";
}

#option_select .inner {
    padding: 10px 0;
    background: #f4f4f4;
    text-align: center;
}
#option_select li { margin-top: 0; }
#option_select p { margin: 0; }

/* 注意事項 */
.list_notes {
    margin-top: 30px;
    border-bottom: 2px solid #d3d3d3;
}
.list_notes dt {
    margin: 0;
    padding: 20px 15px 15px;
    border-top: 1px solid #d3d3d3;
    color: #e84d58;
    font-size: 15px;
    font-weight: bold;
}
.list_notes dd {
    margin: 0;
    padding: 0 15px 20px;
}
.list_notes dt:first-child { border-top-width: 2px; }
.list_notes dd {
    margin: 0;
    padding: 0 15px 20px;
}

/* 見積もり発行 */
.box_estimate {
    position: relative;
    margin-top: 30px;
    background: #f4f4f4;
    margin-bottom: 30px;
}
.box_estimate:before {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    display: block;
    margin-left: -1px;
    border-left: 2px dotted #ccc;
    content: " ";
}
.box_estimate .inner {
    float: left;
    width: 435px;
    padding: 20px;
    text-align: center;
}
.box_estimate p { margin: 30px 0; }

.box_estimate input[type=text] {
    width: 282px;
    margin-bottom: 10px;
    border-color :#a7a7a7;
}
.box_estimate .button { margin-bottom: 30px; }

/*
見積書の発行
-----------------------------------*/
.table_form iframe {
    width: 100%;
    height: 265px;
    margin: 10px 0;
    border: 1px solid #d3d3d3;
    background :#fff;
}

/*
お支払い方法
-----------------------------------*/
.box_payment {
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.box_payment .type_radio {
    margin: 0;
    border-radius: 4px 4px 0 0;
}
.box_payment .type_radio.disabled {
    border-color: #e9e9e9;
    background: #f4f4f4;
    color: #9a9a9a;
}
.box_payment .type_radio .supplement {
    margin-left: 10px;
    font-size: 11px;
}
.box_payment .type_radio .campaign {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 5px 0;
    border: 1px solid #de0010;
    background: #fff;
    color: #e53340;
    font-size: 10px;
}
.box_payment .acc_panel { padding: 13px; }
.box_payment .acc_panel > .image { margin: 0 0 20px; }

.box_payment .guide .image {
    float: right;
    width: 300px;
    text-align: center;
}

.txt_point { color: #e63a46; }

.box_payment  .table_form { margin-bottom: 10px; }
.box_payment  .table_form:last-child { margin-bottom: 0; }
.box_payment .acc_panel th { width: 150px; }

.bank_info {
    margin-bottom: 20px;
    padding: 15px;
    background: #f4f4f4;
}
.bank_info p {
    margin: 0;
    font-weight: bold;
}
.bank_info p:first-child {
    margin: 0 0 10px;
    font-size:  14px;
}

/*
お届け希望日
-----------------------------------*/
.month {
    position: relative;
    width: 400px;
    margin: 30px auto;
    border: 1px solid #d3d3d3;
}
.month p {
    position: absolute;
    left: -115px;
    width: 85px;
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
}
.month p strong { font-size: 32px; }

.table_calendar {
    width: 100%;
}
.table_calendar th {
    padding: 10px 0;
    border: 1px solid #d3d3d3;
    background: #d3d3d3;
    font-size: 13px;
    font-weight: normal;
    text-align: center;
}
.table_calendar td {
    width: 14.2%;
    height: 36px;
    padding: 0;
    border: 1px solid #d3d3d3;
    background :#f4f4f4;
    font:normal 13px/1.4 helvetica, arial, sans-serif, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro";
}
.table_calendar label {
    display: block;
    height: 20px;
    padding: 7px 0 5px;
    border: 2px solid #fff;
    background: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 20px;
}
.table_calendar label input {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height 100%;
}
.table_calendar .disabled {
    border-color :#f4f4f4;
    background: #f4f4f4;
    color: #9a9a9a;
}
.table_calendar .checked {
    border-color :#e84d58;
    background: #fce6e8;
    color: #e84d58;
    font-weight: bold;
}

.month + .box_notes { text-align: center; }

/*
ご注文内容確認
-----------------------------------*/
.box_confirm {
    position: relative;
    margin: 20px 0 0;
    padding: 15px 15px 13px;
    border: 1px solid #d3d3d3;
    font-size: 14px;
    font-weight: bold;
}
.box_confirm + .table_form { margin-top: 20px; }

.form .button_modify {
    position: absolute;
    top: 13px;
    right: 15px;
    margin: 0;
}
.form .button_modify:hover { top: 15px; }
.form .box_rule { margin-top: -20px; }
.form .box_rule .button_purchase { width: 300px; }

/*
お支払い方法情報入力
-----------------------------------*/
.orico_guide .inner {
    float: left;
    width: 50%;
}
.orico_guide .inner .image {
    margin: 0 20px;
    padding: 10px 0;
    border: 1px solid #d3d3d3;
    text-align: center;
}
.orico_guide .inner .credit { padding: 78px 20px; }
.orico_guide .inner p {
    margin: 10px 20px  0;
}

/*
ご注文完了
-----------------------------------*/
.complete .headline_image01 { margin-bottom: 40px; }
.complete > p {
    margin: 40px 0 20px;
    font-size: 14px;
    text-align: center;
}

/* 注文番号 */
#order_number,
#order_bank {
    margin-bottom: 30px;
    padding: 20px;
    border: 10px solid #d3d3d3;
}
#order_number .number {
    margin: 10px 0 30px;
    font-size: 14px;
    text-align: center;
}
#order_number .number strong { font-size: 20px; }

#order_number .inquiry {
    position: relative;
    border-top: 2px dotted #d3d3d3;
}
#order_number .inquiry p { margin: 15px 0 0; }
#order_number .inquiry a {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 300px;
}
#order_number .inquiry a:hover { top: 17px; }
#order_number .inquiry a:after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    width: 6px;
    height: 10px;
    margin-top: -5px;
    background: url(../images/common/sprite_arrow.png) no-repeat -200px -200px;
    content: " ";
}

/* 銀行振込 */
#order_bank .title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: bold;
}
#order_bank th,
#order_bank td {
    font-size: 15px;
    font-weight: bold;
}
#order_bank th { width: 150px; }
#order_bank th span { font-size: 12px; }
#order_bank p { margin: 10px 0 0; }

/* 楽天決済 */
#order_rakuten {
    margin: 20px 0 30px;
    text-align: center;
}

/* コンビニ支払い */
#order_convini .inner {
    position: relative;
    float: left;
    width: 300px;
    margin-left: 25px;
}
#order_convini .heading03 + .inner { margin-left: 0; }

#order_convini .inner:before {
    position: absolute;
    top: 120px;
    left: -18px;
    display: block;
    border-color: transparent transparent transparent #ccc;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    content: " ";
}
#order_convini .heading03 + .inner:before { border: none; }

#order_convini .inner p {
    margin: 10px 10px 0;
}

#order_convini .list_pickup li {
    float: left;
    width: 465px;
    margin: 20px 0 0 20px;
}
#order_convini .list_pickup li:nth-child(odd) {
    clear: left;
    margin-left: 0;
}
#order_convini .list_pickup li:nth-child(-n+2) { margin-top: 0; }

#order_convini .list_pickup .title {
    margin: 0;
    padding: 10px 0;
    background: #e9e9e9;
    text-align: center;
}
#order_convini .list_pickup .description { margin: 5px 10px 0; }




/* お届け日について */
#shipping {
    padding: 15px 10px;
    border: 1px solid #ffbf00;
    background: #fff9e6;
}
#shipping .title {
    margin: 0 0 10px;
    font-size: 15px;
}
#shipping .title:before {
    display: inline-block;
    width: 19px;
    height: 14px;
    padding: 3px 0 2px;
    margin-right: 5px;
    border-radius: 50px;
    background: #e67e22;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 14px;
    content: "！";
}

#shipping .inner {
    margin: 0;
    padding: 15px;
    background :#fff;
}

#thanks {
    margin: 60px 0 0;
    height: 328px;
    background: url(../images/purchase/bg_thanks.png) no-repeat left top;
}
#thanks .inner {
    width: 356px;
    margin: 0 auto;
    padding: 20px;
    border: 2px solid #d3d3d3;
    background:  #fff;
    box-shadow: 4px 5px #ededed;
}
#thanks .inner  p {
    margin: 0;
    text-align: center;
    line-height: 2.1;
}
#thanks .inner .logo {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #d3d3d3;
}
/*
ガイド共通：重要ボックス
-----------------------------------*/
.box_important {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ffbf00;
    background: #fff9e6;
}
.box_important:last-child { margin-bottom: 0; }

.box_important p { margin: 10px 0 0; }
.box_important p:first-child { margin-top: 0; }
.box_important .inner {
    margin-top: 10px;
    padding: 15px;
    background: #fff;
}
.box_important ol {
    margin: 0;
    padding: 0 0 0 20px;
}
.box_important li { margin-top: 5px; }
.box_important li:first-child { margin-top: 0; }
/*
ガイド共通：説明ボックス
-----------------------------------*/
.box_description {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #e9e9e9;
}
.box_description:last-child { margin-bottom: 0; }
.box_description p { margin: 10px 0 0; }
.box_description p:first-child { margin-top: 0; }
.box_description .inner {
    margin-top: 10px;
    padding: 15px;
    background: #fff;
}
.box_description .inner:first-child { margin-top: 0; }

.box_description ol {
    margin: 0;
    padding: 0 0 0 20px;
}
.box_description .list_indent { margin: 0; }
.box_description .ttl { font-size:15px; }

/*
オリコ用：隠しiフレーム
-----------------------------------*/
.box_secret iframe {
    width: 100%;
    height: 60px;
    border: 0px solid;
    background: #fff;
}