@charset "UTF-8";

@media screen and (min-width: 769px) {
  /* ---- デザイン確認画面 ---- */
  .block-design--body .block-design-confirm-top {
    border-bottom: 1px solid #ebe5e5;
    height: 64px;
    padding: 18px 24px;
  }

  .block-design--body .design-confirm-title {
    color: #201d1d;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
  }

  .block-design--body .block-design-confirm--sub-title,
  .block-design--body .my-item-name-text {
    color: #201d1d;
    font-weight: 700;
  }

  .block-design-confirm-main {
    padding: 18px 24px;
  }

  .block-design-confirm-list {
    padding: 18px 24px;
  }

  /* ========== FLEX ROWS ========== */
  .block-design-confirm-main .row,
  .block-design-confirm-main .image-info .row {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    margin: -12px;
  }
  .block-design-confirm-main .image-info .row {
    margin: 0;
  }

  /* ========== COLUMNS ========== */
  .block-design-confirm-main .col {
    padding: 0;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .block-design-confirm-main .col-3 {
    flex: 0 0 35%;
    max-width: 35%;
  }
  .block-design-confirm-main .col-9 {
    flex: 0 0 65%;
    max-width: 65%;
  }

  /* ========== SPACING HELPERS ========== */
  .block-design-confirm-main .pt-3 { padding-top: 12px !important; }
  .block-design-confirm-main .pt-6 { padding-top: 24px !important; }
  .block-design-confirm-main .pr-3 { padding-right: 12px !important; }
  .block-design-confirm-main .pr-6 { padding-right: 24px !important; }
  .block-design-confirm-main .mt-6 { margin-top: 24px !important; }
  .block-design-confirm-main .py-3 { padding-bottom: 12px !important; padding-top: 12px !important; }

  /* ========== ALIGN HELPERS ========== */
  .block-design-confirm-main .align-start { align-items: flex-start !important; }
  .block-design-confirm-main .align-end   { align-items: flex-end !important; }

  /* ========== TEXT ========== */
  .block-design-confirm-main .my-item-name-text {
    font-size: 20px;
    line-height: 28px;
  }
  .block-design-confirm-main .item-color-title {
    align-items: center;
    color: #201d1d;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }

  /* ========== LINE ========== */
  .block-design-confirm-main .line {
    background: #ebe5e5;
    border: 1px solid #ebe5e5;
  }

  /* ========== ICON ========== */
  .block-design-confirm-main .v-icon,
  .block-design-confirm-main .v-icon.v-icon {
    align-items: center;
    display: inline-flex;
    font-feature-settings: "liga";
    font-size: 24px;
    justify-content: center;
    letter-spacing: normal;
    line-height: 1;
    position: relative;
    text-indent: 0;
    transition: .3s cubic-bezier(.25,.8,.5,1), visibility 0s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
  }
  .block-design-confirm-main .theme--light.v-icon {
    color: rgba(0, 0, 0, .54);
  }
  .block-design-confirm-main .v-icon:after,
  .block-design-confirm-main .v-icon.v-icon:after {
    background-color: currentColor;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: scale(1.3);
    transition: opacity .2s cubic-bezier(.4,0,.6,1);
    width: 100%;
  }

  /* ========== BUTTON ========== */
  .block-design-confirm-main .theme--light.v-btn.v-btn--icon {
    color: rgba(0, 0, 0, .54);
  }
  .block-design-confirm-main .v-btn.v-size--default {
    font-size: 14px;
    font-weight: 700;
  }
  .block-design-confirm-main .v-btn:before {
    background-color: currentColor;
    border-radius: inherit;
    bottom: 0;
    color: inherit;
    content: "";
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .2s cubic-bezier(.4,0,.6,1);
  }
  .block-design-confirm-main .v-btn__content {
    align-items: center;
    color: inherit;
    display: flex;
    flex: 1 0 auto;
    justify-content: inherit;
    line-height: normal;
    position: relative;
    transition: inherit;
    transition-property: opacity;
  }
  .block-design-confirm-main .v-btn--icon.v-size--default .v-icon {
    font-size: 24px;
    height: 24px;
    width: 24px;
  }
  .block-design-confirm-main .v-btn > .v-btn__content .v-icon {
    color: inherit;
  }
  .block-design-confirm-main  .view-edit-icon.v-btn.v-btn--icon.v-btn--round.theme--light.v-size--default[data-v-0a28236c] {
    background: rgba(32, 29, 29, .8);
    border-radius: 8px;
    height: 32px;
    width: 32px;
  }

  /* ========== IMAGE & RESPONSIVE ========== */
  .block-design-confirm-main .v-responsive {
    display: flex;
    flex: 1 0 auto;
    max-width: 100%;
    overflow: hidden;
    position: relative;
  }
  .block-design-confirm-main .v-image {
    z-index: 0;
  }
  .block-design-confirm-main .theme--light.v-image {
    color: rgba(0, 0, 0, .87);
  }
  .block-design-confirm-main .v-responsive__sizer {
    flex: 1 0 0px;
    transition: padding-bottom .2s cubic-bezier(.25,.8,.5,1);
  }
  .block-design-confirm-main .v-application--is-ltr .v-responsive__sizer~.v-responsive__content {
    margin-left: -100%;
  }
  .block-design-confirm-main .v-responsive__content {
    flex: 1 0 0px;
    max-width: 100%;
  }
  .block-design-confirm-main .v-image__image--contain {
    background-size: contain;
  }
  .block-design-confirm-main .v-image__image {
    background-repeat: no-repeat;
  }
  .block-design-confirm-main .v-image__image,
  .block-design-confirm-main .v-image__placeholder {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  /* ========== COLOR BOX ========== */
  .block-design-confirm-main .color-box {
    border: 1px solid rgba(32, 29, 29, .1);
    border-radius: 12px;
    box-sizing: border-box;
    height: 24px;
    width: 24px;
  }

  /* ========== OTHERS ========== */
  .block-design-confirm-main .right-remove-icon {
    display: inline-block;
    justify-content: space-between;
    text-align: right;
    width: 100%;
  }
  
  .img-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.img-modal-overlay.active {
  display: flex;
}
.img-modal-content {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 2px 24px rgba(0,0,0,0.25);
  padding: 62px 48px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInScale .2s;
}
@keyframes fadeInScale {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.img-modal-content img {
  max-width: 60vw;
  max-height: 60vh;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.10);
}
.img-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #f5f5f5;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  color: #888;
  transition: background 0.2s;
}
.img-modal-close:hover {
  background: #eee;
  color: #333;
}

.img-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(.4,0,.2,1); /* ゆっくり */
}
.img-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.confirm-modal-body {
  max-width: 520px;
}
.confirm-modal-body h2 {
  margin: 0 auto 37px;
  font-size: 20px;
}
.confirm-modal-body p {
  padding-left: 1em;
  text-indent: -1em;
}
.confirm-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 42px 0 0;
}
.confirm-modal-footer .btn-primary,
.confirm-modal-footer .btn-secondary {
          height: 28px;
        max-width: 180px;
}

.bottom-top {
    height: 72px;
}

.design-confirm-bottom
 {
    background: #f3f2f2;
    bottom: 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, .1);
    left: 0;
    padding: 16px 24px;
    position: fixed;
    right: 0;
}

.block-design-confirm-main .flex-row {
    flex-direction: row !important;
}

.block-design-confirm-main .d-flex {
    display: flex !important
;
}

#buz-btn, #buz-btn-small {
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
}


#buz-btn {
    height: 60px;
}

.v-btn:not(.v-btn--round).v-size--default {
    height: 40px;
}

.v-btn:not(.v-btn--round).v-size--default {
    min-width: 136px;
}
.v-btn:not(.v-btn--round).v-size--default {
    height: 40px;
    min-width: 71px;
    padding: 0 17.7777777778px;
}
.theme--light.v-btn.v-btn--has-bg {
    background-color: #f5f5f5;
}
.v-btn.v-size--default {
    font-size: 14px;
    font-weight: 700;
}
.v-btn.v-size--default, .v-btn.v-size--large {
    font-size: .875rem;
}
.theme--light.v-btn {
    color: rgba(0, 0, 0, .87);
}
[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
}
.v-btn--is-elevated {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.v-btn--block {
    display: flex
;
    flex: 1 0 auto;
    max-width: none;
    min-width: 100% !important;
}
.v-btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 500;
    justify-content: center;
    letter-spacing: .0892857143em;
    outline: 0;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    text-indent: .0892857143em;
    text-transform: uppercase;
    transition-duration: .28s;
    transition-property: box-shadow, transform, opacity;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}
.block-desgin--body-bottom [role=button],
.block-desgin--body-bottom [type=button],
.block-desgin--body-bottom [type=reset],
.block-desgin--body-bottom [type=submit],
.block-desgin--body-bottom button {
    color: inherit;
    cursor: pointer;
}

.block-desgin--body-bottom [type=button],
.block-desgin--body-bottom [type=reset],
.block-desgin--body-bottom [type=submit],
.block-desgin--body-bottom  button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}
button, input, select, textarea {
    background-color: transparent;
    border-style: none;
}
button, select {
    text-transform: none;
}
button {
    overflow: visible;
}

.v-btn__content {
    align-items: center;
    color: inherit;
    display: flex;
    flex: 1 0 auto;
    justify-content: inherit;
    line-height: normal;
    position: relative;
    transition: inherit;
    transition-property: opacity;
}

.v-btn:before {
    background-color: currentColor;
    border-radius: inherit;
    bottom: 0;
    color: inherit;
    content: "";
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .2s cubic-bezier(.4,0,.6,1);
}

.v-application .flex-row {
    flex-direction: row !important;
}
.v-application .d-flex {
    display: flex !important;
    
}


.justify-end {
    justify-content: flex-end !important;
}
.d-flex {
    display: flex !important
;
}

.flex-row {
    flex-direction: row !important;
}

.d-flex {
    display: flex !important
;
}



.pr-3 {
    padding-right: 12px !important;
}

.flex-row {
    flex-direction: row;
}

}