@charset "UTF-8";
/* ===================================================================
CSS information(スマホ版)
 URL：/mypages/*
 説明：マイページ画面CSS
=================================================================== */
@media screen and (max-width: 480px) {

/* ヘッダー */
section.mypage .header_mypage .bottom .name {
    display: block;
    margin: 0 0 0 0;
}
section.mypage .header_mypage .bottom .point {
    display: block;
}

section.mypage .back_link {
    margin: 10px 0 10px 0;
}

/* 共通ヘッダー */
section.mypage .common_menu ul {
    width: 960px;
}

/* マイページのメッセージの検索 */
.search_box .btn-box {
    margin: 0 0 0 0;
}
/*----------------------------------------------------
    マイページ、TOP
----------------------------------------------------*/
section.mypage .top_menu .wrap {
    width: 47%;
} 
section.mypage .top_menu .wrap a > i {
    font-size: 4em;
    margin-top: 25px;
}
section.mypage .top_menu .wrap a .text {
    margin-top: 10px;
}
section.mypage .top_menu .wrap a .num  {
    top: 5px;
    right: 2px;
}

/*
マイページ、メッセージ
------------------------------------------------------------------*/
/* 左 */
section.mypage .message_box .form .left {
    width: 100%;
}
section.mypage .message_box .form .left .head dt {
    float: none;
    width: 100%;
}
section.mypage .message_box .form .left .head dd {
    float: none;
    width: 100%;
}
/* 差出人の2つ目のdtを消す */
section.mypage .message_box .form .left .head:nth-child(2) dt {
    display: none;
}
/* 右 */
section.mypage .message_box .form .right {
    width: 100%;
}
/* メッセージ一覧 */
section.mypage .message_list li .head .subject, 
section.mypage .message_list li .head time {
    width: 100%;
}
section.mypage .message_list li .order_number {
    margin: 0;
} 

/*----------------------------------------------------
    マイページ、会員管理
    URL：/mypages/account/
    URL：/mypages/delivery/
    URL：/mypages/account_email/
    URL：/mypages/account_password/
    URL：/mypages/account_escape/
----------------------------------------------------*/
/* お届け先 */
section.mypage .delivery_tbl th.no {
    text-align: center;
    width: 100px;
}

section.mypage .delivery_tbl th,
section.mypage .delivery_tbl td {
    display: table-cell;
    width: auto;
}

/*----------------------------------------------------
    マイページ、テンプレートデザイン編集
----------------------------------------------------*/
/* 検索 */
.search_online_box dl {
    float: none;
}

/*----------------------------------------------------
    マイページ、注文履歴
    URL：/mypages/order/
----------------------------------------------------*/
/* ヘッダーステータス情報(注文日/注文番号などのボックス) */
.order_menu_flex .wrap {
    width: 49%;
}
.order_menu_flex .wrap .text {
    font-size: 0.9rem;
}
/* 
注文日
-------------------- */
.mypage .order-box > .time .left, 
.mypage .order-box > .time .right {
    float: none;
}

/* 
お届け先
-------------------- */
/* 配送方法 */
.mypage-order-detail-box .delivery-method-box dl {
    width: 100%;
    display: block;
}
.mypage-order-detail-box .delivery-method-box dl dt {
    width: 100%;
}
.mypage-order-detail-box .delivery-method-box dl dd {
    width: 100%;
    padding: 0;
}
/* 納品時間 */
.mypage-order-detail-box .delivery-method-box dl.timeline {
    margin: 10px 0 0 0;
}
/* 左側、住所（枠） */
.mypage-order-detail-box .address-box > div {
    width: 100%;
    padding: 10px;
}
.mypage-order-detail-box .address-box .number-list dl dt {
    width: 25%;
}
/* 
金額と支払方法
---------------------- */
.mypage .order-box .summary {
    display: block;
}
.mypage .order-box .summary .wrap {
    width: 100%;
}
/* 
注文詳細
---------------------- */
.mypage .order-box .detail-flexbox {
    display: block;
}
/* 注文詳細（画像） */
.mypage .order-box .detail-flexbox .image {
    margin: 0 auto 20px auto;
}

/* 
注文詳細（ステップと注文情報）
---------------------- */
.mypage .order-box .detail-flexbox .detail .step-order-flexbox {
    display: block;
}
.mypage .order-box .detail-flexbox .detail ul.step-flow {
    width: 100%;
    margin: 0 0 20px 0;
}
/* 
注文詳細（商品情報）
---------------------- */
.mypage .order-box .detail-flexbox .detail.wide, 
.mypage .order-box .detail-flexbox .detail {
    width: 100%;
}
/* 進行状況/入金状況/キャンセル */
.mypage .order-box .detail-flexbox .detail .order-status li {
    float: none;
}
.mypage .order-box .detail-flexbox .detail.wide .order-list, 
.mypage .order-box .detail-flexbox .detail .order-list {
    width: 100%;
}
/* 
注文詳細（メニューボタン）
---------------------- */
.mypage .order-box .detail-flexbox .menu {
    width: 100%;
}

/* 総合計 */
.mypage-order-detail-box .total-price-list {
    width: 100%;
    font-size: 0.9rem;
}

/* 
ドキュメントのモーダル
-------------------- */
.document-download-list .wrap {
    border-bottom: 1px dashed #cccccc;
    padding: 10px 0;
    margin: 0;
}
.document-download-list .wrap .order-number {
    width: 100%;
}
.document-download-list .wrap .publish-date {
    width: 100%;
}
.document-download-list .wrap .btn {
    width: 100%;
}
.document-download-list .wrap .btn a {
    width: 100%;
}

}

/* ===================================================================
CSS information(タブレット版)
 URL：/mypages/*
 説明：マイページ画面CSS
=================================================================== */
@media only screen and (min-width: 767px) and (max-width: 1280px) {
/* 
注文詳細
---------------------- */
.mypage .order-box .detail-flexbox {
    display: block;
}
.mypage .order-box .detail-flexbox .image {
    margin: 0 auto;
}
.mypage .order-box .detail-flexbox .detail.wide, 
.mypage .order-box .detail-flexbox .detail {
    width: 100%;
}
.mypage .order-box .detail-flexbox .menu {
    margin: 0 auto;
    width: 50%;
}
}