@import url(https://fonts.googleapis.com/css?family=Alegreya&display=swap);
@import url(https://fonts.googleapis.com/css?family=Nunito&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);
@import url(https://fonts.googleapis.com/css?family=Be+Vietnam+Pro&display=swap);
@import url(https://fonts.googleapis.com/css?family=Dosis&display=swap);
@import url(https://fonts.googleapis.com/css?family=Barlow+Condensed&display=swap);
@import url(https://fonts.googleapis.com/css?family=Play&display=swap);
@import url(https://fonts.googleapis.com/css?family=Lora&display=swap);
@import url(https://fonts.googleapis.com/css?family=Crimson Text&display=swap);
@import url(https://fonts.googleapis.com/css?family=Aldrich&display=swap);
.introjs-tooltipReferenceLayer * {
  font-family: 'Roboto', system-ui, sans-serif;
}
.tooltip-product-guide.introjs-tooltip{
    border-radius: 4px; 
}
.tooltip-product-guide .introjs-tooltip-header {
    padding: 0;
    position: unset;
    background-color: transparent;
}
.tooltip-product-guide .introjs-tooltip-title {
    width: 100% ;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 7%);
    overflow: hidden;
}
.tooltip-product-guide .introjs-skipbutton {
    color: #fff;
}
.tooltip-product-guide .introjs-skipbutton:focus,.tooltip-product-guide .introjs-skipbutton:hover {
    color: var(--builder-color-primary)
}
.tooltip-product-guide.hidden-close-tooltip .introjs-skipbutton{
    display: none;
}
.introjs-tooltip-title .title{
    padding: 12px 12px 0;
    background-color: #fff;
    font-size: 18px;
}
.tooltip-product-guide .introjs-tooltip-title .wrapper-image{
    border-radius: 4px 4px 0 0;
    background-color: transparent;
}
.tooltip-product-guide .introjs-tooltip-title .top-image-fix{
  height: 10px;
  width: 100%;
  border-radius: 4px 4px 0 0;
  background-color: #000000;
  box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px, rgb(0 0 0 / 70%) 0px 0px 0px 1px !important;
  z-index: 0;
}
.tooltip-product-guide .introjs-tooltip-title img{
    width: 100%;
    position: relative;
    z-index: 2;
}

.tooltip-product-guide .introjs-tooltiptext{
    padding: 8px 12px 12px;
    font-size: 15px;
}
.tooltip-product-guide .introjs-helperNumberLayer {
    position: absolute;
    right: 8px;
    top: 8px;
    line-height: 24px;
    height: 24px;
    background: rgba(0,0,0, 0.3);
    border-radius: 4px;
    color: #fff;
    padding: 0 8px;
    z-index: 3;
    font-size: 0.8rem;
}
.tooltip-product-guide .introjs-nextbutton {
    background-color: var(--builder-color-primary);
    color: #fff;
    outline: 0;
    text-decoration: none;
    border-color: var(--builder-color-primary);
    text-shadow: none;
}
.tooltip-product-guide .introjs-nextbutton:hover, .tooltip-product-guide .introjs-button:focus {
    background-color: var(--builder-color-primary);
    color: #fff;
    outline: 0;
    text-decoration: none;
    border-color: var(--builder-color-primary);
    box-shadow: none;
    text-shadow: none;
}

.tooltip-product-guide .introjs-prevbutton, .tooltip-product-guide .introjs-prevbutton:focus, .tooltip-product-guide .introjs-prevbutton:hover {
    border-color: var(--builder-color-primary);
    background-color: #fff;
    color: var(--builder-color-primary);
    text-shadow: none;
}

.tooltip-product-guide .introjs-tooltipbuttons {
    border: none;
    padding-bottom: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-right: 4px;
}
.tooltip-product-guide .introjs-skipbutton {
    display: flex;
    align-items: center;
    left: 12px;
    top: auto;
    bottom: 0px;
    color: var(--builder-color-primary);
    font-size: 15px;
    line-height: 140%;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100px;
    font-weight: 400;
    padding-right: 9px;
    overflow: hidden;
}
.introjs-helperLayer{
    box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px, rgb(0 0 0 / 70%) 0px 0px 0px 10000px !important;
}

.tooltip-product-guide .introjs-button {
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1.4;
    font-family: 'Roboto', system-ui, sans-serif;
}
.tooltip-product-guide.introjs-tooltip {
    width: 320px;
    max-width: 320px;
}
.tooltip-product-guide .next-label {
    display: flex;
    align-items: center;
    gap: 4px;
}
.introjs-button .text-label-intro{
  font-size: 16px;
}
.introjs-nextbutton.introjs-fullbutton{
  display: flex;
  flex-direction: row;
}
.introjs-nextbutton.introjs-fullbutton .text-label-intro{
  display: block;
}
.introjs-nextbutton .text-label-intro{
  display: none;
}
.tooltip-product-guide .img-placeholder{
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.wrapper-image{
    min-height: 179px;
    height: auto;
    position: relative;
    background-color: #f5f5f5;
}

.show-label-text .introjs-button {
    padding: 7px 12px;
}

.tooltip-product-guide a:active {
    opacity: unset;
}
.tooltip-product-guide .introjs-disableInteraction {
    opacity: 0.2;
}
@media (max-width: 767px){
    .tooltip-product-guide.introjs-tooltip {
        max-width: 65vw;
    }
    .wrapper-image {
        min-height: 141px;
    }
}
@media (max-width: 320px){
    .tooltip-product-guide.introjs-tooltip {
        max-width: 225px;
        width: 225px;
        min-width: 225px;
    }
    .wrapper-image {
        min-height: 125px;
    }
}

.btn-mypage-setting .dropdown-menu-dark{
  padding: 0;
  background-color: rgba(0, 0, 0, 0.9);
}
.btn-mypage-setting .dropdown-item{
  padding: 0.8rem 0.75rem;
}
.btn-mypage-setting .dropdown-item .bi{
  color: #FFFFFF;
  width: 0.9rem;
  height: 0.9rem;
}
.btn-mypage-setting .dropdown-divider{
  margin: 0;
}
.btn-mypage-setting .dropdown-menu li > button:focus{
  background-color: rgba(0, 0, 0, 0.8);
}
.btn-mypage-setting .dropdown-menu li:first-child > button:focus,
.btn-mypage-setting .dropdown-menu li:first-child > button:hover {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.btn-mypage-setting .dropdown-menu li:last-child > button:focus,
.btn-mypage-setting .dropdown-menu li:last-child > button:hover {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.builder-title{
  line-height: 1;
}
.publish-modal .modal-backdrop{
}
#publishModal .modal-content{
  max-width: 300px;
  margin: 0 auto;
  border: none;
}
#publishModal .modal-header{
  padding: 0;
  border-bottom: 0;
}
#publishModal .modal-body{
  margin-top: 2rem;
  padding-top: 0;
}
#publishModal .btn-close-publish-modal{
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}
.animate__animated.animate__zoomIn {
  --animate-duration: 0.2s;
}
#publishModal .modal-dialog{
  transform: translate(0);
}
#confirmRevertPageModal .modal-dialog{
  transform: translate(0);
}
.modal-confirm-revert-page .modal-content{
  max-width: 280px;
  margin: 0 auto;
}
.modal-revert-page-progress{
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-revert-page-progress .modal-content{
  width: auto;
  margin: 0 auto;
  border: none;
}
#button-copy-mypage-link {
  border-color: #ced4da;
}
#button-copy-mypage-link:hover{
  border-color: #6c757d;
}
.dropdown-intro-guide {
  border: none;
  box-shadow: rgb(51 51 51 / 20%) 0px 2px 8px 8px, rgb(51 51 51 / 20%) 0px 4px 16px 16px;
  min-width: 280px;
  padding: 0;
}
#startTourGuideModal .btn-close-start-tour-guide-modal{
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}
.modal-start-tour-guide .modal-content{
  width: 320px;
  max-width: 320px;
  border-radius: 4px;
}
.modal-start-tour-guide .image-wrapper img{
  border-radius: 4px 4px 0 0;
}
.modal-start-tour-guide .btn-close-start-tour-guide-modal{
  top: 0.5rem;
  right: 0.5rem;
  padding: 0;
  background-color: transparent;
  color: #FFF;
  border: none;
}
.modal-start-tour-guide .btn-close-start-tour-guide-modal .bi{
  color: #999;
  font-size: 1.25rem;
  line-height: 1;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}


.image1Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
/*  background-color: #f5f5f5;*/
}
.image1Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.image1Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.image1Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.image1Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}


.mypage-icon-picker .offcanvas-icon-picker{
  max-width: var(--max-width-custom);
  margin: auto;
  height: calc(100vh - 100px);
  border-radius: 8px 8px 0px 0px;
}
.mypage-icon-picker .presets-icon{
  width: 3.5rem; 
  height: 3.5rem; 
  line-height: 1;
  border: 1px solid #dee2e6;
  cursor: pointer;
  border-radius: 3px;
  color: #555;
}
.mypage-icon-picker .presets-icon.selected{
  background-color: #f1f1f1;
}
.mypage-icon-picker .presets-icon .bi{
  font-size: 2rem;
  line-height: 1.0;
}
.mypage-icon-picker .btn-preview-icon-picker{
  line-height: 1.0;
  padding: 0.1rem 0.5rem;
  cursor: default;
  width: 42px;
  height: 42px;
}
.mypage-icon-picker .btn-preview-icon-picker .bi{
  font-size: 1.5rem;
}
.mypage-icon-picker .btn-preview-icon-picker:hover,
.mypage-icon-picker .btn-preview-icon-picker:focus{
  background-color: #FFFFFF;
  color: var(--bs-btn-color);
}
.mypage-icon-picker .offcanvas-body{
  overflow: scroll;
  overflow-x: hidden;
  scrollbar-width: auto;
  z-index: 0;
}
.offcanvas-icon-picker{
  border-top: none!important;
}
.mypage-icon-picker .offcanvas-body::-webkit-scrollbar {
    width: auto; 
    background: #FFFFFF;
}
.mypage-icon-picker .offcanvas-body::-webkit-scrollbar-thumb {
    background: #f1f1f1;
}
.not-found-icon{
  font-size: 11px;
}


.link1Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
/*  background-color: #f5f5f5;*/
}
.link1Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.link1Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.link1Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.link1Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}
.link2Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.link2Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.link2Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.link2Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.link2Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}
.link3Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.link3Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.link3Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.link3Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.link3Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}
.link4Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: auto;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.link4Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.link4Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.link4Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.link4Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}


.mypage-social-icon-picker .offcanvas-social-icon-picker{
  max-width: var(--max-width-custom);
  margin: auto;
  height: auto;
  border-radius: 8px 8px 0px 0px;
}
.mypage-social-icon-picker .presets-icon{
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  cursor: pointer;
  border-radius: 3px;
  color: #555;
}
.mypage-social-icon-picker .presets-icon.selected{
  background-color: #dedede;
}


.bio-style-items .form-check{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.bio-style-items .form-check.checked{
  border-color: var(--bs-primary);
}
.bio-style-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.bio-style-items .form-check-input:focus{
  box-shadow: none;
}
.bio-style-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}


#blockProductManageCategoryModal .btn-edit{
  top: 8px;
  right: 20px;
}
#blockProductManageCategoryModal .btn-edit .btn{
  line-height: 1;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 6px;
  box-shadow: 0 2px 8px 8px rgb(0 0 0 / 10%) inset;
}
#blockProductManageCategoryModal .btn-edit .btn:hover,
#blockProductManageCategoryModal .btn-edit .btn:focus{
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  box-shadow: 0 2px 8px 8px rgb(0 0 0 / 15%) inset;
}
#blockProductManageCategoryModal .btn-edit .bi{
  color: rgba(255,255,255, 0.8);
  width: 20px;
  height: 20px;
}
#blockProductManageCategoryModal .btn-edit .dropdown-menu-dark{
  padding: 0;
  background-color: rgba(0, 0, 0, 0.9);
}
#blockProductManageCategoryModal .btn-edit .dropdown-item{
  padding: 0.8rem 0.75rem;
}
#blockProductManageCategoryModal .btn-edit .dropdown-item .bi{
  color: #FFFFFF;
  width: 0.9rem;
  height: 0.9rem;
}
#blockProductManageCategoryModal .btn-edit .dropdown-menu{
  min-width: auto;
}
#blockProductManageCategoryModal .btn-edit .dropdown-divider{
  margin: 0;
}
#blockProductManageCategoryModal .btn-edit .dropdown-menu li > button:focus{
  background-color: rgba(0, 0, 0, 0.8);
}
#blockProductManageCategoryModal .btn-edit .dropdown-menu li:first-child > button:active,
#blockProductManageCategoryModal .btn-edit .dropdown-menu li:first-child > button:hover {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
#blockProductManageCategoryModal .btn-edit .dropdown-menu li:last-child > button:active,
#blockProductManageCategoryModal .btn-edit .dropdown-menu li:last-child > button:hover {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
#editCategoryModal .modal-header,
#confirmDeleteCategoryModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#editCategoryModal .modal-content,
#confirmDeleteCategoryModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmDeleteCategoryModal{
  background-color: rgba(0, 0, 0, 0.5);
}
.category-list .bi-arrows-move{
  font-size: 20px;
  color: #999999;
}


#editProductModal .preview-link{
  text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;
}


#confirmDeleteProductModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmDeleteProductModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmDeleteProductModal{
  background-color: rgba(0, 0, 0, 0.5);
}
#confirmSaveChangeBlockProductModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmSaveChangeBlockProductModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmSaveChangeBlockProductModal{
  background-color: rgba(0, 0, 0, 0.5);
}
.product-list .bi-arrows-move{
  font-size: 20px;
  color: #999999;
}
.product1Swiper-items .form-check{
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.product1Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.product1Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.product1Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.product1Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}


#confirmDeleteSpotlightModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmDeleteSpotlightModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmDeleteSpotlightModal{
  background-color: rgba(0, 0, 0, 0.5);
}
#confirmSaveChangeBlockSpotlightModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmSaveChangeBlockSpotlightModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmSaveChangeBlockSpotlightModal{
  background-color: rgba(0, 0, 0, 0.5);
}
.spotlight-list .bi-arrows-move{
  font-size: 20px;
  color: #999999;
}

/*.spotlight-list .spotlight-item{
  min-height: 56px;
}*/


#confirmDeleteImageSliderModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmDeleteImageSliderModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmDeleteImageSliderModal{
  background-color: rgba(0, 0, 0, 0.5);
}
#confirmSaveChangeBlockImageSliderModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmSaveChangeBlockImageSliderModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmSaveChangeBlockImageSliderModal{
  background-color: rgba(0, 0, 0, 0.5);
}
.image-slider-list .bi-arrows-move{
  font-size: 20px;
  color: #999999;
}
.imageSlider1Swiper-items .form-check{
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.imageSlider1Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.imageSlider1Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.imageSlider1Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.imageSlider1Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}


#confirmDeleteCardModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmDeleteCardModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmDeleteCardModal{
  background-color: rgba(0, 0, 0, 0.5);
}
#confirmSaveChangeBlockCardModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmSaveChangeBlockCardModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmSaveChangeBlockCardModal{
  background-color: rgba(0, 0, 0, 0.5);
}
.card-list .bi-arrows-move{
  font-size: 20px;
  color: #999999;
}
.card1Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.card1Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.card1Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.card1Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.card1Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}
.card2Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
@media (max-width: 400px){
.card1Swiper-items .form-check{
    width: 140px;
    height: 140px;
}
.card2Swiper-items .form-check{
    width: 140px;
    height: 140px;
}
}
.card2Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.card2Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.card2Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.card2Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}
.card3Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.card3Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.card3Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.card3Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.card3Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}
.card4Swiper-items .form-check{
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.card4Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.card4Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.card4Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.card4Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}


#editMultilinksModal{
  overflow-y: hidden;
}
.multilinksedit1Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
/*  background-color: #f5f5f5;*/
}
.multilinksedit1Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.multilinksedit1Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.multilinksedit1Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.multilinksedit1Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}


#confirmDeleteMultilinksModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmDeleteMultilinksModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmDeleteMultilinksModal{
  background-color: rgba(0, 0, 0, 0.5);
}
#confirmSaveChangeBlockMultilinksModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmSaveChangeBlockMultilinksModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmSaveChangeBlockMultilinksModal{
  background-color: rgba(0, 0, 0, 0.5);
}
.multi-links-list .bi-arrows-move{
  font-size: 20px;
  color: #999999;
}
.multilinks1Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.multilinks1Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.multilinks1Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.multilinks1Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.multilinks1Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}
.multilinks2Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.multilinks2Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.multilinks2Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.multilinks2Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.multilinks2Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}
.multilinks3Swiper-items .form-check{
  position: relative;
  width: 170px;
  height: auto;
  margin: 0;
  padding: 0;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.multilinks3Swiper-items .form-check.checked{
  border-color: var(--bs-primary);
}
.multilinks3Swiper-items .form-check-input{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.25rem 0 0 0.25rem;
}
.multilinks3Swiper-items .form-check-input:focus{
  box-shadow: none;
}
.multilinks3Swiper-items .form-check-label img{
  width:100%; height:100%; -o-object-fit: cover; object-fit: cover; display: block;
}


.vc-chrome{
  width: 100%!important;
  box-shadow: none!important;
}
.mypage-color-picker .offcanvas-color-picker{
  max-width: var(--max-width-custom);
  margin: auto;
  height: auto;
  border-radius: 8px 8px 0px 0px;
}
.mypage-color-picker .button-picker{
  width: 3rem;
  height: 3rem;
  box-shadow: 0 1px 3px 3px rgb(0 0 0 / 10%);
}
.mypage-color-picker .presets-color{
  width: 2rem; 
  height: 2rem; 
  border: 1px solid #dee2e6;
  cursor: pointer;
}
.offcanvas-color-picker .presets-color.selected,
.offcanvas-color-picker .presets-color.selected{
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 4px 4px rgb(0 0 0 / 10%);
}
.offcanvas-color-picker{
  border-top: none!important;
}
.color-picker-offcanvas .modal-backdrop{
  z-index:21;
}


.block-divider-edit-modal-body .preview{
  padding: 12px 0 1px 0;
  background-color: var(--mypage-background-color);
  background-image: var(--mypage-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
  background-position: center center;
}
.block-divider-edit-modal-body .preview .preview-block{
  padding: var(--mypage-block-padding);
  margin: var(--mypage-block-margin);
  border-radius: var(--mypage-block-border-radius);
  background-color: var(--mypage-block-background-color);
  border-width: var(--mypage-block-border-width);
  border-color: var(--mypage-block-border-color);
  border-style: var(--mypage-block-border-style);
}
.block-divider-edit-modal-body .preview .block-divider{
  margin: var(--mypage-block-margin);
}


.mypage-datetime-picker .offcanvas-datetime-picker{
  max-width: var(--max-width-custom);
  margin: auto;
  height: auto;
  border-radius: 8px 8px 0px 0px;
}
.mypage-datetime-picker .offcanvas-body{
  overflow: scroll;
  overflow-x: hidden;
  scrollbar-width: 0;
}
.offcanvas-datetime-picker{
  border-top: none!important;
}
.mypage-datetime-picker .offcanvas-body::-webkit-scrollbar {
    width: 0; 
    background: #FFFFFF;
}
.mypage-datetime-picker .offcanvas-body::-webkit-scrollbar-thumb {
    background: #f1f1f1;
}


#editVoucherModal .preview-link{
  text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;
}
.bootstrap-datetimepicker-widget:before,
.bootstrap-datetimepicker-widget:after{
  border: none !important;
  content: none;
}
#editVoucherModal{
  overflow-y: hidden;
}
#editVoucherModal .modal-body{
  overflow-y: auto;
}


#confirmDeleteVoucherModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmDeleteVoucherModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmDeleteVoucherModal{
  background-color: rgba(0, 0, 0, 0.5);
}
#confirmSaveChangeBlockVoucherModal .modal-header{
  box-shadow: none!important;
  padding: 0.5rem 1rem!important;
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
}
#confirmSaveChangeBlockVoucherModal .modal-content{
  border-radius: var(--bs-modal-border-radius)!important;
}
#confirmSaveChangeBlockVoucherModal{
  background-color: rgba(0, 0, 0, 0.5);
}
.voucher-list .bi-arrows-move{
  font-size: 20px;
  color: #999999;
}
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover{
  text-shadow: none!important;
}


#editBlockModal .modal-header{
  padding: 0.5rem 0;
  border-bottom: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
  z-index: 99;
}
#editBlockModal .modal-header .btn{
  height: 2rem;
  line-height: 1;
}
#editBlockModal .modal-header .btn-back{
  padding: 0.25rem 0.5rem;
}
#editBlockModal .modal-header .title{
  color: #003366;
}
#editBlockModal .modal-header .bi{
  width: 1rem;
  color: #003366;
}


.mypage .block-link .btn-text{
  font-family:var(--mypage-paragraph-font-family); line-height: var(--mypage-button-text-line-height); font-weight: var(--mypage-button-text-font-weight);
}
.mypage .block-link .btn-normal{
  font-size: var(--mypage-button-text-size);
}
.mypage .block-link .btn-large{
  font-size: calc(var(--mypage-button-text-size)*1.125);
}
.mypage .block-link .btn-small{
  font-size: calc(var(--mypage-button-text-size)/1.125);
}


.mypage .block-embed iframe{
  max-width: 100%;
  vertical-align: middle;
  border-radius: 4px;
}


.product-wrapper .product-item{
  cursor: pointer;
  text-decoration: none;
}
.product-wrapper .product-item a{
  text-decoration: none;
}
.product-wrapper .product-item .product-image{
  width: 100%;
  height: auto;
  background-size: cover;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  margin: 0px auto;
  -o-object-fit: cover;
     object-fit: cover;
  outline-offset: -1px;
  /*-webkit-transition: width 1s ease, height 1s ease;
  -moz-transition: width 1s ease, height 1s ease;
  -o-transition: width 1s ease, height 1s ease;
  transition: width 1s ease, height 1s ease;*/
}
.product-wrapper .product-item .product-name{
  font-size: 13px;
  line-height: 18px;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  letter-spacing: -0.2px;
  margin-top: 0.25rem;
  color: var(--mypage-paragraph-color);
  font-family: var(--mypage-paragraph-font-family);
}
.not-found-product,
.no-product{
  font-family: var(--mypage-paragraph-font-family);
  color: var(--mypage-paragraph-color);
  font-size: calc(var(--mypage-paragraph-font-size)/var(--mypage-paragraph-ratio));
  margin-top: 0.25rem;
}
.search-wrapper .btn-outline-secondary{
  border: 1px solid #ced4da;
  border-left: none;
}
.block-product .btn-load-more-product {
  cursor: pointer;
}
.search-wrapper .btn-outline-secondary:hover{
  border-color: #6c757d;
}
.block-product .input-group .btn{
  z-index:0;
}
.block-product .btn-edit{
  z-index:2;
}
.swiper-slide.category{
  font-family: var(--mypage-paragraph-font-family); 
  color:var(--mypage-button-text-color); 
  border: var(--mypage-button-border-width) solid var(--mypage-button-border-color); 
  border-radius: var(--mypage-button-border-radius); 
  font-size: calc(var(--mypage-button-text-size)/var(--mypage-paragraph-ratio)); 
  font-weight: var(--mypage-button-text-font-weight); 
  line-height: var(--mypage-button-text-line-height);
  background-color: var(--mypage-button-background-color);
}
.swiper-slide.category.active{
  color: var(--mypage-button-background-color);
  background-color: var(--mypage-button-text-color);
}


.spotlight-items {
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 0;
}
.spotlight-items::-webkit-scrollbar{
  width: 0;
  height: 0;
  background: transparent;
}
.spotlight-items .swiper-button-prev{
  left: 0;
  top: 20%;
  height: 100%;
/*  background-color: rgba(255, 255, 255, 0.9);*/
}
.spotlight-items .swiper-button-next{
  right: 0;
  top: 20%;
  height: 100%;
/*  background-color: rgba(255, 255, 255, 0.9);*/
}
.spotlight-items .swiper-button-prev:after,
.spotlight-items .swiper-button-next:after{
  font-size: 28px;
  color: var(--mypage-button-text-color);
/*  color: #666;*/
}
/*.spotlight-items .swiper-wrapper .swiper-slide:first-child{
  padding-left: 32px;
}
.spotlight-items .swiper-wrapper .swiper-slide:last-child{
  padding-right: 32px;
}*/



.image-slider-items {
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 0;
}
.image-slider-items::-webkit-scrollbar{
  width: 0;
  height: 0;
  background: transparent;
}
.image-slider-items .swiper-button-prev{
  left: 0;
  top: 8%;
  height: 100%;
}
.image-slider-items .swiper-button-next{
  right: 0;
  top: 8%;
  height: 100%;
}
.image-slider-items .swiper-button-prev:after,
.image-slider-items .swiper-button-next:after{
  font-size: 24px;
  color: var(--mypage-button-text-color);
}
.image-slider-items .swiper-pagination-bullet-active{
  background-color: var(--mypage-main-color);
}
.image-slider-items .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: 24px;
}


.card-items {
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 0;
}
.card-items::-webkit-scrollbar{
  width: 0;
  height: 0;
  background: transparent;
}
.card-items .swiper-button-prev{
  left: 0;
  top: 10%;
  height: 100%;
}
.card-items .swiper-button-next{
  right: 0;
  top: 10%;
  height: 100%;
}
.card-items .swiper-button-prev:after,
.card-items .swiper-button-next:after{
  font-size: 24px;
  color: var(--mypage-button-text-color);
}
.card-items .swiper-pagination-bullet-active{
  background-color: var(--mypage-main-color);
}
.card-items .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{
  position: relative;
  bottom: 0;
}
.card-items .card-label{
  max-width: 130px;
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px;
  background-color: rgb(255, 255, 255);
  color: rgba(23,23,23,1);
  text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.block-card .title{
  text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.block-card .title-2{
  text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.block-card .description{
  font-family: var(--mypage-paragraph-font-family);font-weight: var(--mypage-paragraph-font-weight);line-height: var(--mypage-paragraph-line-height);color: var(--mypage-paragraph-color);font-size: var(--mypage-paragraph-font-size);
  text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.block-card .btn-see-more-card{
  font-family: var(--mypage-paragraph-font-family); color:var(--mypage-button-text-color); border: var(--mypage-button-border-width) solid var(--mypage-button-border-color); border-radius: var(--mypage-button-border-radius); font-size: var(--mypage-button-text-size); font-weight: var(--mypage-button-text-font-weight); line-height: var(--mypage-button-text-line-height); background-color: var(--mypage-button-background-color); box-shadow: var(--mypage-button-box-shadow);
}


.mypage .block-multilinks .btn-text{
  font-family:var(--mypage-paragraph-font-family); line-height: var(--mypage-button-text-line-height); font-weight: var(--mypage-button-text-font-weight);
}


.voucher-wrapper .voucher-item{
  cursor: pointer;
  text-decoration: none;
  background-color: #fff;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%);
  font-family: var(--mypage-paragraph-font-family);
}
.voucher-wrapper .voucher-item a{
  text-decoration: none;
}
.voucher-wrapper .voucher-item .voucher-image{
  width: 100%;
  height: auto;
  background-size: cover;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  margin: 0px auto;
  -o-object-fit: cover;
     object-fit: cover;
  outline-offset: -1px;
}
.voucher-wrapper .voucher-item .voucher-name{
  font-size: 13px;
  line-height: 13px;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  letter-spacing: -0.2px;
  color: var(--mypage-paragraph-color);
  font-family: var(--mypage-paragraph-font-family);
}
.btn-copy-voucher {
  font-size: 12px;
  padding: 0.3rem 0;
  font-family: var(--mypage-paragraph-font-family); 
  color:var(--mypage-button-text-color); 
  border: var(--mypage-button-border-width) solid var(--mypage-button-border-color); 
  border-radius: var(--mypage-button-border-radius); 
  font-weight: var(--mypage-button-text-font-weight); 
  line-height: var(--mypage-button-text-line-height); 
  background-color: var(--mypage-button-background-color); 
  box-shadow: var(--mypage-button-box-shadow);
  cursor: pointer;
}
.btn-copy-voucher-lg {
  font-size: var(--mypage-button-text-size);
  font-family: var(--mypage-paragraph-font-family); 
  color: var(--mypage-button-text-color); 
  border: var(--mypage-button-border-width) solid var(--mypage-button-border-color); 
  border-radius: var(--mypage-button-border-radius); 
  font-weight: var(--mypage-button-text-font-weight); 
  line-height: var(--mypage-button-text-line-height); 
  background-color: var(--mypage-button-background-color); 
  box-shadow: var(--mypage-button-box-shadow);
  cursor: pointer;
}
.btn-copy-voucher-outline-lg {
  font-size: var(--mypage-button-text-size);
  font-family: var(--mypage-paragraph-font-family); 
  color: var(--mypage-button-background-color);
  border: var(--mypage-button-border-width) solid var(--mypage-button-border-color); 
  border-radius: var(--mypage-button-border-radius); 
  font-weight: var(--mypage-button-text-font-weight); 
  line-height: var(--mypage-button-text-line-height); 
  box-shadow: var(--mypage-button-box-shadow);
  background-color: var(--mypage-button-text-color);;
  cursor: pointer;
}
.voucher-wrapper .voucher-item a{
  color: var(--mypage-paragraph-color)!important;
}
#voucherDetailModal {
  font-family: var(--mypage-paragraph-font-family);
}
#voucherDetailModal .voucher-image{
  width: 100%;
  height: auto;
  background-size: cover;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  margin: 0px auto;
  -o-object-fit: cover;
     object-fit: cover;
  outline-offset: -1px;
}
.block-voucher .input-group .btn{
  z-index:0;
}
.not-found-voucher{
  font-family: var(--mypage-paragraph-font-family);
  color: var(--mypage-paragraph-color);
  font-size: calc(var(--mypage-paragraph-font-size)/var(--mypage-paragraph-ratio));
  margin-top: 0.25rem;
}
#button-copy-voucher-modal-detail {
  border-color: #ced4da;
}
#button-copy-voucher-modal-detail:hover{
  border-color: #6c757d;
}


.blocks-wrapper .btn.btn-add-block{
  bottom: 24px;
  padding: 0.75rem;
  line-height: 1;
  background-color: #003366;
  border-radius: 50%;
  box-shadow: 0 2px 8px 8px rgba(255,255,255,0.1), 0 4px 16px 16px rgba(255,255,255,0.1), 0 8px 32px 32px rgba(255,255,255,0.1), 0 16px 64px 64px rgba(255,255,255,0.1), 0 0 2px 0px white inset;
  border: 1px solid #FFFFFF;
  z-index: 1;
}
.blocks-wrapper .btn.btn-add-block:active,
.blocks-wrapper .btn.btn-add-block:focus{
  background-color: #003366;
  box-shadow: 0 2px 8px 8px rgb(255,255,255,0.1), 0 4px 16px 16px rgb(255,255,255,0.1) 0 0 4px 0px #003366 inset;
}
.blocks-wrapper .btn.btn-add-block .bi{
  width: 1.5rem;
  height: 1.5rem;
  color: #FFFFFF;
}
#chooseBlockTypeModal .modal-header{
  padding: 0.5rem 0;
  border-bottom: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
  z-index: 1;
}
#chooseBlockTypeModal .modal-header .btn{
  height: 2rem;
  line-height: 1;
}
#chooseBlockTypeModal .modal-header .btn-back{
  padding: 0.25rem 0.5rem;
}
#chooseBlockTypeModal .modal-header .title{
  color: #003366;
}
#chooseBlockTypeModal .modal-header .bi{
  width: 1rem;
  color: #003366;
}
#chooseBlockTypeModal,
#editBlockModal{
  background-color: #F2F3F5;
}
#chooseBlockTypeModal .modal-dialog,
#editBlockModal .modal-dialog{
  transform: translate(0);
}
#chooseBlockTypeModal .disable-add-block{
  top: 0;
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  color: rgba(0, 0, 0, 0.6);
}
@keyframes blink {
50% {
/*        border: solid 1px #003366;*/
        box-shadow: 0 0 64px rgb(0 123 255 / 50%);
}
}
.blink-shadow {
  animation: blink 1.0s infinite;
}
.block-item-select .icon-wrapper{
  width: 50px;
  height: 50px;
}
.block-item-select{
  box-shadow: 0 2px 4px #003162B5;
  cursor: pointer;
  background-color: #FFFFFF;
}
.block-item-select .text{
  color:#003162;
}
.block-item-select:hover{
  background-color: #0078db;
  color: #FFFFFF;
}
.block-item-select .icon{
  background-position: center;
  background-repeat: none;
  background-size: contain;
}
.block-item-select .icon-block-text {
  background-image: url('/assets/img/builder/icon_block_text.png');
}
.block-item-select:hover .icon-block-text{
  background-image: url('/assets/img/builder/icon_block_text_2.png');
}
.block-item-select .icon-block-image {
  background-image: url('/assets/img/builder/icon_block_image.png');
}
.block-item-select:hover .icon-block-image{
  background-image: url('/assets/img/builder/icon_block_image_2.png');
}
.block-item-select .icon-block-link {
  background-image: url('/assets/img/builder/icon_block_link.png');
}
.block-item-select:hover .icon-block-link{
  background-image: url('/assets/img/builder/icon_block_link_2.png');
}
.block-item-select .icon-block-divider {
  background-image: url('/assets/img/builder/icon_block_divider.png');
}
.block-item-select:hover .icon-block-divider{
  background-image: url('/assets/img/builder/icon_block_divider_2.png');
}
.block-item-select .icon-block-bio {
  background-image: url('/assets/img/builder/icon_block_bio.png');
}
.block-item-select:hover .icon-block-bio{
  background-image: url('/assets/img/builder/icon_block_bio_2.png');
}
.block-item-select .icon-block-spotlight {
  background-image: url('/assets/img/builder/icon_block_spotlight.png');
}
.block-item-select:hover .icon-block-spotlight{
  background-image: url('/assets/img/builder/icon_block_spotlight_2.png');
}
.block-item-select .icon-block-card {
  background-image: url('/assets/img/builder/icon_block_card.png');
}
.block-item-select:hover .icon-block-card{
  background-image: url('/assets/img/builder/icon_block_card_2.png');
}
.block-item-select .icon-block-image_slider{
  background-image: url('/assets/img/builder/icon_block_image_slider.png');
}
.block-item-select:hover .icon-block-image_slider{
  background-image: url('/assets/img/builder/icon_block_image_slider_2.png');
}
.block-item-select .icon-block-multi_links{
  background-image: url('/assets/img/builder/icon_block_multi_links.png');
}
.block-item-select:hover .icon-block-multi_links{
  background-image: url('/assets/img/builder/icon_block_multi_links_2.png');
}
.block-item-select .icon-block-product{
  background-image: url('/assets/img/builder/icon_block_product.png');
}
.block-item-select:hover .icon-block-product{
  background-image: url('/assets/img/builder/icon_block_product_2.png');
}
.block-item-select .icon-block-voucher{
  background-image: url('/assets/img/builder/icon_block_voucher.png');
}
.block-item-select:hover .icon-block-voucher{
  background-image: url('/assets/img/builder/icon_block_voucher_2.png');
}
.block-item-select .icon-block-embedded{
  background-image: url('/assets/img/builder/icon_block_embedded.png');
}
.block-item-select:hover .icon-block-embedded{
  background-image: url('/assets/img/builder/icon_block_embedded_2.png');
}
.block-item-select:hover .text{
  color: #FFFFFF;
}
.block-item-select .text_1{
  font-size: 18px;
}
.block-item-select .text_2{
  font-size: 15px;
}
@media (max-width: 450px) {
.block-item-select .icon-wrapper{
    width: 33px;
    height: 33px;
}
.block-item-select .text_1{
    font-size: 13px;
}
.block-item-select .text_2{
    font-size: 11px;
}
}


.color-setting-modal.modal-open .modal-backdrop{
  opacity: 0;
}


.modal-background-setting .background-color,
.modal-background-setting .main-color,
.modal-background-setting .secondary-color{
  width: 2.5rem; 
  height: 2.5rem; 
  border: 1px solid #dee2e6;
}
.modal-background-setting .background-color.selected,
.modal-background-setting .main-color.selected,
.modal-background-setting .secondary-color.selected{
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 4px 4px rgb(0 0 0 / 10%);
}
.modal-background-setting .preview{
  padding: 12px 0 1px 0;
}
.modal-background-setting .preview .preview-block{
  padding: var(--mypage-block-padding);
  margin: var(--mypage-block-margin);
  border-radius: var(--mypage-block-border-radius);
  background-color: var(--mypage-block-background-color);
  border-width: var(--mypage-block-border-width);
  border-color: var(--mypage-block-border-color);
  border-style: var(--mypage-block-border-style);
}
.img-wrapper{
  width: 120px;
  height: 120px;
  border-radius: 8px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
}
.modal-background-setting .btn-gradient-direction{
  height: 2.5rem;
}
.background-setting-modal.modal-open .modal-backdrop{
  opacity: 0;
}


.modal-block-setting .block-background-color,
.modal-block-setting .block-border-color{
  width: 2.5rem; 
  height: 2.5rem; 
  border: 1px solid #dee2e6;
}
.modal-block-setting .block-background-color.selected,
.modal-block-setting .block-border-color.selected{
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 4px 4px rgb(0 0 0 / 10%);
}
.modal-block-setting .preview{
  padding: 12px 0 1px 0;
  background-color: var(--mypage-background-color);
  background-image: var(--mypage-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
  background-position: center center;
}
.block-setting-modal.modal-open .modal-backdrop{
  opacity: 0;
}


.modal-title-setting .title-color{
  width: 2.5rem; 
  height: 2.5rem; 
  border: 1px solid #dee2e6;
}
.modal-title-setting .title-color.selected,
.modal-title-setting .title-color.selected{
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 4px 4px rgb(0 0 0 / 10%);
}
.modal-title-setting .preview{
  max-height: 230px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 12px 0;
  background-color: var(--mypage-background-color);
  background-image: var(--mypage-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
  background-position: center center;
  box-shadow: 0 -1px 2px rgb(0 0 0 / 7%), 0 -2px 4px rgb(0 0 0 / 7%), 0 -4px 8px rgb(0 0 0 / 7%), 0 -8px 16px rgb(0 0 0 / 7%);
}
.modal-title-setting .preview-block{
  padding: var(--mypage-block-padding);
  margin: var(--mypage-block-margin);
  border-radius: var(--mypage-block-border-radius);
  background-color: var(--mypage-block-background-color);
  border-width: var(--mypage-block-border-width);
  border-color: var(--mypage-block-border-color);
  border-style: var(--mypage-block-border-style);
}
.title-setting-modal.modal-open .modal-backdrop{
  opacity: 0;
}


.modal-paragraph-setting .paragraph-color{
  width: 2.5rem; 
  height: 2.5rem; 
  border: 1px solid #dee2e6;
}
.modal-paragraph-setting .paragraph-color.selected,
.modal-paragraph-setting .paragraph-color.selected{
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 4px 4px rgb(0 0 0 / 10%);
}
.modal-paragraph-setting .preview{
  overflow-x: hidden;
  padding: 12px 0;
  background-color: var(--mypage-background-color);
  background-image: var(--mypage-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
  background-position: center center;
}
.modal-paragraph-setting .preview-block{
  padding: var(--mypage-block-padding);
  margin: var(--mypage-block-margin);
  border-radius: var(--mypage-block-border-radius);
  background-color: var(--mypage-block-background-color);
  border-width: var(--mypage-block-border-width);
  border-color: var(--mypage-block-border-color);
  border-style: var(--mypage-block-border-style);
}
.paragraph-setting-modal.modal-open .modal-backdrop{
  opacity: 0;
}


.modal-button-setting .title-color{
  width: 2.5rem; 
  height: 2.5rem; 
  border: 1px solid #dee2e6;
}
.modal-button-setting .title-color.selected,
.modal-button-setting .title-color.selected{
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 4px 4px rgb(0 0 0 / 10%);
}
.modal-button-setting .preview{
  max-height: 230px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 24px 0;
  background-color: var(--mypage-block-background-color);
  box-shadow: 0 -1px 2px rgb(0 0 0 / 7%), 0 -2px 4px rgb(0 0 0 / 7%), 0 -4px 8px rgb(0 0 0 / 7%), 0 -8px 16px rgb(0 0 0 / 7%);
}
.button-setting-modal.modal-open .modal-backdrop{
  opacity: 0;
}


.setting-item-select .icon-wrapper{
  width: 50px;
  height: 50px;
}
.setting-item-select{
  box-shadow: 0 2px 4px #003162B5;
  cursor: pointer;
  background-color: #FFFFFF;
}
.setting-item-select .text{
  color:#003162;
}
.setting-item-select:hover{
  background-color: #0078db;
  color: #FFFFFF;
}
.setting-item-select .icon{
  background-position: center;
  background-repeat: none;
  background-size: contain;
}
.setting-item-select .icon-setting-background {
  background-image: url('/assets/img/builder/icon_setting_background.png');
}
.setting-item-select:hover .icon-setting-background{
  background-image: url('/assets/img/builder/icon_setting_background_2.png');
}
.setting-item-select .icon-setting-block {
  background-image: url('/assets/img/builder/icon_setting_block.png');
}
.setting-item-select:hover .icon-setting-block{
  background-image: url('/assets/img/builder/icon_setting_block_2.png');
}
.setting-item-select .icon-setting-paragraph {
  background-image: url('/assets/img/builder/icon_setting_paragraph.png');
}
.setting-item-select:hover .icon-setting-paragraph{
  background-image: url('/assets/img/builder/icon_setting_paragraph_2.png');
}
.setting-item-select .icon-setting-title {
  background-image: url('/assets/img/builder/icon_setting_title.png');
}
.setting-item-select:hover .icon-setting-title{
  background-image: url('/assets/img/builder/icon_setting_title_2.png');
}
.setting-item-select .icon-setting-button {
  background-image: url('/assets/img/builder/icon_setting_button.png');
}
.setting-item-select:hover .icon-setting-button{
  background-image: url('/assets/img/builder/icon_setting_button_2.png');
}
.setting-item-select:hover .text{
  color: #FFFFFF;
}
.setting-item-select .text_1{
  font-size: 18px;
}
.setting-item-select .text_2{
  font-size: 15px;
}
@media (max-width: 450px) {
.setting-item-select .icon-wrapper{
    width: 33px;
    height: 33px;
}
.setting-item-select .text_1{
    font-size: 13px;
}
.setting-item-select .text_2{
    font-size: 11px;
}
}


#previewThemeModal .modal-header{
  padding: 0.5rem 0;
  border-bottom: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
  z-index: 11;
}
#previewThemeModal .modal-header .btn{
  height: 2rem;
  line-height: 1;
}
#previewThemeModal .modal-header .title{
  color: #003366;
}
#previewThemeModal .modal-header .bi{
  width: 1rem;
  color: #003366;
}
#previewThemeModal .modal-body{
  overflow-y: hidden;
}
#previewThemeModal .btn-back{
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}
#previewThemeModal .modal-footer-inner .btn{
  margin: calc(var(--bs-modal-footer-gap) * .5);
}
.modal-confirm-change-theme{
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-confirm-change-theme .modal-content{
  max-width: 280px;
  margin: 0 auto;
  border: none;
}
#confirmApplyThemeModal .modal-content{
}
#confirmApplyThemeModal .modal-footer{
  box-shadow: none;
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
}
.modal-change-theme-progress{
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-change-theme-progress .modal-content{
  width: auto;
  margin: 0 auto;
  border: none;
}
.theme-store .theme-image{
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  aspect-ratio: 9 / 16;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.theme-store .theme-text{
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(255 255 255 / 100%);
  font-weight: 400;
}
.theme-store .theme-item{
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%) inset;
  font-size: 12px;
  font-weight: 700;
  overflow-y: hidden;
}
#buttonSwitchPreview {
  padding: 0.375rem 0.1rem;
  margin-rignt: 0.5rem;
}
#buttonSwitchPreview .bi{
    width: 2rem!important;
    font-size: 1.5rem;
    font-weight: 400;
}
#changeThemeOptionModal .modal-content,
#confirmApplyThemeModal .modal-content,
#changeThemeProgressModal .modal-content{
  background-color: var(--bs-modal-bg)!important;
  border-radius: var(--bs-modal-border-radius)!important;
}
#changeThemeOptionModal .modal-header,
#confirmApplyThemeModal .modal-header,
#changeThemeProgressModal .modal-header{
    box-shadow: none!important;
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)!important;
    padding: var(--bs-modal-header-padding)!important;
    border-top-left-radius: var(--bs-modal-inner-border-radius)!important;
    border-top-right-radius: var(--bs-modal-inner-border-radius)!important;
}
#changeThemeOptionModal .modal-body,
#confirmApplyThemeModal .modal-body,
#changeThemeProgressModal .modal-body{
    padding: var(--bs-modal-padding)!important;
}
#changeThemeOptionModal .modal-footer,
#confirmApplyThemeModal .modal-footer,
#changeThemeProgressModal .modal-footer{
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5)!important;
    border-bottom-right-radius: var(--bs-modal-inner-border-radius)!important;
    border-bottom-left-radius: var(--bs-modal-inner-border-radius)!important;
}
.btn-20230526{
  background-color: #003366;
  color: #FFF;
  box-shadow: 0 4px 8px -4px rgb(0 51 102 / 7%), 0 8px 16px -4px rgb(0 51 102 / 70%);
  width: 100%;
}
.btn-20230526:hover,
.btn-20230526:active{
  background-color: #03498f;
  color: #FFF;
}


.mypage-setting-buttons{
  box-shadow: rgb(0 0 0 / 7%) 0px -1px 2px, rgb(0 0 0 / 7%) 0px -2px 4px, rgb(0 0 0 / 7%) 0px -4px 8px, rgb(0 0 0 / 7%) 0px -8px 16px, rgb(0 0 0 / 7%) 0px -16px 32px;
  z-index: 1;
  padding: 16px 12px;
}


#previewDesignModal .modal-header{
  padding: 0.5rem 0;
  border-bottom: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
  z-index: 11;
}
#previewDesignModal .modal-header .btn{
  height: 2rem;
  line-height: 1;
}
#previewDesignModal .modal-header .title{
  color: #003366;
}
#previewDesignModal .modal-header .bi{
  width: 1rem;
  color: #003366;
}
#previewDesignModal .modal-body{
  overflow-y: hidden;
}
#previewDesignModal .btn-back{
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}
#mypageSettingsModal .modal-header{
  padding: 0.5rem 0;
  border-bottom: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
  z-index: 11;
}
#mypageSettingsModal .modal-header .btn{
  height: 2rem;
  line-height: 1;
}
#mypageSettingsModal .modal-header .title{
  color: #003366;
}
#mypageSettingsModal .modal-header .bi{
  width: 1rem;
  color: #003366;
}
#mypageSettingsModal .modal-body{
  overflow-y: hidden;
}
#mypageSettingsModal .btn-back{
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}
#mypageSettingsModal .modal-content{
  background-color: transparent;
}
#themeStoreModal .modal-header{
  padding: 0.5rem 0;
  border-bottom: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
  z-index: 11;
}
#themeStoreModal .modal-header .btn{
  height: 2rem;
  line-height: 1;
}
#themeStoreModal .modal-header .title{
  color: #003366;
}
#themeStoreModal .modal-header .bi{
  width: 1rem;
  color: #003366;
}
#themeStoreModal .modal-body{
  overflow-y: hidden;
}
#themeStoreModal .btn-back{
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}
/*.btn-add-block-wrapper{
    bottom:0;
    padding-bottom: 24px;
}
.btn-add-block-wrapper .btn.btn-add-block{
  padding: 0.75rem;
  line-height: 1;
  background-color: #003366;
  border-radius: 50%;
  box-shadow: 0 2px 8px 8px rgba(255,255,255,0.1), 0 4px 16px 16px rgba(255,255,255,0.1), 0 8px 32px 32px rgba(255,255,255,0.1), 0 16px 64px 64px rgba(255,255,255,0.1), 0 0 2px 0px white inset;
  border: 1px solid #FFFFFF;
}
.btn-add-block-wrapper .btn.btn-add-block:active,
.btn-add-block-wrapper .btn.btn-add-block:focus{
  background-color: #003366;
  box-shadow: 0 2px 8px 8px rgb(255,255,255,0.1), 0 4px 16px 16px rgb(255,255,255,0.1) 0 0 4px 0px #003366 inset;
}
.btn-add-block-wrapper .btn.btn-add-block .bi{
  width: 1.5rem;
  height: 1.5rem;
  color: #FFFFFF;
}*/

:root{
	--max-width-custom: 500px;
	--builder-color-primary: #003366;
	--bs-primary-rgb: 0,51,102;
	--bs-primary: #003366;
	--bs-highlight-bg: #fff3cd;
}

html {
    overflow: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
}
body{
	font-family: system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    margin:0!important;
    height: 100%;
}

::-webkit-scrollbar {
    width: 0; 
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: transparent;
}

.disable-scroll {
	height: 100%;
	overflow: hidden;
	width: 100%;
	position: fixed;
}
.stop-scroll{
	height: 100%;
	width: 100%;
	overflow: hidden;
}
#app{
	height: 100%;
	width: 100%;
}
.mypage{
	display: flex; 
	flex-direction: column;
	height: 100%;
}
.mypage:before{
    background-color: var(--mypage-background-color);
	background-image: var(--mypage-background-image);
	background-repeat: no-repeat;
    background-size: cover;
    -o-object-fit: cover;
       object-fit: cover;
    background-position: center center;
	content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.lp-container{
	padding: 1rem 0 0 0;
}
.mypage-wrapper{
	margin: auto;
	max-width: var(--max-width-custom);
}
.mypage-spinner-border {
	border-width: 0.2rem;
	color: #d0d4d9;
}
.page-not-found{
	color: #333333;
	font-size: 0.8125rem;
	margin-top: 1rem;
}
.copyright {
	text-align: center;
	font-size: 0.8125rem;
	padding: 0.5rem 0 2.5rem 0;
}
.mypage .block{
	padding: var(--mypage-block-padding);
	margin: var(--mypage-block-margin);
	border-radius: var(--mypage-block-border-radius);
	background-color: var(--mypage-block-background-color);
	border-width: var(--mypage-block-border-width);
	border-color: var(--mypage-block-border-color);
	border-style: var(--mypage-block-border-style);
	box-shadow: var(--mypage-block-shadow);
}
.mypage h1, .mypage h2, .mypage h3, .mypage h4, .mypage h5, .mypage h6{
	font-family: var(--mypage-heading-font-family);
	font-weight: var(--mypage-heading-font-weight);
	line-height: var(--mypage-heading-font-line-height);
	color: var(--mypage-heading-color);
}
.mypage h6{
	font-size: calc(var(--mypage-heading-font-size));
}
.mypage h5{
	font-size: calc(var(--mypage-heading-font-size)*var(--mypage-heading-ratio));
}
.mypage h4{
	font-size: calc(var(--mypage-heading-font-size)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio));
}
.mypage h3{
	font-size: calc(var(--mypage-heading-font-size)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio));
}
.mypage h2{
	font-size: calc(var(--mypage-heading-font-size)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio));
}
.mypage h1{
	font-size: calc(var(--mypage-heading-font-size)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio)*var(--mypage-heading-ratio));
}
.mypage p, .mypage .lead, .mypage .lead-2{
	font-family: var(--mypage-paragraph-font-family);
	font-weight: var(--mypage-paragraph-font-weight);
	line-height: var(--mypage-paragraph-line-height);
	color: var(--mypage-paragraph-color);
	font-size: var(--mypage-paragraph-font-size);
}
.mypage p{
	font-size: calc(var(--mypage-paragraph-font-size));
/*	margin-bottom: 0.75rem;*/
}
.mypage p.lead, .mypage .lead{
	font-size: calc(var(--mypage-paragraph-font-size)*var(--mypage-paragraph-ratio));
}
.mypage p.lead-1, .mypage .lead-2{
	font-size: calc(var(--mypage-paragraph-font-size)*var(--mypage-paragraph-ratio)*var(--mypage-paragraph-ratio));
}
.mypage p.small, .mypage p small{
	font-size: calc(var(--mypage-paragraph-font-size)/var(--mypage-paragraph-ratio));
}

.swiper-button-disabled{
    visibility: hidden;
    opacity: 0;
    transition: 0.5s ease-in-out; 
}
.swiper-pagination-bullet{
	border-radius: 2px;
}
.swiper-pagination-bullet{
	width: 4px;
	height: 4px;
}
.swiper-pagination-bullet-active{
	width: 16px;
}


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--builder-color-primary);
    --bs-btn-border-color: var(--builder-color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #03498f;
    --bs-btn-hover-border-color: #03498f;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #03498f;
    --bs-btn-active-border-color: #03498f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--builder-color-primary);
    --bs-btn-disabled-border-color: var(--builder-color-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--builder-color-primary);
    --bs-btn-border-color: var(--builder-color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--builder-color-primary);
    --bs-btn-hover-border-color: var(--builder-color-primary);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--builder-color-primary);
    --bs-btn-active-border-color: var(--builder-color-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--builder-color-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--builder-color-primary);
    --bs-gradient: none;
}
.builder .form-check-input:checked {
    background-color: var(--builder-color-primary);
    border-color: var(--builder-color-primary);
}
.builder input[type=range]::-webkit-slider-thumb {
    background: var(--builder-color-primary);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(4, 104, 204, 0.8);
}

.builder input[type=range]::-webkit-slider-thumb:focus,
.builder .form-control:focus,
.builder .form-select:focus,
.builder .form-check-input:focus{
  border-color: var(--builder-color-primary);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(4, 104, 204, 0.8);
}

.builder-font{
	font-family: 'Roboto', system-ui, sans-serif;
}
.builder-topbar{
	background-color: #FFFFFF;
	box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
	z-index: 10;
/*  border-top: 1px solid #003366;*/
}
.builder-topbar-inner{
	max-width: var(--max-width-custom);
	margin: 0 auto;
}
.builder-topbar-inner .btn-builder{
	height: 2rem;
	line-height: 1;
}
.builder-topbar-inner .bi{
	width: 1rem;
	color: #003366;
}
.builder-topbar-inner .btn-back-to-manage-page,
.builder-topbar-inner .btn-preview,
.builder-topbar-inner .btn-intro-main{
	border: 1px solid #003366;
	border-radius: 4px;
	padding: 0.25rem 0.5rem;
}
.builder-topbar-inner .btn-back-to-builder{
	border-radius: 4px;
	padding: 0.25rem 0.5rem;
}
.builder-topbar-inner .btn-publish,
.builder-topbar-inner .btn-revert{
	font-size: 0.8125rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid #003366;
	border-radius: 4px;
	color: #003366;
	white-space: nowrap;
	line-height: 1;
}
.topbar-preview .title{
	font-size: 1rem;
	color: #003366;
}
.builder-bottombar{
	background-color: rgba(0,0,0,.8);
	border-top: 1px solid #DDDDDD;
	height: 60px;
}
.builder-bottombar-inner{
	max-width: var(--max-width-custom);
	margin: 0 auto;
}
#builder-tab{
	height: 0px;
}
.settings-wrapper,
.theme-store-wrapper{
	max-width: var(--max-width-custom);
	margin: 0 auto;
	background-color: #FFF;
}
.form-check-input {
  clear: left;
}
.form-switch.form-switch-sm {
  margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}

.form-switch.form-switch-md {
  margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}
.modal-edit-block{
  --animate-duration: 0.15s;
  overflow-y: hidden;
}
.modal-edit-block.modal-static .modal-dialog {
    transform: translate(0);
}
.modal-setting.fade .modal-dialog {
   transform: translate(0);
}
.modal-setting.show .modal-dialog {
   transform: translate(0);
}
.modal-setting{
	overflow-y: hidden;
}
.modal-setting .modal-header{
	line-height: 1;
	border-bottom: 2px solid #FFFFFF;
  z-index: 11;
}
.modal-edit-block .modal-header{
	line-height: 1;
}
.modal-choose-block-type .modal-header{
	line-height: 1;
}
.modal-setting .modal-header,
.modal-edit-block .modal-header,
.modal-choose-block-type .modal-header{
	padding: 0.5rem 1rem;
}
#toast-container .btn-close-toast{
	padding: 0;
	width: 1.5rem;
	height: 1.5rem;
	opacity: 1;
}
#toast-container.toast-container>:not(:last-child){
	margin-bottom: 0.5rem;
}
.v-toast {
	padding: 0.5rem;
	z-index: 99999;
}
.v-toast__text {
    padding: 0rem 0.5rem;
    font-size: 0.8125rem;
}
.v-toast__item{
	margin: 0 0 0.25rem 0;
	min-height: 2rem;
}
.builder-modal-content{
	max-width: var(--max-width-custom);
	margin: 0 auto;
}
.edit-block-modal-content{
  max-width: var(--max-width-custom);
  margin: 0 auto;
}
.choose-block-type-modal-content{
  max-width: var(--max-width-custom);
  margin: 0 auto;
}

.modal-setting {
  background-color: #F2F3F5;
}

.modal-setting .modal-header{
  padding: 0.5rem 0;
  border-bottom: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
}
.modal-setting .modal-header .btn{
  height: 2rem;
  line-height: 1;
}
.modal-setting .modal-header .btn-back{
  padding: 0.25rem 0.5rem;
}
.modal-setting .modal-header .title{
  color: #003366;
}
.modal-setting .modal-header .bi{
  width: 1rem;
  color: #003366;
}

.block-design .btn-edit{
  top: 8px;
  right: 20px;
/*  z-index: 1;*/
}
.block-design .btn-edit .btn{
  line-height: 1;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 6px;
  box-shadow: 0 2px 8px 8px rgb(0 0 0 / 10%) inset;
}
.block-design .btn-edit .btn:hover,
.block-design .btn-edit .btn:focus{
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  box-shadow: 0 2px 8px 8px rgb(0 0 0 / 15%) inset;
}
.block-design .btn-edit .bi{
  color: rgba(255,255,255, 0.8);
  width: 20px;
  height: 20px;
}
.block-design .btn-edit .dropdown-menu-dark{
  padding: 0;
  background-color: rgba(0, 0, 0, 0.9);
}
.block-design .btn-edit .dropdown-item{
  padding: 0.8rem 0.75rem;

}
.block-design .btn-edit .dropdown-item .bi{
  color: #FFFFFF;
  width: 0.9rem;
  height: 0.9rem;
}
.block-design .btn-edit .dropdown-menu{
  min-width: auto;
  z-index: 1;
}
.block-design .btn-edit .dropdown-divider{
  margin: 0;
}
.block-design .btn-edit .dropdown-menu li > button:focus{
  background-color: rgba(0, 0, 0, 0.8);
}
.block-design .btn-edit .dropdown-menu li:first-child > button:active,
.block-design .btn-edit .dropdown-menu li:first-child > button:hover {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.block-design .btn-edit .dropdown-menu li:last-child > button:active,
.block-design .btn-edit .dropdown-menu li:last-child > button:hover {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.block-design .hidden-mark{
  top: 0;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--mypage-block-border-radius);
  margin: var(--mypage-block-margin);
  --block-margin-x: calc(2*var(--mypage-block-margin-x));
  width: calc(100% - var(--block-margin-x)*1px);
  height: 100%;
  color: rgba(0, 0, 0, 0.6);
}
.block-design .hidden-mark-inner{
  width: 100%;
  height: 100%;
}
.block-design .hidden-mark .bi{
  width: 1.5rem;
  height: 1.5rem;
  color: rgba(0, 0, 0, 0.5);
}
.block-design .blocks-wrapper .btn-add-block-wrapper {
  margin-bottom: 16px;
  position: absolute;
  width: 100%;
  bottom: -4.5rem;
}
.disable-click{
  pointer-events: none;
}

#editBlockModal .btn-edit{
  top: 8px;
  right: 20px;
}
#editBlockModal .btn-edit .btn{
  line-height: 1;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 6px;
  box-shadow: 0 2px 8px 8px rgb(0 0 0 / 10%) inset;
}
#editBlockModal .btn-edit .btn:hover,
#editBlockModal .btn-edit .btn:focus{
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  box-shadow: 0 2px 8px 8px rgb(0 0 0 / 15%) inset;
}
#editBlockModal .btn-edit .bi{
  color: rgba(255,255,255, 0.8);
  width: 20px;
  height: 20px;
}
#editBlockModal .btn-edit .dropdown-menu-dark{
  padding: 0;
  background-color: rgba(0, 0, 0, 0.9);
}
#editBlockModal .btn-edit .dropdown-item{
  padding: 0.8rem 0.75rem;

}
#editBlockModal .btn-edit .dropdown-item .bi{
  color: #FFFFFF;
  width: 0.9rem;
  height: 0.9rem;
}
#editBlockModal .btn-edit .dropdown-menu{
  min-width: auto;
  z-index: 1;
}
#editBlockModal .btn-edit .dropdown-divider{
  margin: 0;
}
#editBlockModal .btn-edit .dropdown-menu li > button:focus{
  background-color: rgba(0, 0, 0, 0.8);
}
#editBlockModal .btn-edit .dropdown-menu li:first-child > button:active,
#editBlockModal .btn-edit .dropdown-menu li:first-child > button:hover {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
#editBlockModal .btn-edit .dropdown-menu li:last-child > button:active,
#editBlockModal .btn-edit .dropdown-menu li:last-child > button:hover {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
#editBlockModal .modal-footer{
  border-top: none;
  box-shadow: 0 -1px 2px rgb(0 0 0 / 7%), 0 -2px 4px rgb(0 0 0 / 7%), 0 -4px 8px rgb(0 0 0 / 7%), 0 -8px 16px rgb(0 0 0 / 7%), 0 -16px 32px rgb(0 0 0 / 7%);
  z-index: 1;
}

.modal-confirm .modal-content{
  max-width: 220px;
  margin: 0 auto;
  border: none;
}
#editBlockModal .modal-confirm .modal-footer{
  box-shadow: none;
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
}
#editCategoryModal .modal-footer,
#confirmDeleteProductModal .modal-footer{
  box-shadow: none;
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
}

.ghost {
  border-color: #0dcaf0;
  box-shadow: 0 0 0 4px rgba(13,202,240, 0.4);
  border-radius: 4px;
  cursor: move;
}

.ghost-block {
  border-color: #0dcaf0;
  box-shadow: 0 0 0 4px rgba(13,202,240, 0.4);
  border-radius: 4px;
  cursor: move;
}

.btn-edit .dropdown-menu,
.btn-mypage-setting .dropdown-menu{
  border: none;
  box-shadow: 0 2px 8px 8px rgba(255,255,255,0.2), 0 4px 16px 16px rgba(255,255,255,0.2), 0 8px 32px 32px rgba(255,255,255,0.2), 0 16px 64px 64px rgba(255,255,255,0.2);
}

.block-design .block-mask{
  top: 0;
  background-color: rgba(255, 255, 255, 0);
  border-radius: var(--mypage-block-border-radius);
  margin: var(--mypage-block-margin);
  --block-margin-x: calc(2*var(--mypage-block-margin-x));
  width: calc(100% - var(--block-margin-x)*1px);
  height: 100%;
  color: rgba(0, 0, 0, 0.6);
}

.modal-setting .modal-footer{
  border-top: none;
  box-shadow: 0 -1px 2px rgb(0 0 0 / 7%), 0 -2px 4px rgb(0 0 0 / 7%), 0 -4px 8px rgb(0 0 0 / 7%), 0 -8px 16px rgb(0 0 0 / 7%), 0 -16px 32px rgb(0 0 0 / 7%);
  z-index: 1;
}
.preview-theme-modal .modal-footer{
  border-top: none;
  box-shadow: 0 -1px 2px rgb(0 0 0 / 7%), 0 -2px 4px rgb(0 0 0 / 7%), 0 -4px 8px rgb(0 0 0 / 7%), 0 -8px 16px rgb(0 0 0 / 7%), 0 -16px 32px rgb(0 0 0 / 7%);
  z-index: 1;
}

.mypage-icon-picker .offcanvas-header{
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%);
  z-index: 1;
}
.mypage-color-picker .offcanvas-footer,
.mypage-icon-picker .offcanvas-footer{
  border-top: none;
  box-shadow: 0 -1px 2px rgb(0 0 0 / 7%), 0 -2px 4px rgb(0 0 0 / 7%), 0 -4px 8px rgb(0 0 0 / 7%), 0 -8px 16px rgb(0 0 0 / 7%), 0 -16px 32px rgb(0 0 0 / 7%);
  z-index: 1;
}

#nav-tab-mypage .nav-link, .nav-pills{
  font-size: 15px;
  font-weight: 500;

}
#nav-tab-mypage .nav-link, .nav-pills .show>.nav-link{
  padding: 0.6rem 0.25rem;
  color: #003366;
  background-color: #FFFFFF;
}
#nav-tab-mypage .nav-link.active, .nav-pills .show>.nav-link{
  border-bottom: 3px solid #003366;
}

.btn-back-to-manage-page {
  padding: 0 0 0 0.5rem;
  margin-right: 0.5rem;
}
@media (max-width: 450px) { 
  .btn-back-to-manage-page {
    padding: 0.5rem;
    margin-right: 0;
  }
}
.dropdown-intro-guide{
  width: 320px;
  max-width: 320px;
  border-radius: 4px;
}
@media (max-width: 320px){
  .dropdown-intro-guide{
    max-width: 225px;
    width: 225px;
    min-width: 225px;
  }
}
.dropdown-intro-guide .image-wrapper img{
  border-radius: 4px 4px 0 0;
}
.dropdown-intro-guide .text{
  font-size: 15px;
}

.dropdown-intro-guide .btn-close-intro-dropdown{
  top: 0.5rem;
  right: 0.5rem;
  padding: 0;
  background-color: transparent;
  color: #FFF;
  border: none;
}
.dropdown-intro-guide .btn-close-intro-dropdown .bi{
  color: #FFF;
  font-size: 1.25rem;
  line-height: 1;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}

.builder .form-check.form-switch .form-check-input{
  width: 3em;
  height: 1.5em;
}

.builder .form-check-input[type=radio] {
    width: 1.25em;
    height: 1.25em;
}

.builder .form-check-input[type=checkbox] {
    width: 1.25em;
    height: 1.25em;
}

.builder .form-check label {
    line-height: 1.9;
}

.tooltip-inner { 
  max-width: 350px !important; 
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
}

.custom-popover{
  width: 100%;
  max-width: 350px !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%);
  border: none;
  background-color: #000000;
}
.custom-popover .popover-body{
  color: #FFFFFF;
  padding: 0.5rem;
}
.custom-popover .popover-arrow::before,
.custom-popover .popover-arrow::after{
    border-right-color: var(--bs-popover-arrow-border);
}

.tooltip .tooltip-inner a{
  color: #FFF;
}

.block-design .swiper{
  z-index: 0;
}