@charset "EUC-JP";
html, div, span, a, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}

body {
  line-height: 1
}

ul, ol {
  list-style: none
}

blockquote, q {
  quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
  content: ''
}

del {
  text-decoration: line-through
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 0
}

img {
  vertical-align: bottom
}

input, select {
  vertical-align: middle
}

input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
  display: none
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.u-mb5 {
  margin-bottom: 5px
}

.u-mb40 {
  margin-bottom: 40px
}

.u-colorWhite {
  color: #fff
}

.u-font12 {
  font-size: 12px
}

.u-textLeft {
  text-align: left
}

.l-content {
  display: block;
  font: 12px/1.5 'Hiragino Kaku Gothic Pro', '¥Ò¥é¥®¥Î³Ñ¥´ Pro W3', '¥á¥¤¥ê¥ª', Meiryo, '£Í£Ó £Ð¥´¥·¥Ã¥¯', sans-serif
}

.l-content a, .l-content input, .l-content button {
  -webkit-transition: all .3s ease;
  transition: all .3s ease
}

.l-contentInner img {
  max-width: 100%
}

.c-squareBtn {
  position: relative;
  display: block;
  margin: auto;
  padding: .5em .8em;
  color: #333;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  border: 1px solid;
  border-radius: 3px;
  background-size: auto 200%;
  background-position: 0 100%;
  box-sizing: border-box;
  -webkit-transition: background-position .1s ease-out;
  transition: background-position .1s ease-out
}

.c-squareBtn:hover {
  top: 1px;
  color: #666;
  background-position: 0 0;
  text-decoration: none
}

.c-squareBtn[disabled] {
  opacity: .3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  pointer-events: none
}

.c-squareBtn--simple {
  border-color: #cacaca #b0b0b0 #9c9c9c;
  background-color: #f7f7f7;
  background-image: -webkit-linear-gradient(top, #fff 0, #f7f7f7 50%, #e5e5e5 100%);
  background-image: linear-gradient(to bottom, #fff 0, #f7f7f7 50%, #e5e5e5 100%);
  box-shadow: inset 0 1px 0 #fff
}

.c-squareBtn--simple:hover {
  border-color: #d7d7d7 #c4c4c4 #b5b5b5
}

.c-squareBtn--primary {
  border-color: #deb372 #ce9c4b #c1882e;
  background-color: #fcdc80;
  background-image: -webkit-linear-gradient(top, #fde5a0 0, #fcdc80 50%, #ffc01e 100%);
  background-image: linear-gradient(to bottom, #fde5a0 0, #fcdc80 50%, #ffc01e 100%);
  box-shadow: inset 0 1px 0 #fff1d1
}

.c-squareBtn--primary:hover {
  border-color: #e6c695 #dab578 #d1a662
}

.c-txtLink {
  color: #1a55c2;
  font-size: 16px
}

.c-txtLink:hover {
  text-decoration: none
}

.c-txtLink--center {
  margin: auto
}

.c-txtLink--arrowPrev span:before, .c-txtLink--arrowNext span:before {
  padding-right: .2em;
  width: 1em;
  height: 1em
}

.c-txtLink--arrowPrev span:before {
  content: '\03c'
}

.c-txtLink--arrowNext span:before {
  content: '\03e'
}

#modal-overlay {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, .5)
}

.c-modal {
  z-index: 100;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  margin: auto;
  border-radius: 5px
}

.c-modal .modal__inner {
  position: relative;
  max-height: calc(100vh - 60px);
  background: #fff
}

.c-modal .modal__closeBtn {
  position: absolute;
  top: 34px;
  right: 34px;
  width: 20px;
  height: 20px
}

.c-modal .modal__closeBtn span {
  position: absolute;
  top: -3px;
  right: 8px;
  display: inline-block;
  width: 3px;
  height: 25px;
  font-size: 0;
  background: #95989a;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}

.c-modal .modal__closeBtn span:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: -11px;
  width: 25px;
  height: 3px;
  margin-top: -2px;
  background: #95989a
}

.is-error {
  color: #c00
}

.is-error input {
  border-color: #c00
}

.c-formItem {
  padding: 14px 12px;
  width: 100%;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box
}

.c-formItem::-webkit-input-placeholder {
  color: #ccc
}

.c-formItem[readonly] {
  background-color: #ebebeb
}

.c-formItem[readonly]::-webkit-input-placeholder {
  color: #333
}

.c-formItem--name {
  width: 284px
}

.c-formItem--addr[readonly]::-webkit-input-placeholder {
  color: #ccc
}

.c-formItem--addr:last-child {
  margin: 0
}

.c-formItem--building {
  margin: 0
}

.c-formItem--zipCode, .c-formItem--email, .c-formItem--mobile {
  padding-left: 40px;
  background-image: url(//p.dmm.com/p/sp/basket/sprite_ico_address_150225.png);
  background-repeat: no-repeat;
  background-size: 25px auto
}

.c-formItem--zipCode {
  background-position: 5px 10px
}

.c-formItem--email {
  background-position: 5px -39px
}

.c-formItem--mobile {
  background-position: 5px -39px
}

.c-formItem--stickCol {
  width: 50%
}

.c-formItem--stickCol:first-of-type {
  border-radius: 6px 0 0 6px;
  border-right: none
}

.c-formItem--stickCol:nth-of-type(2) {
  border-radius: 0 6px 6px 0
}

.c-formItem--stickRow {
  margin: 0
}

.c-formItem--stickRow:first-of-type {
  border-bottom: none;
  border-radius: 3px 3px 0 0
}

.c-formItem--stickRow:nth-of-type(2) {
  border-radius: 0 0 3px 3px
}

.c-formItem[type=radio] {
  display: none
}

.c-formItem[type=radio]:checked+.c-formItem--radioTxt:after {
  content: '';
  top: 9px;
  left: 13px;
  width: 10px;
  height: 10px;
  background: #3b5998
}

.c-formItem--radioTxt {
  position: relative;
  display: block;
  padding: 0 0 10px 2em;
  font-size: 16px;
  line-height: 1.8;
  border: none
}

.c-formItem--radioTxt:before, .c-formItem--radioTxt:after {
  display: block;
  position: absolute;
  border-radius: 50%
}

.c-formItem--radioTxt:before {
  content: '';
  top: 6px;
  left: 10px;
  width: 14px;
  height: 14px;
  border: 1px solid #848484
}

.c-textLoading {
  margin: 1em .5em;
  color: #c00;
  font-size: 12px;
  text-align: center
}

.c-productOrder {
  color: #333;
  font-size: 14px;
  background: #fff;
  border-radius: 5px
}

.c-productOrderDetail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 30px
}

.c-productOrderDetail .preview__ttl {
  font-size: 16px
}

.c-productOrderDetail .preview__inner {
  margin-top: 10px;
  padding: 30px;
  border: 2px solid #e5e5e5
}

.c-productOrderDetail .previewInner__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.c-productOrderDetail .previewInner__item:nth-of-type(n+2) {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #e5e5e5
}

.c-productOrderDetail .previewInnerItem__tmb {
  -webkit-flex-basis: 130px;
  -ms-flex-preferred-size: 130px;
  flex-basis: 130px;
  max-width: 130px
}

.c-productOrderDetail .previewInnerItem__txt {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 15px;
  width: calc(100% - 130px)
}

.c-productOrderDetail .previewInnerItem__txtTtl {
  font-size: 16px
}

.c-productOrderDetail .previewInnerItem__txt dl dt {
  line-height: 2.5;
  color: #888;
  font-size: 12px
}

.c-productOrderDetail .previewInnerItem__txt dl dt:after {
  content: '¡§'
}

.c-productOrderDetail .previewInnerItem__price {
  margin: auto 0 0 auto;
  text-align: right
}

.c-productOrderDetail .previewInnerItem__price b {
  color: #c00;
  font-size: 22px
}

.c-productOrderDetail .previewInnerItem__price span {
  padding-right: .5em;
  color: #888
}

.c-productOrderDetail .select ol[class^=select__inner] .selectInner__item {
  counter-increment: product-order
}

.c-productOrderDetail .select ol[class^=select__inner] .selectInner__item .selectInnerItem__ttl:before {
  content: counter(product-order) ".";
  display: inline-block;
  padding-right: .5em
}

.c-productOrderDetail .selectInner__item:nth-of-type(n+2) {
  padding-top: 30px
}

.c-productOrderDetail .selectInnerItem__ttl {
  position: relative;
  font-size: 14px
}

.c-productOrderDetail .selectInnerItem__detail {
  margin-top: 13px;
  padding: 14px 20px;
  color: #888;
  background: #ebebeb
}

.c-productOrderDetail .selectInnerItem__detailTtl {
  display: block
}

.c-productOrderDetail .selectInnerItem__detailNote {
  color: #c00;
  font-size: 10px
}

.c-productOrderDetail .selectInnerItem__detail select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  display: block;
  margin: 7px 0 15px;
  width: 100%;
  height: 42px;
  color: #333;
  font-size: 14px;
  text-indent: 7px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff url(//p.dmm.com/p/general/ms/subscription/common/ico_selectArrow.png) no-repeat;
  background-position: center right 10px
}

.c-productOrderDetail .selectInnerItem__detail select[readonly], .c-productOrderDetail .selectInnerItem__detail select[disabled] {
  cursor: default;
  background: none
}

.c-productOrderDetail .selectInnerItem__detail select::-ms-expand {
  display: none
}

.productOrder__ttl {
  display: block;
  padding: 25px 0;
  font-size: 24px;
  text-align: center;
  border-bottom: 2px solid #e5e5e5
}

.productOrder__btnArea {
  padding: 30px 0;
  background: #ebebeb;
  border-radius: 0 0 5px 5px
}

.productOrder__btnArea button {
  width: 270px
}

.productOrderDetail__preview {
  margin-right: 15px;
  -webkit-flex-basis: 443px;
  -ms-flex-preferred-size: 443px;
  flex-basis: 443px
}

.productOrderDetail__select {
  -webkit-flex-basis: calc(100% - 443px);
  -ms-flex-preferred-size: calc(100% - 443px);
  flex-basis: calc(100% - 443px)
}

.c-productDetail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 16px
}

.c-productDetail .productDetail__tmb {
  width: 124px
}

.c-productDetail .productDetail__txt {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 1.5em
}

.c-productDetail .productDetail__txtTtl {
  display: block;
  padding-bottom: 10px;
  color: #333;
  font-size: 20px;
  font-weight: 700
}

.c-productDetail .productDetail__txt dl {
  font-size: 14px;
  line-height: 2
}

.c-productDetail .productDetail__txt dt {
  float: left;
  width: 4em
}

.c-productDetail .productDetail__txt dd {
  padding-left: 6em
}

.c-productDetail .productDetail__price {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 180px;
  color: #333;
  font-size: 12px;
  border-left: 1px solid #e5e5e5;
  box-sizing: border-box
}

.c-productDetail .productDetail__price span {
  font-size: 20px;
  font-weight: 700
}

.c-productDetail .productDetail__price b {
  display: block;
  padding: 5px 10px;
  font-size: 20px
}

.c-productDetail .productDetail__price p {
  color: #333;
  font-size: 14px;
  line-height: 1.8
}

.c-productHistory {
  margin-top: 22px;
  border: 1px solid #e5e5e5;
  width: 100%;
  font-size: 14px;
  box-sizing: border-box
}

.c-productHistory tr {
  text-align: center;
  border-bottom: 1px solid #e5e5e5
}

.c-productHistory .productHistory__headLine {
  color: #fff;
  background-color: #333
}

.c-productHistory .productHistory__headLine th {
  border-right: 1px solid #e5e5e5;
  padding: 8px 0;
  width: 15%;
  font-weight: 400;
  vertical-align: middle
}

.c-productHistory .productHistory__headLine th:last-child {
  border-right: 0;
  width: 10%
}

.c-productHistory .productHistory__list td {
  border-right: 1px solid #e5e5e5;
  padding: 8px 0;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  white-space: nowrap
}

.c-productHistory .productHistory__list td:last-child {
  border-right: 0
}

.c-productHistory .productHistory__all td {
  padding: 0;
  font-size: 14px
}

.c-productHistory .productHistory__all td:last-child {
  position: relative
}

.c-productHistory .productHistory__all td:last-child:after {
  content: '';
  position: absolute;
  top: -7px;
  left: 56%;
  bottom: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-top: 2px solid #919191;
  border-right: 2px solid #919191;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg)
}

.c-historyDetail {
  font-size: 12px;
  text-align: left;
  box-sizing: border-box
}

.c-historyDetail:not(:first-child) {
  padding-top: 15px
}

.c-historyDetail .historyDetail__headLine {
  display: block;
  padding: 5px 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle;
  background-color: #333
}

.c-historyDetail .historyDetail__inner {
  width: 100%;
  border: 1px solid #e5e5e5;
  white-space: nowrap;
  font-size: 14px
}

.c-historyDetail .historyDetail__item {
  border-bottom: 1px solid #e5e5e5
}

.c-historyDetail .historyDetail__item th {
  padding: 10px;
  vertical-align: middle;
  font-weight: 400;
  border-right: 1px solid #e5e5e5;
  background-color: #f2f2f2;
  width: 20%
}

.c-historyDetail .historyDetail__item td {
  padding: 5px 25px;
  vertical-align: middle;
  white-space: normal
}

.c-historyDetail .historyDetail__txt td {
  padding: 15px 0 10px;
  text-align: center
}

.c-historyDetail .historyDetail__txt td>* {
  margin: 0 auto
}

.c-historyDetail .historyDetail__txt td>*:not(:last-child) {
  margin-bottom: 7px
}

.c-status {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 2px .8em;
  max-width: 95px;
  color: #fff;
  box-sizing: border-box
}

.c-status--center {
  margin: auto
}

.c-status--large {
  width: 104px;
  max-width: 104px;
  height: 40px;
  padding: 0;
  font-size: 16px
}

.c-status--undispatched {
  background-color: #0e62bd
}

.c-status--preparing {
  background-color: #ffba00
}

.c-status--complete {
  background-color: #c00
}

.c-status--ordering {
  background-color: #0ebd58
}

.c-status--pending {
  background-color: #999
}

.c-informationArea {
  padding: 8px 13px;
  color: #c00;
  background-color: #feffde;
  border: 1px solid #c00
}

.c-informationArea .informationArea__ttl {
  font-weight: 400
}