@charset "utf-8";
/* data_list */
.data_list_box > li { margin-bottom: 16px; }
.data_list_box > li:last-of-type { margin-bottom: 0; }
.data_list_box .item { position: relative; width: 100%; padding: 20px; background: #ffffff; border: 1px solid var(--gray-02); border-radius: 16px; box-shadow: var(--shadow-02); }
.data_list_box .state { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.data_list_box .state.ready { color: var(--success); }
.data_list_box .state.finish { color: var(--black-50); }
.data_list_box .state.active { color: var(--purple); }
.data_list_box .state.active::before { width: 24px; height: 24px; background: url(../../image/icon/icon_delivery.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -5px; margin-right: 4px; }
.data_list_box .btn_view { position: absolute; right: 20px; top: 20px; font-size: 14px; font-weight: 500; color: var(--purple); z-index: 5; }
.data_list_box .btn_view::after { width: 16px; height: 16px; background: url(../../image/icon/icon_arrow_right_p.svg) no-repeat center center; content: ''; display: inline-block; vertical-align: -3px; margin-left: 2px; }
.data_list_box .date { font-size: 13px; font-weight: 400; color: var(--black-50); line-height: 18px; }
.data_list_box .title { font-size: 16px; font-weight: 500; line-height: 22px; }
.data_list_box .detail { width: 100%; display: flex; justify-content: space-between; margin-top: 12px; }
.data_list_box .detail .text { font-size: 14px; font-weight: 400; color: var(--purple-700); line-height: 24px; }
.data_list_box .detail .price { font-size: 16px; font-weight: 700; line-height: 24px; }
.data_list_box .btn_write { position: relative; display: block; width: 100%; height: 40px; font-size: 15px; font-weight: 700; color: #ffffff; line-height: 40px; text-align: center; padding: 0 16px; background: var(--purple); border-radius: 12px; margin-top: 12px; }
.data_list_box .btn_write.disabled { color: var(--black-50); background: var(--gray-50); pointer-events: none; }
.data_list_box .btn_write .event { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); display: inline-block; height: 20px; font-size: 12px; font-weight: 700; color: var(--purple); line-height: 18px; background: #ffffff; border: 1px solid var(--purple); border-radius: 10px; padding: 0 8px; z-index: 5; }