@charset "utf-8";

/* テーブル共通 */
th,
td { vertical-align: middle; }

.lineOdd {
    color: #222;
    background-color: #e6f6ec;
}

.lineEven { color: #222; }

.lineGray {
    color: #222;
    background-color: #bbb;
}

.stepArea {
    text-align: center;
    margin: 10px 0;
}

/* 2018.07.09 H.Takeuchi 管理番号:03223
 * cartTable,sumTable,pointTable,orderTableのCSSを変更 */

/* カートテーブル　入力 */

.cartTable {
    width: 900px;
    margin: 5px 0 5px 0;
    border: 2px solid #405733;
}

.cartTable th {
    color: #333;
    border: 1px solid #405733;
    background-color: #e6f6ec;
    padding: 10px;
    text-align: center;
    font-weight: normal;
}

.cartTable td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

.cartTable .none {
    border: none;
    padding: 1px;
}

.cartTable .col1 { width: 350px; }
.cartTable .col2 { width: 120px; }

/* .cartTable .col3 { } */
.cartTable .col4 { width: 150px; }
.cartTable .col5 { width: 90px; }

.cartTable .product_image {
    width: 100px;
    float: left;
    text-align: center;
    margin-right: 10px; 
}
.cartTable .product_image_second {
    width: 100px;
    float: left;
    text-align: center;
}

.cartTable .cartbtn { margin: 10px 0 10px 0; }

/* ポイントテーブル　入力 */
.pointTable {
    margin: 5px 0 5px 0;
    border: 2px solid #405733;
    float: right;
    width: 528px;
}

.pointTable th {
    color: #333;
    border: 1px solid #405733;
    background-color: #e6f6ec;
    padding: 10px;
    text-align: left;
    font-weight: normal;
}

.pointTable td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

.pointTable .col2 {
    width: 150px;
    text-align: right;
}

.pointTable .col3 {
    width: 90px;
    text-align: right;
    border: none;
}

/* 合計テーブル　入力 */
.sumTable {
    margin: 5px 0 5px 0;
    border: 2px solid #405733;
    float: right;
    width: 528px;
}

.sumTable th {
    color: #333;
    border: 1px solid #405733;
    background-color: #e6f6ec;
    padding: 10px;
    text-align: left;
    font-weight: normal;
}

.sumTable td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

.sumTable .col2 { width: 150px; }

.sumTable .col3 {
    width: 90px;
    border: none;
}

.sumTable .charge {
    font-size: 1.4em;
    color: #900;
    font-weight: bold;
}

/* お届けサイクルテーブル　入力 */
.cycleTable {
    width: 900px;
    margin: 15px 0 5px 0;
    border: 2px solid #405733;
}

.cycleTable th {
    color: #333;
    border: 1px solid #405733;
    background-color: #e6f6ec;
    padding: 10px;
    text-align: left;
    font-weight: normal;
}

.cycleTable td {
    border: 1px solid #405733;
    padding: 10px;
}

.cycleTable .col1 { width: 200px; }

.cycleTable .col2 {
    width: 130px;
    text-align: right;
}

/* お客様情報　入力 */
.customerTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.customerTable th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.customerTable td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.customerTable th .number { margin-right: 10px; }

.customerTable .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}
.customerTable .example { color: #888; }

.customerTable .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

/* お届け希望日時テーブル　入力 */
.deliveryDateTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.deliveryDateTable th {
    color: #333;
    border: 1px solid #405733;
    width: 220px;
    padding: 15px 10px;
    text-align: left;
    font-weight: normal;
}

.deliveryDateTable td {
    border: 1px solid #405733;
    padding: 8px;
    vertical-align: middle;
}

/* お支払方法テーブル　入力 */
.paymentTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.paymentTable th {
    color: #333;
    border: 1px solid #405733;
    background-color: #e6f6ec;
    padding: 15px 10px;
    text-align: left;
    font-weight: normal;
}

.paymentTable td {
    border: 1px solid #405733;
    padding: 8px;
    vertical-align: middle;
}

.paymentTable .col1 { width: 220px; }
.paymentTable .col2 { width: 180px; }
.paymentTable .col3 { width: 436px; }

/* カードお支払方法テーブル　入力 */
.paymentTable .cardPaymentTable { width: 626px; }

.paymentTable .cardPaymentTable th {
    color: #333;
    border: 1px solid #405733;
    background-color: #e6f6ec;
    width: 168px;
    padding: 15px 10px;
    text-align: left;
}

.paymentTable .cardPaymentTable td {
    border: 1px solid #405733;
    padding: 8px;
    vertical-align: middle;
}

/* カートテーブル　確認 */
.cartConfirmTable {
    width: 900px;
    margin: 10px 0 30px 0;
    border: 2px solid #405733;
}

.cartConfirmTable th {
    color: #333;
    border: 1px solid #405733;
    font-weight: normal;
    background-color: #e6f6ec;
    padding: 10px;
    text-align: center;
}

.cartConfirmTable td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

.cartConfirmTable .none {
    border: none;
    padding: 1px;
}

.cartConfirmTable .col1 { width: 305px; }
.cartConfirmTable .col2 { width: 163px; }
.cartConfirmTable .col3 { width: 163px; }
.cartConfirmTable .col4 { width: 163px; }

.cartConfirmTable .product_image {
    width: 100px;
    float: left;
    text-align: center;
    margin-right: 10px;
}

/* ポイントテーブル　確認 */
.pointConfirmTable {
    margin: 5px 0 5px 0;
    border: 2px solid #405733;
    float: right;
}

.pointConfirmTable th {
    color: #333;
    border: 1px solid #405733;
    background-color: #e6f6ec;
    padding: 10px;
    text-align: left;
    font-weight: normal;
}

.pointConfirmTable td {
    border: 1px solid #405733;
    padding: 10px;
}

.pointConfirmTable .col1 { width: 200px; }

.pointConfirmTable .col2 {
    width: 163px;
    text-align: right;
}

/* 合計テーブル　確認 */
.sumConfirmTable .sumPriceArea {
    width: 250px;
    float: left;
    line-height: 200%;
}

.sumConfirmTable {
    margin: 5px 0 5px 0;
    border: 2px solid #405733;
    float: right;
    width: 420px;
}

.sumConfirmTable th {
    color: #333;
    border: 1px solid #405733;
    background-color: #e6f6ec;
    padding: 10px;
    text-align: left;
    font-weight: normal;
}

.sumConfirmTable td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

.sumConfirmTable .col1 { width: 250px; }
.sumConfirmTable .col2 { width: 170px; }

.sumConfirmTable .charge {
    font-size: 1.4em;
    color: #900;
    font-weight: bold;
}

/* お届けサイクルテーブル　確認 */
.cycleConfirmTable {
    margin: 5px 0 5px 0;
    border: 2px solid #405733;
    float: right;
    width: 420px;
}

.cycleConfirmTable th {
    color: #333;
    border: 1px solid #405733;
    background-color: #e6f6ec;
    padding: 10px;
    text-align: left;
    font-weight: normal;
}

.cycleConfirmTable td {
    border: 1px solid #405733;
    padding: 10px;
}

.cycleConfirmTable .col1 { width: 250px; }

.cycleConfirmTable .col2 {
    width: 170px;
    text-align: right;
}

/* お客様情報　確認 */
.customerConfirmTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.customerConfirmTable th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.customerConfirmTable td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.customerConfirmTable th .number { margin-right: 10px; }

.customerConfirmTable .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.customerConfirmTable .example { color: #888; }

.customerConfirmTable .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

/* お届け希望日時テーブル　確認 */
.deliveryDateConfirmTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #563;
}

.deliveryDateConfirmTable th {
    color: #333;
    border: 1px solid #405733;
    width: 220px;
    padding: 15px 10px;
    text-align: left;
    font-weight: normal;
}

.deliveryDateConfirmTable td {
    border: 1px solid #405733;
    padding: 8px;
    vertical-align: middle;
}

/* お支払方法テーブル　確認 */
.paymentConfirmTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.paymentConfirmTable th {
    color: #333;
    border: 1px solid #405733;
    padding: 15px 10px;
    text-align: left;
    font-weight: normal;
}

.paymentConfirmTable td {
    border: 1px solid #405733;
    padding: 8px;
    vertical-align: middle;
}

.paymentConfirmTable .col1 { width: 220px; }

/* カードお支払方法テーブル　確認 */
.cardPaymentTable { width: 626px; }

.cardPaymentTable th {
    color: #888;
    border: 1px solid #ccc;
    background-color: #eee;
    width: 168px;
    padding: 15px 10px;
    text-align: center;
}

.cardPaymentTable td {
    border: 1px solid #ccc;
    padding: 8px;
}

/* お届け先変更　テキスト */
.selectedShipping {
    padding: 10px;
    font-weight: bold;
    color: #060;
}

/* アドレス帳 */
.addressBookTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.addressBookTable th {
    border: 1px solid #405733;
    font-weight: normal;
    text-align: left;
    width: 200px;
    padding: 15px 10px;
    color: #333;
}

.addressBookTable td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.addressBookTable th .number { margin-right: 10px; }

.addressBookTable .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.addressBookTable .example { color: #888; }

.addressBookTable .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

.addressBookTable .col2 { width: 290px; }
.addressBookTable .col3 { width: 170px; }

.addressBookTable .widthAdjust {
    float: left;
    width: 140px;
    text-align: left;
    margin-right: 15px;
}

/* ご注文完了 */
.orderComplete {
    margin: 20px;
    padding: 10px 20px 10px 20px;
    border: 2px solid #e1e0c8;
    line-height: 1.8em;
}

.orderComplete .orderNo {
    font-size: 1.4em;
    color: #900;
    padding: 5px;
}

.orderComplete .point {
    font-size: 1.2em;
    color: #900;
    font-weight: bold;
    padding: 0 10px;
}

/* WEB利用登録　入力 */
.webRegistInputTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.webRegistInputTable th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.webRegistInputTable td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.webRegistInputTable th .number {
    margin-right: 10px;
}

.webRegistInputTable .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.webRegistInputTable .example { color: #888; }

.webRegistInputTable .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

/* WEB利用登録　照会 */
.web-reg-rep-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.web-reg-rep-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.web-reg-rep-tbl td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.web-reg-rep-tbl th .number { margin-right: 10px; }

.web-reg-rep-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.web-reg-rep-tbl .example { color: #888; }

.web-reg-rep-tbl .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

/* WEB利用登録　確認 */
.web-reg-cfm-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.web-reg-cfm-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.web-reg-cfm-tbl td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;    
}

.web-reg-cfm-tbl th .number { margin-right: 10px; }

.web-reg-cfm-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.web-reg-cfm-tbl .example { color: #888; }

.web-reg-cfm-tbl .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

/* お問い合わせ　入力 */
.askInputTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.askInputTable th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 200px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.askInputTable td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.askInputTable th .number { margin-right: 10px; }

.askInputTable .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.askInputTable .example { color: #888; }

.askInputTable .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

.askInputTable .col1 { width: 230px; }
.askInputTable .col2 { width: 400px; }
.askInputTable .col3 { width: 250px; }

.askInputTable .widthAdjust {
    float: left;
    width: 130px;
    text-align: left;
    margin-right: 10px;
}

/* お問い合わせ　確認 */
.ask-cfm-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.ask-cfm-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 180px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.ask-cfm-tbl td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.ask-cfm-tbl th .number { margin-right: 10px; }

.ask-cfm-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.ask-cfm-tbl .example { color: #888; }

.ask-cfm-tbl .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

.ask-cfm-tbl .col2 { width: 240px; }

/* マイページトップ */
.myPageTop .logoutBtn {
    float: right;
    padding: 10px 0;
}

.myPageTop .memberTxt {
    line-height: 1.4em;
    padding: 10px;
    width: 700px;
    margin: auto;
}

.myPageTop .pointTxt {
    line-height: 1.4em;
    padding: 10px;
    width: 700px;
    margin: auto;
}

.myPageTop .newsArea {
    line-height: 1.4em;
    padding: 10px;
    width: 700px;
    margin: auto;
    *zoom: 1;
}

.myPageTop .newsArea .date {
    width: 130px;
    float: left;
}

.myPageTop .newsArea:before,
.myPageTop .newsArea:after {
    content: "";
    display: table;
}

.myPageTop .newsArea:after { clear: both; }

.myPageTop .newsArea .oshirase {
    font-weight: bold;
    color: #589f6d;
}

.myPageTop .mptpTeikiExplain {
    width: 870px;
    padding: 5px;
    margin: 10px 10px 10px 10px;
    border: double 5px #405733;
    font-size: 0.9em;
    font-weight: bolder;
}

.myPageTop .mptpTeikiExplain_black {
    width: 828px;
    margin: 10px 10px 10px 10px;
    border: none;
    font-size: 0.9em;
}

.myPageTop .mptpTeikiExplain_black .vir_middle { vertical-align: middle; }

.myPageTop .mptpTeikiExplain_red {
    width: 828px;
    margin: 10px 10px 10px 10px;
    border: none;
    font-size: 0.9em;
    color: red;
}

.myPageTop .purchaseTable {
    width: 892px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    text-align: center;
}

.myPageTop .purchaseTable th {
    border: 1px solid #405733;
    font-weight: normal;
    background-color: #ececec;
    padding: 10px;
    color: #333;
    text-align: left;
    font-size: 0.8em;
}

.myPageTop .purchaseTable td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

/* マイページ　お客様情報 */
.mp-cust-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.mp-cust-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.mp-cust-tbl td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;    
}

/* マイページ　お客様情報　アドレス帳 */
.mp-addr-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.mp-addr-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.mp-addr-tbl td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;    
}

.mp-addr-tbl .row1 {
    font-weight: bold;
    font-size: 1.2em;
    background: #ff9;
    padding: 5px;
}

/* マイページ　お客様情報　お客様情報変更 */
.cust-mod-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.cust-mod-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.cust-mod-tbl td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.cust-mod-tbl th .number { margin-right: 10px; }

.cust-mod-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.cust-mod-tbl .example { color: #888; }
.cust-mod-tbl .col2 { width: 290px; }
.cust-mod-tbl .col3 { width: 170px; }

.cust-mod-tbl .widthAdjust {
    float: left;
    width: 140px;
    text-align: left;
    margin-right: 15px;
}

/* マイページ　お客様情報　お客様情報変更確認 */
.cust-mod-cfm-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.cust-mod-cfm-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 15px 10px;
    color: #333;
    text-align: left;
}

.cust-mod-cfm-tbl td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.cust-mod-cfm-tbl th .number { margin-right: 10px; }

.cust-mod-cfm-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.cust-mod-cfm-tbl .example { color: #888; }

/* マイページ　購入履歴一覧 */
.purchaseRecordTable {
    width: 892px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.purchaseRecordTable th {
    border: 1px solid #405733;
    font-weight: normal;
    background-color: #ececec;
    padding: 10px;
    color: #333;
    text-align: left;
    font-size: 0.8em;
    vertical-align: middle;
}

.purchaseRecordTable td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

/* マイページ　購入履歴詳細 */
.purchaseDetailTable {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.purchaseDetailTable th {
    border: 1px solid #405733;
    font-weight: normal;
    width: 220px;
    padding: 10px;
    color: #333;
    text-align: left;
    vertical-align: middle;
}

.purchaseDetailTable td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

/* 2016.02.23 added by na.yokota #2336 Web定期変更で次回伝票のみの変更も受け付けて欲しい ->
 マイページ　定期一覧 */
img.listImg {
    text-align: center;
    vertical-align: middle;
}
th.mp_ListTableCol01 { width: 18%; }
th.mp_ListTableCol02 { width: 46%; }
th.mp_ListTableCol03 { width: 5%; }
th.mp_ListTableCol04 { width: 10%; }
th.mp_ListTableCol05 { width: 12%; }
th.mp_ListTableCol06 { width: 9%; }
table.mp-per-prod-tbl td.mp_ListTable { padding: 5px; }

/* 2016.02.23 added by na.yokota <- */

/* マイページ　定期コース詳細　商品情報 */
.mp-per-prod-tbl {
    width: 900px;
    margin: 10px 0 30px 0;
    border: 2px solid #405733;
}

.mp-per-prod-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    padding: 10px;
    font-weight: normal;
    text-align: center;
}

.mp-per-prod-tbl td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

.mp-per-prod-tbl .none {
    border: none;
    padding: 1px;
}

.mp-per-prod-tbl .col1 { width: 230px; }
.mp-per-prod-tbl .col2 { width: 110px; }
.mp-per-prod-tbl .col3 { width: 120px; }
.mp-per-prod-tbl .col4 { width: 100px; }
.mp-per-prod-tbl .middlefont { font-size: 0.8em; }

/* マイページ　定期コース詳細　合計テーブル */
.mp_PeridicSumTable {
    width: 900px;
    margin: 10px 0 30px 0;
}

.mp_PeridicSumTable th {
    color: #888;
    border: 1px solid #cacaca;
    background-color: #ececec;
    width: 304px;
    padding: 10px;
    text-align: center;
    font-weight: normal;
    vertical-align: middle;
}

.mp_PeridicSumTable td {
    border: 1px solid #cacaca;
    padding: 10px;
}

.mp_PeridicSumTable .sumPriceArea {
    width: 250px;
    float: left;
    line-height: 200%;
}

/* マイページ　定期コース詳細　定期情報 */
.mp_PeridicTable {
    width: 900px;
    margin: 10px 0 30px 0;
    border: 2px solid #405733;
}

.mp_PeridicTable th {
    border: 1px solid #405733;
    padding: 10px;
    text-align: left;
    font-weight: normal;
    color: #333;
}

.mp_PeridicTable td {
    border: 1px solid #405733;
    padding: 10px;
    vertical-align: middle;
}

.mp_PeridicTable .none {
    border: none;
    padding: 1px;
}

.mp_PeridicTable .gray {
    color: #888;
    border: 1px solid #405733;
    background-color: #ececec;
    padding: 10px;
    text-align: center;
    font-weight: normal;
}

.mp_PeridicTable .col1 { width: 220px; }
.mp_PeridicTable .vertical_middle { vertical-align: middle; }

/* 2016.02.23 added by na.yokota #2336 Web定期変更で次回伝票のみの変更も受け付けて欲しい ->
 マイページ　定期コース詳細 */

#basicModalContent table.mp-per-prod-tbl td { text-align: center; }
.cursorStylePointer { cursor: pointer; }

table.mp_PeridicTable th.head01 {
    text-align: center;
    width: 20%;
}

table.mp_PeridicTable th.head02 {
    text-align: center;
    width: 40%;
}

table.mp_PeridicTable th.head03 {
    text-align: center;
    width: 40%;
}

table.mp-per-prod-tbl tr.worn1 {
    background-color: #fdd;
}

table.mp-per-prod-tbl tr.worn2 {
    background-color: #ff8;
}

table.mp-per-prod-tbl tr.gray {
    background-color: #868686;
    color: #333;
}

#confirmMsgBox ul li.clear { clear: both; }

/* マイページ　定期コース変更入力 */
a.btnLinkImg {
    float: right;
    vertical-align: middle;
}

/* マイページ　定期コース変更入力　お届け予定日 */
ul.deliveryDays li {
    float: left;
    padding: 15px 10px;
    margin: 5px;
}

ul.deliveryDays li.clear {
    float: none;
    padding: 0;
    margin: 0;
    clear: both;
}

/* マイページ　定期コース変更入力　ご注文者様 */
.mp-per-cust-tbl {
    width: 440px;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-right: 20px;
    color: #666;
    font-size: 0.9em;
    float: left;
    border: 2px solid #405733;
}

.mp-per-cust-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 110px;
    padding: 4px;
    text-align: left;
    font-weight: normal;
}

.mp-per-cust-tbl td {
    border: 1px solid #405733;
    padding: 4px;
    background: #fafafa;
}

.mp-per-cust-tbl .none {
    border: none;
    padding: 1px;
}

/* マイページ　定期コース変更入力　お届け変更前 */

.mp-per-cust-bef-l-tbl {
    width: 440px;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-right: 10px;
    color: #666;
    font-size: 0.9em;
    float: left;
    border: 2px solid #405733;
}

.mp-per-cust-bef-l-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 110px;
    padding: 4px;
    text-align: left;
    font-weight: normal;
}

.mp-per-cust-bef-l-tbl td {
    border: 1px solid #405733;
    padding: 4px;
    background: #fafafa;
}

.mp-per-cust-bef-l-tbl .none {
    border: none;
    padding: 1px;
    background: none;
}

.mp-per-cust-bef-l-tbl .headline {
    padding: 10px;
    font-size: 1.3em;
}

.mp-per-cust-bef-tbl {
    width: 440px;
    margin-top: 10px;
    margin-bottom: 30px;
    color: #666;
    font-size: 0.9em;
    float: left;
    border: 2px solid #405733;
}

.mp-per-cust-bef-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 120px;
    padding: 4px;
    text-align: left;
    font-weight: normal;
}

.mp-per-cust-bef-tbl td {
    border: 1px solid #405733;
    padding: 4px;
    background: #fafafa;
}

.mp-per-cust-bef-tbl .none {
    border: none;
    padding: 1px;
    background: none;
}

.mp-per-cust-bef-tbl .headline {
    padding: 10px;
    font-size: 1.3em;
}

/* マイページ　定期コース変更入力 アドレス帳から選択 */
.mp-per-cust-bef-l-tbl-sel-addr {
    width: 440px;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-right: 10px;
    color: #666;
    font-size: 0.9em;
    float: left;
    border: 2px solid #405733;
}

.mp-per-cust-bef-l-tbl-sel-addr .select_address_btn_area {
    border: 1px solid #405733;
    background-color: #fff;
    width: 30px;
    padding: 4px;
    text-align: center;
}

.mp-per-cust-bef-l-tbl-sel-addr .select_address_title_area {
    color: #333;
    border: 1px solid #405733;
    background-color: #fff;
    width: 90px;
    padding: 4px;
    text-align: left;
    font-weight: normal;
}

.mp-per-cust-bef-l-tbl-sel-addr .select_address_val_area {
    border: 1px solid #405733;
    padding: 4px;
    background: #fff;
}

.mp-per-cust-bef-l-tbl-sel-addr .none {
    border: none;
    padding: 1px;
    background: none;
}

.mp-per-cust-bef-l-tbl-sel-addr .headline {
    padding: 10px;
    font-size: 1.3em;
}

.mp-per-cust-bef-tbl-sel-addr {
    width: 440px;
    margin-top: 10px;
    margin-bottom: 30px;
    color: #666;
    font-size: 0.9em;
    float: left;
    border: 2px solid #405733;
}

.mp-per-cust-bef-tbl-sel-addr .select_address_btn_area {
    border: 1px solid #405733;
    background-color: #fff;
    width: 30px;
    padding: 4px;
    text-align: center;
}

.mp-per-cust-bef-tbl-sel-addr .select_address_title_area {
    color: #333;
    border: 1px solid #405733;
    background-color: #fff;
    width: 90px;
    padding: 4px;
    text-align: left;
    font-weight: normal;
}

.mp-per-cust-bef-tbl-sel-addr .select_address_val_area {
    border: 1px solid #405733;
    padding: 4px;
    background: #fff;
}

.mp-per-cust-bef-tbl-sel-addr .none {
    border: none;
    padding: 1px;
    background: none;
}

.mp-per-cust-bef-tbl-sel-addr .headline {
    padding: 10px;
    font-size: 1.3em;
}

/* マイページ　定期コース変更入力　変更後　入力 */
.mp-per-cust-aft-l-tbl {
    width: 440px;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-right: 10px;
    color: #666;
    font-size: 0.9em;
    float: left;
    border: 2px solid #405733;
}

.mp-per-cust-aft-l-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    text-align: left;
    width: 130px;
    padding: 15px 5px;
    color: #333;
}

.mp-per-cust-aft-l-tbl td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.mp-per-cust-aft-l-tbl th .number { margin-right: 5px; }

.mp-per-cust-aft-l-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.mp-per-cust-aft-l-tbl .example { color: #888; }

.mp-per-cust-aft-l-tbl .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

.mp-per-cust-aft-l-tbl .widthAdjust {
    float: left;
    width: 140px;
    text-align: left;
    margin-right: 15px;
}

.mp-per-cust-aft-l-tbl .widthAdjustSub {
    float: left;
    width: 300px;
    text-align: left;
}

.mp-per-cust-aft-tbl {
    width: 440px;
    margin-top: 10px;
    margin-bottom: 30px;
    color: #666;
    font-size: 0.9em;
    float: left;
    border: 2px solid #405733;
}

.mp-per-cust-aft-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    text-align: left;
    width: 130px;
    padding: 15px 5px;
    color: #333;
}

.mp-per-cust-aft-tbl td {
    border: 1px solid #405733;
    padding: 5px;
}

.mp-per-cust-aft-tbl th .number { margin-right: 5px; }

.mp-per-cust-aft-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.mp-per-cust-aft-tbl .example { color: #888; }

.mp-per-cust-aft-tbl .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

.mp-per-cust-aft-tbl .widthAdjust {
    float: left;
    width: 140px;
    text-align: left;
    margin-right: 15px;
}

.mp-per-cust-aft-tbl .widthAdjustSub {
    float: left;
    width: 300px;
    text-align: left;
}

.mp-per-cust-aft-tbl-per {
    width: 440px;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 0.9em;
    float: left;
    border: none;
}

.mp-per-cust-aft-tbl-per th {
    border: none;
    width: 130px;
    padding: 15px 5px;
}

.mp-per-cust-aft-tbl-per td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;
}

.mp-per-cust-aft-tbl-per th .number { margin-right: 5px; }

.mp-per-cust-aft-tbl-per .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.mp-per-cust-aft-tbl-per .example { color: #888; }

.mp-per-cust-aft-tbl-per .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

.mp-per-cust-aft-tbl-per .widthAdjust {
    float: left;
    width: 140px;
    text-align: left;
    margin-right: 15px;
}

.mp-per-cust-aft-tbl-per .widthAdjustSub {
    float: left;
    width: 300px;
    text-align: left;
}

/* マイページ　定期コース変更入力　変更後　入力　休止用 */
.mp-per-cust-aft-lg-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.mp-per-cust-aft-lg-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    text-align: left;
    width: 200px;
    padding: 15px 10px;
    color: #333;
}

.mp-per-cust-aft-lg-tbl td {
    border: 1px solid #405733;
    padding: 5px;
    vertical-align: middle;    
}

.mp-per-cust-aft-lg-tbl th .number { margin-right: 10px; }

.mp-per-cust-aft-lg-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.mp-per-cust-aft-lg-tbl .example { color: #888; }

.mp-per-cust-aft-lg-tbl .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

.mp-per-cust-aft-lg-tbl .widthAdjust {
    float: left;
    width: 140px;
    text-align: left;
    margin-right: 15px;
}

.mp-per-mdl-tbl {
    width: 100%;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.mp-per-mdl-tbl th {
    color: #888;
    border: 1px solid #405733;
    background-color: #ececec;
    padding: 5px;
    text-align: center;
    font-weight: normal;
    width: 30%;
}

.mp-per-mdl-tbl td {
    border: 1px solid #405733;
    padding: 5px 5px;
    text-align: center;
}

.mp-per-mdl-tbl .none {
    border: none;
    padding: 1px;
}

/* マイページ　定期コース変更入力　お支払方法テーブル　入力 */
.mp-per-pay-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.mp-per-pay-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    padding: 15px 10px;
    text-align: left;
    font-weight: normal;
}

.mp-per-pay-tbl td {
    border: 1px solid #405733;
    padding: 8px;
    vertical-align: middle;
}

.mp-per-pay-tbl .col1 { width: 200px; }
.mp-per-pay-tbl .col2 { width: 180px; }
.mp-per-pay-tbl .col3 { width: 436px; }
.mp-per-pay-tbl .col4 { width: 130px; }

/* マイページ　定期コース変更入力　カードお支払方法テーブル　入力 */

.mp-per-cpay-tbl { width: 626px; }

.mp-per-cpay-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 168px;
    padding: 15px 10px;
    text-align: left;
    font-weight: normal;
}

.mp-per-cpay-tbl td {
    border: 1px solid #405733;
    padding: 8px;
}

.mp-per-cpay-tbl .col1 { width: 200px; }
.mp-per-cpay-tbl .col2 { width: 250px; }

.mp-per-cpay-tbl2 { width: 360px; }

.mp-per-cpay-tbl2 th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 168px;
    padding: 15px 10px;
    text-align: left;
    font-weight: normal;
}

.mp-per-cpay-tbl2 td {
    border: 1px solid #405733;
    padding: 8px;
}

.mp-per-cpay-tbl2 .col1 { width: 100px; }
.mp-per-cpay-tbl2 .col2 { width: 135px; }

/* かんたん再開 クレジットカード入力欄 */

.kantan-cpay-tbl {
    margin-top: 10px;
    font-size: 1em;
}

.kantan-cpay-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 168px;
    padding: 8px;
    text-align: left;
    font-weight: normal;
}

.kantan-cpay-tbl td {
    border: 1px solid #405733;
    padding: 8px;
}

.kantan-cpay-tbl input,
.kantan-cpay-tbl select {
    font-size: 1em;
}

.kantan-cpay-tbl .col1 { width: 200px; }
.kantan-cpay-tbl .col2 { width: 250px; }

/* マイページ　お支払方法の変更　左テーブル */
.mp-per-pay-aft-l-tbl {
    width: 380px;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-right: 10px;
    font-size: 0.9em;
    color: #666;
    float: left;
    border: 2px solid #405733;
}

.mp-per-pay-aft-l-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    text-align: left;
    width: 130px;
    padding: 15px 5px;
    color: #333;
}

.mp-per-pay-aft-l-tbl td {
    border: 1px solid #405733;
    padding: 8px;
}

.mp-per-pay-aft-l-tbl th .number { margin-right: 5px; }

.mp-per-pay-aft-l-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.mp-per-pay-aft-l-tbl .example { color: #888; }

.mp-per-pay-aft-l-tbl .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

.mp-per-pay-aft-l-tbl .widthAdjust {
    float: left;
    width: 140px;
    text-align: left;
    margin-right: 15px;
}

.mp-per-pay-aft-l-tbl .widthAdjustSub {
    float: left;
    width: 280px;
    text-align: left;
}

/* マイページ　お支払い方法の変更　矢印ボタン */
.mp-per-pay-aft-c-tbl {
    width: 100px;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-right: 10px;
    float: left;
    border: none;
}

/* マイページ　お支払方法の変更　右テーブル */
.mp-per-pay-aft-tbl-per {
    width: 380px;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-right: 10px;
    font-size: 0.9em;
    color: #666;
    float: left;
    border: 2px solid #405733;
}

.mp-per-pay-aft-tbl-per th {
    border: 1px solid #405733;
    font-weight: normal;
    text-align: left;
    width: 130px;
    padding: 15px 5px;
    color: #333;
}

.mp-per-pay-aft-tbl-per td {
    border: 1px solid #405733;
    padding: 8px;
}

.mp-per-pay-aft-tbl-per th .number { margin-right: 5px; }

.mp-per-pay-aft-tbl-per .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.mp-per-pay-aft-tbl-per .example { color: #888; }

.mp-per-pay-aft-tbl-per .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

.mp-per-pay-aft-tbl-per .widthAdjust {
    float: left;
    width: 140px;
    text-align: left;
    margin-right: 15px;
}

.mp-per-pay-aft-tbl-per .widthAdjustSub {
    float: left;
    width: 280px;
    text-align: left;
}

/* マイページ　定期コース変更入力　ポイントテーブル　入力 */
.mp-per-pt-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.mp-per-pt-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 200px;
    padding: 15px 10px;
    font-weight: normal;
    text-align: left;
}

.mp-per-pt-tbl td {
    border: 1px solid #405733;
    padding: 8px;
    vertical-align: middle;
}

.mp-per-pt-tbl .col2 { width: 20%; }
.mp-per-pt-tbl .col3 { width: 62%; }
.mp-per-pt-tbl .col4 { width: 18%; }
.mp-per-pt-tbl .col5 { width: 18%; }

.mp-per-pt-tbl .gray {
    background-color: #888;
    color: #333;
}

/* マイページ　定期コース変更入力　お届け日　入力 */

.mp-per-delv-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.mp-per-delv-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 130px;
    padding: 15px 10px;
    font-weight: normal;
    text-align: left;
}

.mp-per-delv-tbl td {
    border: 1px solid #405733;
    padding: 8px;
    vertical-align: middle;
}

.mp-per-delv-tbl .vertical_middle { vertical-align: middle; }

/* マイページ　定期コース変更確認　商品情報
2016.02.24 modified by na.yokota #2336 Web定期変更で次回伝票のみの変更も受け付けて欲しい -->
.mp_PeridicProductConfirmTable{ width:900px; margin:10px 0px 30px 0px;border:2px solid #405733} */

.mp-per-prod-cfm-tbl {
    width: 900px;
    margin: 10px 0;
    border: 2px solid #405733;
}

/* 2016.02.24 modified by na.yokota <-- */
.mp-per-prod-cfm-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    padding: 10px;
    text-align: center;
    font-weight: normal;
}

.mp-per-prod-cfm-tbl td {
    border: 1px solid #405733;
    padding: 10px;
}

.mp-per-prod-cfm-tbl .none {
    border: none;
    padding: 1px;
}

.mp-per-prod-cfm-tbl .col1 { width: 304px; }
.mp-per-prod-cfm-tbl .col2 { width: 130px; }
.mp-per-prod-cfm-tbl .col3 { width: 130px; }
.mp-per-prod-cfm-tbl .col5 { width: 130px; }

/* マイページ　定期コース変更確認　ポイントテーブル
 2016.02.24 modified by na.yokota #2336 Web定期変更で次回伝票のみの変更も受け付けて欲しい */

.mp-per-pt-cfm-tbl {
    width: 900px;
    margin: 10px 0 0 0;
    border: 2px solid #405733;
}

/* 2016.02.24 modified by na.yokota <-- */
.mp-per-pt-cfm-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 200px;
    padding: 15px 10px;
    font-weight: normal;
    text-align: left;
}

.mp-per-pt-cfm-tbl td {
    border: 1px solid #405733;
    padding: 8px;
}

/* マイページ　定期コース変更確認　ご注文者様 */
.mp-per-cust-cfm-tbl {
    width: 440px;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-right: 20px;
    font-size: 0.9em;
    border: 2px solid #405733;
}

.mp-per-cust-cfm-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 110px;
    padding: 4px;
    text-align: left;
    font-weight: normal;
}

.mp-per-cust-cfm-tbl td {
    border: 1px solid #405733;
    padding: 4px;
    background: #fafafa;
}

.mp-per-cust-cfm-tbl .none {
    border: none;
    padding: 1px;
}

/* マイページ　定期コース変更確認　変更後 */
.mp-per-cust-aft-cfm-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
    padding: 15px 10px;
}

.mp-per-cust-aft-cfm-tbl th {
    border: 1px solid #405733;
    font-weight: normal;
    background-color: #ececec;
    text-align: left;
    width: 200px;
    padding: 15px 10px;
    color: #333;
}

.mp-per-cust-aft-cfm-tbl td {
    border: 1px solid #405733;
    padding: 5px;
}

.mp-per-cust-aft-cfm-tbl .odd {
    color: #222;
    background-color: #e6f6ec;
}

.mp-per-cust-aft-cfm-tbl .even { color: #222; }

.mp-per-cust-aft-cfm-tbl th .number { margin-right: 10px; }

.mp-per-cust-aft-cfm-tbl .explain {
    color: #167a3b;
    font-size: 0.9em;
    font-weight: bold;
}

.mp-per-cust-aft-cfm-tbl .example { color: #888; }

.mp-per-cust-aft-cfm-tbl .example .box {
    background-color: #f5f5f5;
    padding: 3px;
    margin: 0 3px;
}

/* マイページ　定期コース変更確認　お届け日 */
.mp-per-delv-cfm-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.mp-per-delv-cfm-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 200px;
    padding: 15px 10px;
    font-weight: normal;
    text-align: left;
}

.mp-per-delv-cfm-tbl td {
    border: 1px solid #405733;
    padding: 8px;
}

/* マイページ　定期コース変更確認　お届け日 */
.mp-per-pay-cfm-tbl {
    width: 900px;
    margin: 10px 0 10px 0;
    border: 2px solid #405733;
}

.mp-per-pay-cfm-tbl th {
    color: #333;
    border: 1px solid #405733;
    background-color: #ececec;
    width: 200px;
    padding: 15px 10px;
    font-weight: normal;
    text-align: left;
}

.mp-per-pay-cfm-tbl td {
    border: 1px solid #405733;
    padding: 8px;
}

/* マイページ　定期コース休止確認 */
.periodicStopPage {
    width: 680px;
    margin: 20px auto;
    border: 1px solid #cacaca;
    padding: 10px;
    background: #e6f6ec;
}

.periodicStopPage .mp_periodicStopTable {
    width: 680px;
    margin: 10px auto;
    padding: 10px;
}

.periodicStopPage .mp_periodicStopTable th {
    font-weight: normal;
    width: 170px;
    padding: 5px;
    color: #888;
    text-align: left;
    vertical-align: middle;
}

.periodicStopPage .mp_periodicStopTable td {
    padding: 5px;
    vertical-align: middle;
}

/* ログイン */
.loginPage .txtTitle {
    padding: 10px;
    width: 750px;
    font-size: 1.4em;
    font-weight: bold;
    border-bottom: 1px solid #060;
    margin: 20px auto auto;
}

.loginPage .guideTxt {
    width: 750px;
    margin: auto;
}

.loginPage .loginTable {
    width: 670px;
    margin: 10px auto;
    padding: 10px;
}

.loginPage .loginTable th {
    font-weight: normal;
    width: 204px;
    padding: 5px;
    color: #333;
    text-align: left;
    vertical-align: middle;
}

.loginPage .loginTable td {
    padding: 5px 0;
    vertical-align: middle;
    font-size: 0.9em;
}

.loginPage .loginTable .boldfont { font-weight: bold; }

.loginPage .btnArea {
    width: 670px;
    margin: 20px auto;
    border: 1px solid #ccc;
    padding: 10px;
    background: #e6f6ec;
}

.loginPage .loginTable .viewEmail {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 8px;
}

/* パスワード再発行 */
.pwdReminderPage .guideTxt {
    width: 750px;
    margin: auto;
}

.pwdReminderPage .inputArea {
    width: 700px;
    margin: 20px auto;
    border: 1px solid #ccc;
    padding: 10px;
    background: #e6f6ec;
}

.pwdReminderPage .inputTable {
    width: 670px;
    margin: 10px auto;
    padding: 10px;
}

.pwdReminderPage .inputTable th {
    font-weight: normal;
    width: 170px;
    padding: 5px;
    color: #888;
    text-align: left;
    vertical-align: middle;
}

.pwdReminderPage .inputTable td {
    padding: 5px;
    vertical-align: middle;
}

/* 共通　ボタンエリア */
.btnCenter {
    text-align: center;
    margin: 20px 0;
}

.btnArea {
    margin: 20px 0;
    *zoom: 1;
}

.btnArea:before,
.btnArea:after {
    content: "";
    display: table;
}

.btnArea:after { clear: both; }

.btnBackArea {
    margin: 60px 0 10px 0;
    *zoom: 1;
}

.btnBackArea:before,
.btnBackArea:after {
    content: none;
    display: table;
}

.btnBackArea:after { clear: both; }

.policyTxtArea {
    width: 720px;
    height: 100px;
    margin: auto;
    overflow: auto;
    padding: 0 20px 10px 20px;
    border: 1px solid #666;
    line-height: 1.4em;
}

.policyTxtAreaSmall {
    height: 100px;
    margin: auto;
    overflow: auto;
    padding: 0 20px 10px 20px;
    border: 1px solid #666;
    line-height: 1.4em;
}

.guideTxt {
    padding: 10px;
    line-height: 1.5em;
}

.guideTxtHeight {
    padding: 100px 10px;
    line-height: 1.5em;
}

.completeGuideTxt {
    width: 80%;
    margin: 20px auto;
    padding: 50px 20px;
    border: 1px solid #e1e0c8;
    background: #fff;
    font-weight: bold;
    line-height: 1.5em;
}

.pajingArea {
    padding: 10px;
    text-align: right;
}

.clearFix { clear: both; }

.deliveryArea {
    margin: 10px 0px;
    line-height: 130%;
}


/* 2022.04
 * チェックボックスとアコーディオンを追加 */
 
/* チェックボックス */
.checkbox-wrap {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  user-select: none;
}

.checkbox-wrap input {
  display: none;
}

.checkbox-wrap .checkmark {
  position: absolute;
  top: -15px;
  left: 0;
  height: 20px;
  width: 20px;
  border: 2px solid #000;
  box-sizing: border-box;
}

.checkbox-wrap .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: 2px solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-wrap input:checked + .checkmark {
  border: 2px solid #000;
}
.checkbox-wrap input:checked + .checkmark:after {
  display: block;
}

/* フォームボタン周り */
.form-btns{
	height: 73px;
}
.form-btns .not-active-form-btn{
	text-align: center;
}
.form-btns.is_active .not-active-form-btn{
	display: none;
}
.form-btns .active-form-btn{
	display: none;
}
.form-btns.is_active .active-form-btn{
	display: block;
}

/* フォームボタン周り　※確認画面 */
.btnConfrimArea .confirm-active-btn{
	display: block;
}
.btnConfrimArea.not_active .confirm-active-btn{
	display: none;
}
.btnConfrimArea .confirm-no-active-btn{
	display: none;
}
.btnConfrimArea.not_active .confirm-no-active-btn{
	display: block;
}


/* アコーディオン */
.accordionBlock{
	font-family: YuGothic, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
	width: 600px;
	margin: 40px auto;
}

.accordionBlock dl + dl{
	margin-top: 20px;
}

.accordionBlock dl dt{
	position: relative;
	padding: 11px 16px;
	cursor: pointer;
	background-color: #EEEEEE;
}

.accordionBlock dl dt::after{
	content: "";
	position: absolute;
	top: 15px;
	right: 12px;
	width: 15px;
	height: 15px;
	background-image: url(../images/icon_accordion.png);
	background-size: 15px 30px;
	background-position: center top;
}
.accordionBlock dl dt.is_active::after{
	background-position: center bottom;
}

.accordionBlock dl dt span{
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
	color: #222222;
}

.accordionBlock dl dd{
	display: none;
	font-size: 12px;
	line-height: 20px;
	color: #222;
	padding: 13px 16px;
	background-color: #F8F8F8;
}

.accordionBlock dl dd strong{
	font-weight: 800;
}

/* 2022.12
 * お問い合わせによくある質問を追加 */
.information_qa_link{
  border: 1px solid #ddd;
  padding: 20px;
  margin: 0 10px 15px;
}