.morder &-list width: 100% border: 1px solid #ddd &__head display: flex flex-wrap: nowrap justify-content: space-between align-items: stretch align-content: center width: 100% background-color: #f3f3f3 border-bottom: 1px solid #ddd @media (max-width: 991px) display: none > div display: flex justify-content: center align-items: center width: 15.4% height: 35px font-size: 14px font-weight: 400 line-height: 1.4 color: #777 text-align: center &:nth-child(2) width: 23% &:nth-child(n + 2) border-left: 1px solid #ddd &__item width: 100% @media (min-width: 992px) display: flex flex-wrap: nowrap justify-content: space-between align-items: stretch align-content: center @media (max-width: 991px) position: relative padding: 10px &:nth-child(n + 3) border-top: 1px solid #ddd &:nth-child(odd) background-color: #f3f3f3 > div font-size: 15px font-weight: 400 line-height: 1.4 color: #777 @media (min-width: 992px) display: flex flex-wrap: wrap justify-content: center align-items: stretch align-content: center width: 15.4% padding: 20px 10px text-align: center &:nth-child(2) width: 23% &:nth-child(n + 2) border-left: 1px solid #ddd @media (max-width: 991px) position: relative padding-left: 80px &:nth-child(n + 2) margin-top: 5px &:nth-child(6) position: absolute top: 10px right: 10px width: 14px height: 14px padding: 0 &::before content: attr(data-title) position: absolute top: 2px left: 0 display: block width: 80px padding-right: 15px font-size: 13px font-weight: 400 line-height: 1.4 color: #aaa text-align: right box-sizing: border-box &.processing color: #e24733 &.shipped color: #39b54a &.returned color: #777777 &.completed color: $tc &__number width: 100% color: $sc text-decoration: underline +ani() &:hover text-decoration: underline opacity: .7 &__more width: 14px height: 14px svg, img width: 100% height: 100% vertical-align: top path fill: #333 +ani($e: 'fill') &:hover svg path fill: $sc &-detail width: 100% &__box width: 100% &:nth-child(n + 2) padding-top: 30px margin-top: 30px border-top: 1px solid #ddd @media (max-width: 991px) padding-top: 25px margin-top: 25px &__title width: 100% margin-bottom: 25px font-family: $ftt font-size: 16px font-weight: 400 line-height: 1 color: #555 @media (max-width: 991px) margin-bottom: 20px &__field display: flex flex-wrap: wrap justify-content: flex-start align-items: flex-start align-content: flex-start > p width: 60px font-size: 15px font-weight: 400 line-height: 1.4 color: #999 > div padding-left: 20px font-size: 15px font-weight: 400 line-height: 1.4 color: #555 @media (max-width: 991px) width: calc(100% - 60px) padding-left: 15px &.processing color: #e24733 &.shipped color: #39b54a &.returned color: #777777 &.completed color: $tc &__info width: 100% @media (min-width: 992px) .morder-detail__field:nth-child(1) display: none .morder-detail__field:nth-child(n + 3) width: 100% margin-top: 20px padding-top: 20px border-top: 1px dashed #eee @media (max-width: 991px) .morder-detail__field:nth-child(n + 2) width: 100% margin-top: 15px padding-top: 15px border-top: 1px dashed #eee &__shipping width: 100% .morder-detail__field:nth-child(n + 2) width: 100% margin-top: 20px padding-top: 20px border-top: 1px dashed #eee @media (max-width: 991px) margin-top: 15px padding-top: 15px &-box display: flex flex-wrap: wrap justify-content: flex-start align-items: stretch align-content: center width: 100% &-type display: flex flex-wrap: wrap justify-content: center align-items: center align-content: center width: 60px text-align: center @media (max-width: 991px) justify-content: flex-start width: 100% img width: 40px @media (max-width: 991px) width: 20px margin-right: 5px p font-size: 15px font-weight: 400 line-height: 1.4 color: #555 @media (min-width: 992px) width: 100% margin-top: 5px &-info @media (min-width: 992px) padding-left: 15px margin-left: 15px border-left: 1px solid #eee @media (max-width: 991px) width: 100% padding-top: 10px margin-top: 10px border-top: 1px solid #eee p width: 100% font-size: 15px font-weight: 400 line-height: 1.4 color: #999 &:nth-child(n + 2) margin-top: 5px span color: #555 &__invoice display: flex flex-wrap: wrap justify-content: flex-start align-items: flex-start align-content: flex-start width: 100% @media (min-width: 992px) .morder-detail__field:nth-child(1) width: 100% margin-bottom: 10px .morder-detail__field:nth-child(n + 3) margin-left: 50px @media (max-width: 991px) .morder-detail__field:nth-child(n + 2) width: 100% margin-top: 15px padding-top: 15px border-top: 1px dashed #eee &__status display: flex flex-wrap: wrap justify-content: flex-start align-items: flex-start align-content: flex-start width: 100% @media (min-width: 992px) .morder-detail__field:nth-child(n + 2) margin-left: 50px @media (max-width: 991px) .morder-detail__field:nth-child(n + 2) width: 100% margin-top: 15px padding-top: 15px border-top: 1px dashed #eee &-history &__list width: 100% padding-bottom: 25px border-bottom: 2px solid #eee &--collapse padding-bottom: 0 .morder-history__item &:nth-child(n + 3) display: none &--open .morder-history__item display: flex !important .morder-history__btn &::before border-style: solid border-width: 0 5px 7px 5px border-color: transparent transparent #aaa transparent &::after content: "收合" &__btn display: flex justify-content: center align-items: center width: 100% height: 30px margin-top: 20px @media (max-width: 991px) margin-top: 15px &::before content: "" display: block width: 0 height: 0 margin-right: 5px border-style: solid border-width: 7px 5px 0 5px border-color: #aaa transparent transparent transparent &::after content: "展開所有商品" font-size: 14px font-weight: 400 line-height: 1 color: #aaa &__item display: flex flex-wrap: wrap justify-content: space-between align-items: center align-content: center width: 100% &:nth-child(n + 2) margin-top: 25px @media (max-width: 991px) margin-top: 15px &__img width: 80px height: 80px background-size: cover background-position: center background-repeat: no-repeat border: 1px solid #ddd &__info display: flex flex-wrap: wrap justify-content: space-between align-items: flex-start align-content: flex-start width: calc(100% - 100px) @media (max-width: 991px) width: calc(100% - 90px) &__name width: 100% max-height: 1.4em margin-bottom: 5px font-family: $ftt font-size: 15px font-weight: 400 line-height: 1.4 color: #333 overflow: hidden @media (max-width: 991px) margin-bottom: 5px &__model width: calc(100% - 350px) max-height: 1.4em font-size: 15px font-weight: 400 line-height: 1.4 color: #777 overflow: hidden @media (max-width: 991px) width: 100% margin-bottom: 5px font-size: 14px &__price display: flex flex-wrap: nowrap justify-content: flex-start align-items: center align-content: center width: 330px font-size: 15px font-weight: 400 line-height: 1.4 color: #777 @media (min-width: 992px) > p &:nth-child(1) width: calc((100% - 40px) / 2) &::before content: attr(data-title) &:nth-child(2) width: 40px text-align: center &:nth-child(3) width: calc((100% - 40px) / 2) text-align: right @media (max-width: 991px) position: relative width: 100% font-size: 13px > p &:nth-child(2) margin-left: 5px &:nth-child(3) position: absolute top: 0 right: 0 display: inline-block &__total display: flex flex-wrap: wrap justify-content: flex-end align-items: flex-end align-content: flex-end flex-direction: column width: 100% padding-top: 20px &-list width: 330px @media (max-width: 575px) width: 100% &-item display: flex justify-content: space-between align-items: flex-start width: 100% &:nth-child(n + 2) margin-top: 15px @media (max-width: 991px) margin-top: 10px p &:nth-child(1) font-size: 16px font-weight: 400 color: #555 @media (max-width: 991px) font-size: 15px span display: block width: 100% font-size: 14px color: #999 &:nth-child(2) font-size: 16px font-weight: 400 color: #777 @media (max-width: 991px) font-size: 15px &-sum display: flex justify-content: space-between align-items: center width: 100% margin-top: 15px @media (max-width: 991px) margin-top: 10px p &:nth-child(1) font-size: 16px font-weight: 400 color: #555 @media (max-width: 991px) font-size: 15px &:nth-child(2) font-family: $ftt font-size: 30px font-weight: 500 color: #df0000 &-note display: flex flex-wrap: wrap justify-content: flex-start align-items: flex-start align-content: flex-start width: 100% > p width: 60px font-size: 15px font-weight: 400 line-height: 1.4 color: #999 > div width: calc(100% - 60px) padding-left: 20px font-size: 15px font-weight: 400 line-height: 1.4 color: #555 @media (max-width: 991px) padding-left: 15px