body{
    width: 100vw;
  
  padding: 0;
    margin: 0;
    font-size: 1.2rem;
    background: linear-gradient(133deg, #e6e6e6,#ffffff, #a8a8a8);
  }
  @media screen and (orientation: landscape) {
 body {
    width: 100%;
  }
}
/*form-wrapper*/
label.thumbImg {
    width: 100%;
    text-align: center;
    color: #000000;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
#imageContainer {
			width: 100%;
			height: auto;
			max-width: 500px;
			margin: 0px auto;
      overflow-x: hidden;
		}
    #imageContainer img {
    width: 100%;
}
.error {
  position: fixed;
    bottom: 50%;
    left: calc(50% - 150px);
    width: 300px;
    /* height: 50px; */
    padding: 10px;
    /* background-color: red; */
    background-color: #ff000070;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.0rem;
    font-weight: bold;
    animation: slide-down 1s ease-in-out forwards;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2);
    z-index: 999999999;
}
@keyframes slide-down {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
label {
    display: block;
    width: 67px;
    text-align: start;
    white-space: nowrap;
}
.subm {
    width: 100%;
}
.color-name {
    color: #000000;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.detail-btn {
    position: relative;
    /* top: 1%; */
    left: calc(50% - 150px);
    margin-top: 50px;
    z-index: 99;
    transition: left 0.5s ease-in-out;
}
.detail-btn.none {
    position: fixed;
    top: 1%;
    right: 20px;
    z-index: 99999999;
    display:none;
    transition: left 0.5s ease-in-out;
}
.form-container-wrapper {
  position: static;
    /* top: 50%; */
    left: -100%;
    width: 95%;
    max-width: 95%;
    height: auto;
    /* transform: translate(-50%, -50%); */
    overflow: auto;
    transition: left 0.5s ease-in-out;
    z-index: 999999999;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
}

.form-container-wrapper.active {
  left: 50%;
  top: 50%;
  overflow: auto;
}
@media only screen and (max-width: 768px){
    .form-container-wrapper.active {
  left: 50%;
  overflow: auto;
  position: fixed;
} 
}

.close-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 36px;
    background: #ffffff52;
    width: 70px;
    padding: 10px;
    margin-bottom: 2em;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    /* border-radius: 5000px; */
    /* backdrop-filter: blur(5px); */
    box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2);
    color: #000000;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 9;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 10px 10px 60px -8px rgba(0, 0, 0, 0.2);
}

button.detail-btn {
    background: #ffffffbd;
    width: 300px;
    padding: 10px;
    margin-bottom: 2em;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5000px;
    backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2);
    color: #000000;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
/**/
 /*form*/
 .wrapper-body {
  width: 95vw;
    font-family: 'Montserrat', sans-serif;
   /* overflow: hidden;*/
    margin-left: auto;
    margin-right: auto;
}
.form-container {
 /* overflow: auto;*/
}
form {
    background: rgb(255 255 255 / 0%);
      padding: 1.0em;
    border-radius: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    /*box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, 0.2);*/
    text-align: center;
    position: relative;
    transition: all 0.2s ease-in-out;
    font-size: clamp(0.7rem, 0.182rem + 1.09vw, 1rem);
}
form p {
    font-weight: 500;
    color: #0e0e0e;
    opacity: 0.7;
    font-size: 1.0rem;
    display: flex;
    margin-top: 0;
    flex-direction: column;
    margin-bottom: 0px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
form a {
    text-decoration: none;
    color: #3b3b3b;
    font-size: 12px;
}
form a:hover {
    text-shadow: 2px 2px 6px #00000040;
}
form a:active {
    text-shadow: none;
}
form input {
    background: transparent;
    width: 200px;
    padding: 10px;
    margin-bottom: 2em;
    border: solid #c2c2c2 1px;
    /* border-left: 1px solid rgba(255, 255, 255, 0.3); */
    /* border-top: 1px solid rgba(255, 255, 255, 0.3); */
    border-radius: 5000px;
    /* backdrop-filter: blur(5px); */
    /* box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2); */
    color: #000000;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
form input:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}
form input[type="email"]:focus, form input[type="password"]:focus {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
}
form input[type="button"] {
    margin-top: 10px;
    width: 150px;
    font-size: 1rem;
}
form input[type="button"]:hover {
    cursor: pointer;
}
form input[type="button"]:active {
    background: rgba(255, 255, 255, 0.2);
}
form:hover {
    /*margin: 4px;*/
}
::placeholder {
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.drop {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 10px 10px 60px -8px rgba(0, 0, 0, 0.2);
    position: absolute;
    transition: all 0.2s ease;
}
.drop-1 {
    height: 80px;
    width: 80px;
    top: -20px;
    left: -40px;
    z-index: -1;
}
.drop-2 {
    height: 80px;
    width: 80px;
    bottom: -30px;
    right: -10px;
}
.drop-3 {
    height: 100px;
    width: 100px;
    bottom: 120px;
    right: -50px;
    z-index: -1;
}
.drop-4 {
    height: 120px;
    width: 120px;
    top: -60px;
    right: -60px;
}
.drop-5 {
    height: 60px;
    width: 60px;
    bottom: 170px;
    left: 90px;
    z-index: -1;
}
a, input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}

 /**/   
 
#part-a {
  width: 800px;
    height: 400px;
    float: left;
    position: absolute;
    z-index: 99;
}

#part-b {
  width: 800px;
    height: 400px;
    float: left;
    position: relative;
    z-index: 9;
}
#part-c {
  width: 800px;
    height: 400px;
    float: left;
    position: absolute;
    z-index: 999;
}
#part-b-op {
    width: 800px;
    height: 400px;
    float: left;
    position: absolute;
    z-index: 99;
}
#part-a-op {
    width: 800px;
    height: 400px;
    float: left;
    position: absolute;
    z-index: 99;
}
div#illustration {
  width: 800px;
    height: 400px;  
    position: relative;
   /* margin-right: auto;
    margin-left: auto;*/
}
div#illustration-op {
  width: 800px;
    height: 400px;
    padding-top: 15px;
    
}
div#tab-A {
    background: rgb(255,255,255);
    /* background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 26%, rgba(207,207,207,1) 100%); */
    background: rgba(255, 255, 255, 0.3);
    padding: 1em;
    /* height: 320px; */
    border-radius: 0px 0px 10px 10px;
    /* border-left: 1px solid rgba(255, 255, 255, 0.3); */
    border-top: 1px solid rgb(213 213 213 / 93%);
    backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transition: all 0.2s ease-in-out;
}
div#tab-B,div#tab-C,div#tab-D,div#tab-E    {
    background: rgb(255,255,255);
    /* background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 26%, rgba(207,207,207,1) 100%); */
    background: rgba(255, 255, 255, 0.3);
    padding: 1em;
    /* height: 320px; */
    border-radius: 0px 0px 10px 10px;
    /* border-left: 1px solid rgba(255, 255, 255, 0.3); */
    border-top: 1px solid rgb(213 213 213 / 93%);
    backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transition: all 0.2s ease-in-out;
    min-height: 150px;
}
/*defoult*/
.logo-1 {
 /* background-image: url(logo.png);*/
 background-image: url(logo.png);
 background-size: contain;
 position: absolute;
 z-index: 6999;
 top: 245px;
 left: 956px;
 width: 71px;
 transform: rotate(270deg);
 height: 100px;
 background-repeat: no-repeat;
 filter: opacity(1);
 mix-blend-mode: plus-lighter;
}
.logo-0 {
  background-image: url(logo.png);
    background-size: contain;
    position: absolute;
    z-index: 999;
    top: 80px;
    left: 200px;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    filter: contrast(2);
    mix-blend-mode: luminosity;
    display:none;
}
div#part-logo_op {
    background-image: url(logo.png);
    background-size: contain;
    position: absolute;
    z-index: 6999;
    top: 245px;
    left: 1004px;
    width: 72px;
    height: 100px;
    background-repeat: no-repeat;
    filter: opacity(1);
    mix-blend-mode: plus-lighter;
    transform: rotate(273deg);
}
.color-base {
  
    background-size: contain;
    /* position: relative; */
    z-index: 9999;
    background-repeat: no-repeat;
    width: 800px;
    height: 400px;
    float: left;
    position: absolute;
}
#part-base-op {
   
    background-size: contain;
    /* position: relative; */
    z-index: 999999;
    background-repeat: no-repeat;
    width: 800px;
    height: 400px;
    float: left;
    position: absolute;
}
#part-base-lum {
 
   /* background-image: url(lumi.png);*/
    background-size: contain;
    /* position: relative; */
    z-index: 999;
    background-repeat: no-repeat;
    width: 800px;
    height: 400px;
    float: left;
    position: absolute;
    /* filter: contrast(0.5); */
    mix-blend-mode: luminosity;
    opacity: 0.5;
}


.color-base-none {
   display: none;
    z-index: 999999;
}
.color-base-op-none {
   display: none;
    z-index: 999999;
}
/*アドリア*/
[class^="color-m-"] {
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
  }
.color-m-a1 {
    background-image: url(main-a-1.png);
}
.color-m-a2 {
    background-image: url(main-a-2.png);
}
.color-m-a3 {
    background-image: url(main-a-3.png); 
}
.color-m-a4 {
    background-image: url(main-a-4.png);
}
.color-m-a5 {
    background-image: url(main-a-5.png);
}
.color-m-a6 {
    background-image: url(main-a-6.png);
}
.color-m-a7 {
    background-image: url(main-a-7.png);
}
/*コロラド*/

.color-m-b1 {
    background-image: url(main-b-1.png);
}
.color-m-b2 {
    background-image: url(main-b-2.png);
}
.color-m-b3 {
    background-image: url(main-b-3.png);
}
.color-m-b4 {
    background-image: url(main-b-4.png);
}
.color-m-b5 {
    background-image: url(main-b-5.png);
}
.color-m-b6 {
    background-image: url(main-b-6.png);
}
/*プエブロ*/
.color-m-c1 {
    background-image: url(main-c-1.png);
}
.color-m-c2 {
    background-image: url(main-c-2.png);
}
.color-m-c3 {
    background-image: url(main-c-3.png);
}
.color-m-c4 {
    background-image: url(main-c-4.png);
}
.color-m-c5 {
    background-image: url(main-c-5.png);

}
.color-m-c6 {
    background-image: url(main-c-6.png);
 
}
.color-m-c7 {
    background-image: url(main-c-7.png);
 
}
.color-m-c8 {
    background-image: url(main-c-8.png);
}
.color-m-c9 {
    background-image: url(main-c-9.png);
}
.color-m-c10 {
    background-image: url(main-c-10.png);
}
/*ブライドルレザー*/

.color-m-d1 {
    background-image: url(main-d-1.png);
}
.color-m-d2 {
    background-image: url(main-d-2.png);

}
/*モストロ*/

.color-m-e1 {
    background-image: url(main-e-1.png);
}
.color-m-e2 {
    background-image: url(main-e-2.png);
}
.color-m-e3 {
    background-image: url(main-e-3.png);
}
.color-m-e4 {
    background-image: url(main-e-4.png);
}
.color-m-e5 {
    background-image: url(main-e-5.png);

}
/*ロシアンカーフ*/
.color-m-f1 {
    background-image: url(main-f-1.png);

}
.color-m-f2 {
    background-image: url(main-f-2.png);

}
/*シンプルメイン*/
[class^="color-simple-"] {
  background-size: contain;
    z-index: 1999;
    background-repeat: no-repeat;
    width: 800px;
    height: 400px;
    float: left;
    position: absolute;
}
.color-simple-a1 {
    background-image: url(main-simple-a-1.png);  
}
.color-simple-a2 {
    background-image: url(main-simple-a-2.png);  
}
.color-simple-a3 {
    background-image: url(main-simple-a-3.png);  
}
.color-simple-a4 {
    background-image: url(main-simple-a-4.png);  
}
.color-simple-a5 {
    background-image: url(main-simple-a-5.png);  
}
.color-simple-a6 {
    background-image: url(main-simple-a-6.png);  
}
.color-simple-a7 {
    background-image: url(main-simple-a-7.png);  
}
.color-simple-b1 {
    background-image: url(main-simple-b-1.png);  
}
.color-simple-b2 {
    background-image: url(main-simple-b-2.png);  
}
.color-simple-b3 {
    background-image: url(main-simple-b-3.png);  
}
.color-simple-b4 {
    background-image: url(main-simple-b-4.png);  
}
.color-simple-b5 {
    background-image: url(main-simple-b-5.png);  
}
.color-simple-b6 {
    background-image: url(main-simple-b-6.png);  
}
.color-simple-c1 {
    background-image: url(main-simple-c-1.png);  
}
.color-simple-c2 {
    background-image: url(main-simple-c-2.png);  
}
.color-simple-c3 {
    background-image: url(main-simple-c-3.png);  
}
.color-simple-c4 {
    background-image: url(main-simple-c-4.png);  
}
.color-simple-c5 {
    background-image: url(main-simple-c-5.png);  
}
.color-simple-c6 {
    background-image: url(main-simple-c-6.png);  
}
.color-simple-c7 {
    background-image: url(main-simple-c-7.png);  
}
.color-simple-c8 {
    background-image: url(main-simple-c-8.png);  
}
.color-simple-c9 {
    background-image: url(main-simple-c-9.png);  
}
.color-simple-c10 {
    background-image: url(main-simple-c-10.png);  
}
.color-simple-d1 {
    background-image: url(main-simple-d-1.png);  
}
.color-simple-d2 {
    background-image: url(main-simple-d-2.png);  
}
.color-simple-e1 {
    background-image: url(main-simple-e-1.png);  
}
.color-simple-e2 {
    background-image: url(main-simple-e-2.png);  
}
.color-simple-e3 {
    background-image: url(main-simple-e-3.png);  
}
.color-simple-e4 {
    background-image: url(main-simple-e-4.png);  
}
.color-simple-e5 {
    background-image: url(main-simple-e-5.png);  
}
.color-simple-f1 {
    background-image: url(main-simple-f-1.png);  
}
.color-simple-f2 {
    background-image: url(main-simple-f-2.png);  
}
/*simple-op*/
.color-simple-op-a1 {
    background-image: url(main-simple-a-op1.png);  
}
.color-simple-op-a2 {
    background-image: url(main-simple-a-op2.png);  
}
.color-simple-op-a3 {
    background-image: url(main-simple-a-op3.png);  
}
.color-simple-op-a4 {
    background-image: url(main-simple-a-op4.png);  
}
.color-simple-op-a5 {
    background-image: url(main-simple-a-op5.png);  
}
.color-simple-op-a6 {
    background-image: url(main-simple-a-op6.png);  
}
.color-simple-op-b1 {
    background-image: url(main-simple-b-op1.png);  
}
.color-simple-op-b2 {
    background-image: url(main-simple-b-op2.png);  
}
.color-simple-op-b3 {
    background-image: url(main-simple-b-op3.png);  
}
.color-simple-op-b4 {
    background-image: url(main-simple-b-op4.png);  
}
.color-simple-op-b5 {
    background-image: url(main-simple-b-op5.png);  
}
.color-simple-op-b6 {
    background-image: url(main-simple-b-op6.png);  
}
.color-simple-op-c1 {
    background-image: url(main-simple-c-op1.png);  
}
.color-simple-op-c2 {
    background-image: url(main-simple-c-op2.png);  
}
.color-simple-op-c3 {
    background-image: url(main-simple-c-op3.png);  
}
.color-simple-op-c4 {
    background-image: url(main-simple-c-op4.png);  
}
.color-simple-op-c5 {
    background-image: url(main-simple-c-op5.png);  
}
.color-simple-op-c6 {
    background-image: url(main-simple-c-op6.png);  
}
.color-simple-op-c7 {
    background-image: url(main-simple-c-op7.png);  
}
.color-simple-op-c8 {
    background-image: url(main-simple-c-op8.png);  
}
.color-simple-op-c9 {
    background-image: url(main-simple-c-op9.png);  
}
.color-simple-op-c10 {
    background-image: url(main-simple-c-op10.png);  
}
.color-simple-op-d1 {
    background-image: url(main-simple-d-op1.png);  
}
.color-simple-op-d2 {
    background-image: url(main-simple-d-op2.png);  
}
.color-simple-op-e1 {
    background-image: url(main-simple-e-op1.png);  
}
.color-simple-op-e2 {
    background-image: url(main-simple-e-op2.png);  
}
.color-simple-op-e3 {
    background-image: url(main-simple-e-op3.png);  
}
.color-simple-op-e4 {
    background-image: url(main-simple-e-op4.png);  
}
.color-simple-op-e5 {
    background-image: url(main-simple-e-op5.png);  
}
.color-simple-op-f1 {
    background-image: url(main-simple-f-op1.png);  
}
.color-simple-op-f2 {
    background-image: url(main-simple-f-op2.png);  
}
/*サブカラー　アドリア*/
[class^="color-s-"] {
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
  }
/*.color-s-a1 {
    background-image: url(sub-a-1.png);
    
}
.color-s-a2 {
    background-image: url(sub-a-2.png);
   
}
.color-s-a3 {
    background-image: url(sub-a-3.png);
    
}
.color-s-a4 {
    background-image: url(sub-a-4.png);
   
}
.color-s-a5 {
    background-image: url(sub-a-5.png);
   
}
.color-s-a6 {
    background-image: url(sub-a-6.png);
   
}
.color-s-a7 {
    background-image: url(sub-a-7.png);
   
}*/
/*サブカラー　コロラド*/
/*.color-s-b1 {
    background-image: url(sub-b-1.png);
    
}
.color-s-b2 {
    background-image: url(sub-b-2.png);
  
}
.color-s-b3 {
    background-image: url(sub-b-3.png);
  
}
.color-s-b4 {
    background-image: url(sub-b-4.png);
  
}
.color-s-b5 {
    background-image: url(sub-b-5.png);
  
}
.color-s-b6 {
    background-image: url(sub-b-6.png);
  
}*/
/*プエブロ*/
/*.color-s-c1 {
    background-image: url(sub-c-1.png);
 
}
.color-s-c2 {
    background-image: url(sub-c-2.png);
   
}
.color-s-c3 {
    background-image: url(sub-c-3.png);
  
}
.color-s-c4 {
    background-image: url(sub-c-4.png);
   
}
.color-s-c5 {
    background-image: url(sub-c-5.png);
   
}
.color-s-c6 {
    background-image: url(sub-c-6.png);
    
    z-index: 989;
    
}
.color-s-c7 {
    background-image: url(sub-c-7.png);
   
}
.color-s-c8 {
    background-image: url(sub-c-8.png);
   
}
.color-s-c9 {
    background-image: url(sub-c-9.png);
   
}
.color-s-10 {
    background-image: url(sub-c-10.png);
  
}*/
/*サブ　ブライドルレザー*/
/*.color-s-d1 {
    background-image: url(sub-d-1.png);
  
}
.color-s-d2 {
    background-image: url(sub-d-2.png);
   
}*/
/*サブ　モストロ*/
/*.color-s-e1 {
    background-image: url(sub-e-1.png);
    
}
.color-s-e2 {
    background-image: url(sub-e-2.png);
    
}
.color-s-e3 {
    background-image: url(sub-e-3.png);
   
}
.color-s-e4 {
    background-image: url(sub-e-4.png);
  
}
.color-s-e5 {
    background-image: url(sub-e-5.png);
    
}*/
/*サブ　ロシアンカーフ*/
/*.color-s-f1 {
    background-image: url(sub-f-1.png);
  
}
.color-s-f2 {
    background-image: url(sub-f-2.png);
   
}*/
/*糸*/
[class^="color-ito-"] {
    background-size: contain;
    position: absolute;
    z-index: 999;
    background-repeat: no-repeat;
    width: 800px;
    height: 400px;
    float: left;
  }
.color-ito-1 {
  background-image: url(ito-a-1.png);
  
}
.color-ito-2 {
  background-image: url(ito-a-2.png);
 
}
.color-ito-3 {
  background-image: url(ito-a-3.png);
   
}
.color-ito-4 {
    background-image: url(ito-a-4.png);
     
  }
  .color-ito-5 {
    background-image: url(ito-a-5.png);
     
  }
  .color-ito-6 {
    background-image: url(ito-a-6.png);
     
  }
  .color-ito-7 {
    background-image: url(ito-a-7.png);
     
  }
  .color-ito-8 {
    background-image: url(ito-a-8.png);
     
  }
  .color-ito-9 {
    background-image: url(ito-a-9.png);
     
  }
  .color-ito-10 {
    background-image: url(ito-a-10.png);
     
  }
.color-ito-1-op {
  background-image: url(ito-a-op1.png);
   
}
.color-ito-2-op {
  background-image: url(ito-a-op2.png);
   
}
.color-ito-3-op {
  background-image: url(ito-a-op3.png);
 
}
.color-ito-4-op {
    background-image: url(ito-a-op4.png);
     
  }
  .color-ito-5-op {
    background-image: url(ito-a-op5.png);
     
  }
  .color-ito-6-op {
    background-image: url(ito-a-op6.png);
   
  }
  .color-ito-7-op {
    background-image: url(ito-a-op7.png);
     
  }
  .color-ito-8-op {
    background-image: url(ito-a-op8.png);
     
  }
  .color-ito-9-op {
    background-image: url(ito-a-op9.png);
   
  }
  .color-ito-10-op {
    background-image: url(ito-a-op10.png);
   
  }
  .color-line {
    padding: 25px 10px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    width: 700px;
    margin-right: auto;
    margin-left: auto;
}
.color-logo {
    padding: 25px 10px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    overflow: auto;
    margin-right: auto;
    margin-left: auto;
}
/*op*/
[class^="color-m-"][class$="-op"] {
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
    width: 800px;
    height: 400px
  }
.color-m-a1-op {
    background-image: url(main-a-op1.png);
  
}

.color-m-a2-op {
    background-image: url(main-a-op2.png);
  
}

.color-m-a3-op {
    background-image: url(main-a-op3.png);
  
}
.color-m-a4-op {
    background-image: url(main-a-op4.png);
 
}
.color-m-a5-op {
    background-image: url(main-a-op5.png);
  
}
.color-m-a6-op {
    background-image: url(main-a-op6.png);
  
}
.color-m-a7-op {
    background-image: url(main-a-op7.png);
  
}
/*コロラドOP*/
.color-m-b1-op {
    background-image: url(main-b-op1.png);
  
}
.color-m-b2-op {
    background-image: url(main-b-op2.png);
   
}
.color-m-b3-op {
    background-image: url(main-b-op3.png);
   
}
.color-m-b4-op {
    background-image: url(main-b-op4.png);
   
}
.color-m-b5-op {
    background-image: url(main-b-op5.png);
   
}
.color-m-b6-op {
    background-image: url(main-b-op6.png);
  
}

/*プエブロOP*/
.color-m-c1-op {
    background-image: url(main-c-op1.png);
    
}
.color-m-c2-op {
    background-image: url(main-c-op2.png);
  
}
.color-m-c3-op {
    background-image: url(main-c-op3.png);
  
}
.color-m-c4-op {
    background-image: url(main-c-op4.png);
   
}
.color-m-c5-op {
    background-image: url(main-c-op5.png);
   
}
.color-m-c6-op {
    background-image: url(main-c-op6.png);
  
}
.color-m-c7-op {
    background-image: url(main-c-op7.png);
  
}
.color-m-c8-op {
    background-image: url(main-c-op8.png);
  
}
.color-m-c9-op {
    background-image: url(main-c-op9.png);
   
}
.color-m-c10-op {
    background-image: url(main-c-op10.png);
   
}
/*ブライドルレザーOP*/
.color-m-d1-op {
    background-image: url(main-d-op1.png);
   
}
.color-m-d2-op {
    background-image: url(main-d-op2.png);
   
}
/*モストロ*/
.color-m-e1-op {
    background-image: url(main-e-op1.png);
  
}
.color-m-e2-op {
    background-image: url(main-e-op2.png);
    
}
.color-m-e3-op {
    background-image: url(main-e-op3.png);
   
}
.color-m-e4-op {
    background-image: url(main-e-op4.png);
    
}
.color-m-e5-op {
    background-image: url(main-e-op5.png);
   
}
/*ロシアンカーフOP*/
.color-m-f1-op {
    background-image: url(main-f-op1.png);
   
}
.color-m-f2-op {
    background-image: url(main-f-op2.png);
 
}
/*op-end*/
[class^="color-s-"][class$="-op"] {
    background-size: contain;
    float: left;
    position: absolute;
    background-repeat: no-repeat;
    width: 800px;
    height: 400px;
  }
/*op-sub*/
.color-s-a1-op {
    background-image: url(sub-a-op1.png);
    
}
.color-s-a2-op {
    background-image: url(sub-a-op2.png);
}
.color-s-a3-op {
    background-image: url(sub-a-op3.png);
  
}
.color-s-a4-op {
    background-image: url(sub-a-op4.png);

}
.color-s-a5-op {
    background-image: url(sub-a-op5.png);
 
}
.color-s-a6-op {
    background-image: url(sub-a-op6.png);
  
}
.color-s-a7-op {
    background-image: url(sub-a-op7.png);
  
}
/*コロラドOPサブ*/
.color-s-b1-op {
    background-image: url(sub-b-op1.png);
  
}
.color-s-b2-op {
    background-image: url(sub-b-op2.png);
   
}
.color-s-b3-op {
    background-image: url(sub-b-op3.png);
 
}
.color-s-b4-op {
    background-image: url(sub-b-op4.png);
 
}
.color-s-b5-op {
    background-image: url(sub-b-op5.png);

}
.color-s-b6-op {
    background-image: url(sub-b-op6.png);
   
}
/*ブライドルレザーOPサブ*/
.color-s-c1-op {
    background-image: url(sub-c-op1.png);
 
}
.color-s-c2-op {
    background-image: url(sub-c-op2.png);
  
}
.color-s-c3-op {
    background-image: url(sub-c-op3.png);
  
}
.color-s-c4-op {
    background-image: url(sub-c-op4.png);
  
}
.color-s-c5-op {
    background-image: url(sub-c-op5.png);
   
}
.color-s-c6-op {
    background-image: url(sub-c-op6.png);
   
}
.color-s-c7-op {
    background-image: url(sub-c-op7.png);
 
}
.color-s-c8-op {
    background-image: url(sub-c-op8.png);
  
}
.color-s-c9-op {
    background-image: url(sub-c-op9.png);
  
}
.color-s-c10-op {
    background-image: url(sub-c-op10.png);
   
}
/*ブライドルレザーopサブ*/
.color-s-d1-op {
    background-image: url(sub-d-op1.png);
   
}
.color-s-d2-op {
    background-image: url(sub-d-op2.png);
    
}
/*モストロ*/
.color-s-e1-op {
    background-image: url(sub-e-op1.png);
   
}
.color-s-e2-op {
    background-image: url(sub-e-op2.png);
 
}
.color-s-e3-op {
    background-image: url(sub-e-op3.png);
  
}
.color-s-e4-op {
    background-image: url(sub-e-op4.png);
    
}
.color-s-e5-op {
    background-image: url(sub-e-op5.png);
   
   
}
/*ロシアンカーフOPサブ*/
.color-s-f1-op {
    background-image: url(sub-f-op1.png);
    background-size: contain;

}
.color-s-f2-op {
    background-image: url(sub-f-op2.png);

}

/*op-sub-end*/
.color-1-none {
   display: none;
    z-index: 999999;
}
.color-main {
  padding: 25px 10px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
.color-sub {
  padding: 25px 10px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

/*a-b*/
/*繰り返しパターンを作成*/
button[id^="a-"],button[id^="b-"],button[id^="c-"],button[id^="d-"],button[id^="e-"],button[id^="f-"],button[id^="s-"],button[id^="sm-"] {
width: 50px;
height: 70px;
border: 1px solid;
font-size: 1.0rem;
font-weight: 700;
margin: 10px;
}

    
/*特定のボタンに適用するスタイルを指定*/ 
button#a-1, button#a-2, button#a-3,
button#a-4, button#a-5, button#a-6,
button#a-7, button#a-8, button#a-9,
button#a-10, button#a-11, button#a-12,
button#a-13,button#a-14, button#a-15,
button#a-16,button#a-17, button#a-18,
button#a-19,button#a-20, button#a-21,
button#a-22,button#a-23,button#a-24,
button#a-25, button#a-26, button#a-27,
button#a-28, button#a-29, button#a-30,
button#a-31,
button#a-s-1, button#a-s-2, button#a-s-3,
button#a-s-4, button#a-s-5, button#a-s-6,
button#a-s-7, button#a-s-8, button#a-s-9,
button#a-s-10, button#a-s-11, button#a-s-12,
button#a-s-13,button#a-s-14, button#a-s-15,
button#a-s-16,button#a-s-17, button#a-s-18,
button#a-s-19,button#a-s-20, button#a-s-21,
button#a-s-22,button#a-s-23,button#a-s-24,
button#a-s-25, button#a-s-26, button#a-s-27,
button#a-s-28, button#a-s-29, button#a-s-30,
button#a-s-31,
button#b-1, button#b-2, button#b-3,
    button#b-4, button#b-5, button#b-6,
    button#b-7, button#b-8, button#b-9,
    button#b-10, button#b-11, button#b-12,
    button#b-13,button#b-14, button#b-15,
    button#b-16,button#b-17, button#b-18,
    button#b-19,button#b-20, button#b-21,
    button#b-22,button#b-23,button#b-24,
    button#b-25, button#b-26, button#b-27,
    button#b-28, button#b-29, button#b-30,
    button#b-31
 {
color: #fff;
background-position: center;
background-size: cover;
}

button#a-1,button#s-a-1,button#sm-a-1 {
    background-image: url(color-a-1.jpg);
}
button#a-2,button#s-a-2,button#sm-a-2 {
    background-image: url(color-a-2.jpg);
}
button#a-3,button#s-a-3,button#sm-a-3 {
    background-image: url(color-a-3.jpg);
}
button#a-4,button#s-a-4,button#sm-a-4 {
    background-image: url(color-a-4.jpg);
}
button#a-5,button#s-a-5,button#sm-a-5 {
    background-image: url(color-a-5.jpg);
}
button#a-6,button#s-a-6,button#sm-a-6 {
    background-image: url(color-a-6.jpg);
}
button#a-7,button#s-a-7,button#sm-a-7 {
    background-image: url(color-a-7.jpg);
}
/*b*/
button#b-1,button#s-b-1,button#sm-b-1 {
    background-image: url(color-b-1.jpg);
}
button#b-2,button#s-b-2,button#sm-b-2 {
    background-image: url(color-b-2.jpg);
}
button#b-3,button#s-b-3,button#sm-b-3 {
    background-image: url(color-b-3.jpg);
}
button#b-4,button#s-b-4,button#sm-b-4 {
    background-image: url(color-b-4.jpg);
}
button#b-5,button#s-b-5,button#sm-b-5 {
    background-image: url(color-b-5.jpg);
}
button#b-6,button#s-b-6,button#sm-b-6 {
    background-image: url(color-b-6.jpg);
}
/*c*/
button#c-1,button#s-c-1,button#sm-c-1 {
    background-image: url(color-c-1.jpg);
}
button#c-2,button#s-c-2,button#sm-c-2 {
    background-image: url(color-c-2.jpg);
}
button#c-3,button#s-c-3,button#sm-c-3 {
    background-image: url(color-c-3.jpg);
}
button#c-4,button#s-c-4,button#sm-c-4 {
    background-image: url(color-c-4.jpg);
}
button#c-5,button#s-c-5,button#sm-c-5 {
    background-image: url(color-c-5.jpg);
}
button#c-6,button#s-c-6,button#sm-c-6 {
    background-image: url(color-c-6.jpg);
}
button#c-7,button#s-c-7,button#sm-c-7 {
    background-image: url(color-c-7.jpg);
}
button#c-8,button#s-c-8,button#sm-c-8 {
    background-image: url(color-c-8.jpg);
}
button#c-9,button#s-c-9,button#sm-c-9 {
    background-image: url(color-c-9.jpg);
}
button#c-10,button#s-c-10,button#sm-c-10 {
    background-image: url(color-c-10.jpg);
}
/*d*/
button#d-1,button#s-d-1,button#sm-d-1 {
    background-image: url(color-d-1.jpg);
}
button#d-2,button#s-d-2,button#sm-d-2 {
    background-image: url(color-d-2.jpg);
}
/*e*/
button#e-1,button#s-e-1,button#sm-e-1 {
    background-image: url(color-e-1.jpg);
}
button#e-2,button#s-e-2,button#sm-e-2 {
    background-image: url(color-e-2.jpg);
}
button#e-3,button#s-e-3,button#sm-e-3 {
    background-image: url(color-e-3.jpg);
}
button#e-4,button#s-e-4,button#sm-e-4 {
    background-image: url(color-e-4.jpg);
}
button#e-5,button#s-e-5,button#sm-e-5 {
    background-image: url(color-e-5.jpg);
}
/*f*/
button#f-1,button#s-f-1,button#sm-f-1 {
    background-image: url(color-f-1.jpg);
}
button#f-2,button#s-f-2,button#sm-f-2 {
    background-image: url(color-f-2.jpg);
}
/*ito*/
/*ito*/
/*繰り返しパターンを作成*/
button[id^="ito-"] {
    width: 50px;
    height: 70px;
    border: 1px solid;
    font-size: 1.0rem;
    font-weight: 700;
    margin: 10px;
    }
    button#ito-1 {
        background: linear-gradient(180deg, rgba(36,25,25,1) 14%, rgba(83,79,72,1) 43%, rgba(18,17,16,1) 70%);
    }
    button#ito-2 {
        background: linear-gradient(180deg, rgb(181 164 120) 14%, rgba(242,233,213,1) 43%, rgb(191 165 107) 70%);
    }
    button#ito-3 {
        background: linear-gradient(180deg, rgba(159,47,58,1) 14%, rgba(194,72,95,1) 43%, rgba(142,16,43,1) 70%);
    }
    button#ito-4 {
        background: linear-gradient(180deg, rgba(53,52,106,1) 14%, rgba(54,75,150,1) 43%, rgba(26,31,102,1) 70%);
    }
    button#ito-5 {
        background: linear-gradient(180deg, rgba(20,77,17,1) 14%, rgba(56,150,54,1) 43%, rgba(25,59,18,1) 70%);
    }
    button#ito-6 {
        background: linear-gradient(180deg, rgba(230,149,8,1) 14%, rgba(255,192,113,1) 43%, rgba(235,156,44,1) 70%);
    }
    button#ito-7 {
        background: linear-gradient(180deg, rgba(230,64,8,1) 14%, rgba(255,153,26,1) 43%, rgba(233,82,27,1) 70%);
    }
    button#ito-8 {
        background: linear-gradient(180deg, rgba(80,24,5,1) 14%, rgba(154,89,8,1) 43%, rgba(82,27,7,1) 70%);
    }
    button#ito-9 {
        background: linear-gradient(180deg, rgba(213,213,213,1) 14%, rgba(255,255,255,1) 43%, rgba(191,191,191,1) 70%);
    }
    button#ito-10 {
        background: linear-gradient(180deg, rgba(111,36,77,1) 14%, rgba(166,114,144,1) 43%, rgba(101,11,49,1) 70%);
    }
input#ito-color,input#logo-color,input#a-color,input#b-color,input#price1,input#price2,input#price3,input#price4,input#metal-color,input#priceTotal {
    font-size: 1.0rem;
    font-weight: 700;
    /* border: 1px solid #b3b3b3; */
    margin: 10px 0 0 0;
}
/*metal*/
[class^="metal-"] {
  background-size: contain;
    position: relative;
    background-repeat: no-repeat;
    width: 800px;
    height: 400px;
    float: left;
    position: absolute;
    z-index: 2999;
    }
.metal-1 {
    background-image: url(main-metal-1.png);
}
.metal-2 {
    background-image: url(main-metal-2.png);   
}
.metal-3 {
    background-image: url(main-metal-3.png);   
}
.metal-1-op {
    background-image: url(main-metal-op1.png);  
    width: 800px!important; 
}
.metal-2-op {
    background-image: url(main-metal-op2.png);
    width: 800px!important;
}
.metal-3-op {
    background-image: url(main-metal-op3.png);
    width: 800px!important;
}
button#metal-1 {
  
    width: 150px;
    height: 70px;
    border: 1px solid;
    font-size: 0.8rem;
    font-weight: 300;
    margin: 10px;
    background: linear-gradient(180deg, rgba(207,199,194,1) 14%, rgba(223,223,223,1) 43%, rgba(167,167,167,1) 70%);
}
button#metal-2 {
    background: linear-gradient(180deg, rgba(0,0,0,1) 14%, rgba(65,58,58,1) 43%, rgba(0,0,0,1) 70%);
    width: 150px;
    height: 70px;
    border: 1px solid;
    font-size: 0.8rem;
    font-weight: 300;
    margin: 10px;
    color: #fff;

}
button#metal-3 {
  
    width: 150px;
    height: 70px;
    border: 1px solid;
    font-size: 0.8rem;
    font-weight: 300;
    margin: 10px;
    background: linear-gradient(180deg, rgba(232,172,137,1) 14%, rgba(223,223,223,1) 43%, rgba(224,174,161,1) 70%);
}
input.sousin {
    background: transparent;
    width: 200px;
    padding: 10px;
    margin-bottom: 2em;
    border: 1px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5000px;
    backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2);
    color: #000000;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
button[id^="logo-"] {
    width: 110px;
    height: 70px;
    border: 1px solid;
    font-size: 1.0rem;
    font-weight: 700;
    margin: 10px;
    }
button#logo-1 {
    background-color: #eeeeee;
}
button#logo-2 {
    background-color: #eeeeee;
}
button#logo-3 {
    background-color: #eeeeee;
}
button#logo-4 {
    background-color:  #eeeeee;
}
button#logo-5 {
    background-color: #eeeeee;
}
button#logo-6 {
    background-color: #eeeeee;
}
.cust {
    position: relative;
    overflow: auto;
    height: 600px;
}
.loader {
  border: 16px solid #f3f3f3;
    border-top: 16px solid #8cb7ff;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    position: absolute;
    z-index: 9999999;
    /* top: 50%; */
    /* left: 50%; */
    top: calc(50% - 246px);
    left: calc(50% - 60px);
    animation: spin 2s linear infinite;
      }
      
      /* アニメーションの回転 */
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      .scroll-container {
  width: 100%;
  overflow-x: auto;
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}
.scroll-container-main {
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
  
}
.js-scrollable{
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}
.scroll-content {
  white-space: nowrap;
  padding-top: 120px;
}
/* タブボタン */
.tabs,
        .sub-tabs {
            display: block;
            width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
            padding: 0;
        }

        .tabs ul,
        .sub-tabs ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .tabs ul li,
        .sub-tabs ul li {
            display: inline-block;
            margin: 0;
            padding: 0;
        }

        .tabs ul li a,
        .sub-tabs ul li a {
            display: block;
            margin: 0;
            padding: 10px 20px;
            color: #b7b7b7!important;
            text-decoration: none;
            border: 1px solid #ccc;
            border-bottom: none;
            background-color: #f1f1f1;
        }

        .tabs ul li a:hover,
        .sub-tabs ul li a:hover {
            background-color: #ddd;
            cursor: pointer;
        }

        .tabs ul li a.active,
        .sub-tabs ul li a.active {
            background-color: #fff;
            border-color: #ccc;
            color: #000!important;
        }

        .tabs > div,
        .sub-tabs > div {
            display: none;
    background: rgb(255,255,255);
    background: rgba(255, 255, 255, 0.3);
    padding: 1em;
    border-radius: 0px 0px 5px 5px;
    border: 1px solid rgb(213 213 213 / 93%);
    /* border-top: 1px solid rgb(213 213 213 / 93%); */
    backdrop-filter: blur(10px);
    box-shadow: 1px 5px 10px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transition: all 0.2s ease-in-out;
        }

        .tabs > div.active,
        .sub-tabs > div.active {
            display: block;
        }
.drops {
    display: none;
}
button.tablinks.active {
    background-color: #ffffff;
    font-size: clamp(0.9rem, 0.182rem + 1.09vw, 1.2rem);
    transition: all 0.2s ease-in-out;
    color: #9c4400;
}
form {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.sim {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    overflow: scroll;
    
    margin-right: auto;
    margin-left: auto;
}
@media only screen and (min-width: 573px){
    .sim {
        display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: 1700px;
    /* overflow: hidden; */
    position: relative;
    
    overflow: hidden;
    
    }
}
@media only screen and (max-width: 574px){
.sim {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: 1700px;
    /* overflow: hidden; */
    position: relative;
    overflow: hidden;
}
.scroll-container-main::-webkit-scrollbar{
  display: none;
}
}
/*wp*/
.logo-order img {
    height: 50px;
}
.headline-order {
    padding: 0.5rem 0;
    z-index: 9999;
    position: relative;
    background: #ffffff;
}
ul.tabs-sc {
    white-space: nowrap;
    overflow: auto;
}
.from-left {
    width: 90%;
    display: flex;
    max-width: 300px;
    flex-flow: wrap;
    margin-left: auto;
    /* text-align: center; */
    margin-right: auto;
}
.from-right {
    width: 90%;
    max-width: 300px;
    margin-left: auto;
    /* text-align: center; */
    margin-right: auto;
}
.form-control:disabled, .form-control[readonly] {
    background-color:#ffffff00;
    opacity: 1;
    border: none;
}
label.file-img {
    display: none;
}
.mes {
    font-size: 0.8rem;
    /* margin-left: auto; */
    /* margin-right: auto; */
    text-align: center;
    color: #ff4600;
    margin-top: -30px;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit.btn.btn-primary {
    margin-right: auto;
    margin-left: auto;
}
textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.form-control {
    height: 100px;
}
.model-logo {
    position: absolute;
    left: 2%;
    top: calc(56px + 1%);
	display: none;
}
div#output {
    position: absolute;
    top: 113px;
    z-index: 999;
    font-size: 1.3rem;
    left: calc(50% + 66px);
    mix-blend-mode: plus-lighter;
    opacity: 1.0;
    text-align: center;
    /* display: flex; */
    transform: translate(-50%, -50%);
    white-space: nowrap;
    /* justify-items: center; */
    /* align-content: center; */
    transform: rotate(273deg);
}
form.naire {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: -30px;
    flex-direction: column;
}
form.mitsumori-f {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 0px;
    padding: 0em;
    align-items: center;
    backdrop-filter: none!important;
    border: none;
}
.sisso-tx1 {
    font-size: 0.8rem;
    text-align: center;
    color: #8f5511;
}
input#p-name {
    font-size: 1.5rem;
    color: #000;
    font-weight: 700;
    margin-bottom: -10px;
    margin-left: -10px;
}
input#priceTotal2 {
    border: none;
    font-size: 1.5rem;
    margin-bottom: 0.2em;
    width: 123px;
}
div#mitsumori {
    position: absolute;
    right: 5px;
    top: 80px;
    background: rgba(255, 255, 255, 0.3);
    padding: 0.5em;
    height: fit-content;
    border-radius: 10px 10px 10px 10px;
    /* border-left: 1px solid rgba(255, 255, 255, 0.3); */
    border-top: 1px solid rgb(213 213 213 / 93%);
    backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: fixed;
    z-index: 3999;
    transition: all 0.2s ease-in-out;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    max-height: 100px;
    position: absolute;
    bottom: 50px;
    background-color: #ffffffd1;
}
input#price4 {
    display: none;
}
.form-control {
   
    margin-bottom: 1em!important;
    
}
textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.form-control {
    height: 100px;
    margin-bottom: 1em!important;
}
select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.form-control {
    margin-bottom: 1em!important;
}
textarea.wpcf7-form-control.wpcf7-textarea.form-control {
    height: 100px;
}
input#inputText {
    background: transparent;
    width: 200px;
    padding: 10px;
    margin-bottom: 2em;
    border: solid #c2c2c2 1px;
    /* border-left: 1px solid rgba(255, 255, 255, 0.3); */
    /* border-top: 1px solid rgba(255, 255, 255, 0.3); */
    border-radius: 5000px;
    /* backdrop-filter: blur(5px); */
    /* box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2); */
    color: #000000;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
span.f-txt-0-8 {
    font-size: 0.8rem;
    white-space: normal;
}
.color-line-name {
    padding: 25px 10px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    /* width: 700px; */
    margin-right: auto;
    margin-left: auto;
}
label.naire-txt {
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* margin: auto; */
}
input#bandsize {
    border: none;
    background-color: transparent;
}
.active-button {
    border: solid 2px #FF9800!important;
     box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
     border-radius: 5px;
 }
@media only screen and (max-width: 414px)
{
    .mainpost-order {
        margin-top: 0rem;
        overflow: visible;
    }
}

@media only screen and (min-width: 1020px)
{
    span.scroll-hint-icon-2 {
        display: none;
    }
}
@media only screen and (max-width: 1019.9px)
{
    span.scroll-hint-icon-2 {
        display: block;
    }
}