/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 27, 2023, 3:27:57 PM
    Author     : ima
*/
.work1-wrap .img-fit {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 240px;
}
.work1-wrap .work-slider .img-fit {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 220px;
}
.work1-wrap .work-slider .img-fit.work {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 240px;
}
.work1-wrap .img-fit img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.embro .img-fit {
    position: relative;
    width: 19%;
    height: 0;
    padding-bottom: 19%;
    display: inline-block;
}
.embro .img-fit img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.logo-mq h2 {
    color: #fff;
}
.logo-mq p {
    color: #fff;
}
.blue-box {
    width: auto;
    max-width: 790px;
}
.leather-category-index .knitting-feature-wrapp {
    margin-top: 0;
    margin-bottom: 3.5em;
}
.leather-category-index .sec-buy.second {
    margin-bottom: 2.5em;
}
/*.leather-category-index #embro-faq {
    margin-bottom: 2em;
}*/
.leather-category-index .work-wrap-2 {
    flex-wrap: wrap;
}
.leather-category-index .work1-knit h4 {
    padding-top: 0em;
}
.leather-category-index .work1-wrap {
    margin-bottom: 2em;
}

.leather-category-index .work1-wrap.work {
    margin-bottom: 2em;
    width: 80%;
}
.leather-category-index .work-wrap-knit {
    padding-top: 0;
    padding-bottom: 0;
}
.leather-category-index .work-sec {
    padding-bottom: 0;
}
.qualification-buy {
    padding-left: 23px;
}
.leather-curriculum-ttl {
    /* display: inline-flex; */
    padding: 4em 0 3em;
}
.leather-curriculum-ttl .jhia-line-section {
    width: 115px;
    margin: 5px auto 1em!important;
}
.leather-mrg-btm {
    margin-bottom: 3em;
}
.work1-wrap .colour-opt-icon {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 29%;
    left: 2%;
}
.work1-wrap .img-fit .colour-opt-icon {
    width: 55px;
    height: 55px;
    position: absolute;
    top: calc(100% - 62px);
    left: 7px;
}
.work1-wrap .colour-opt-icon.colour4 {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 28%;
    left: 2%;
}

/*css if course have old and new price*/
.new-price.course-price-wrap .course-price .price h1 {
    margin-top: 0;
    margin-left: 0;
}
.new-price.course-price-wrap .course-price {
    display: block;
}
.new-crochet .new-price .buy-button .ui-button {
    margin-bottom: 2.5em;
}
.new-price.course-price-wrap .course-price .course h1 {
    margin: 40px 0 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.new-price .course-price .price h1.old-price {
    position: relative;
    font-size: 22px;
}
.new-price .course-price .price h1.old-price::after {
    position: absolute;
    content: "";
    width: calc(100% + 20px);
    border-top: 2px solid #ff8765;
    left: -10px;
    top: 15px;
    transform: rotate(18deg);
}
.new-price .course-price .price h1.old-price::before {
    position: absolute;
    content: "";
    width: calc(100% + 20px);
    border-top: 2px solid #ff8765;
    left: -10px;
    top: 15px;
    transform: rotate(342deg);
}
.new-price .arrow-price {
    display: inline-block;
}
/*end css if course have old and new price*/

/*leather process*/
.leather-process-part .pink-box {
    border-radius: 10px;
    border: none;
    display: inline-flex;
    margin-top: 2em;
    margin-bottom: 1em;
    padding: 2em;
    position: relative;
}
.leather-process-part .pink-box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/javax.faces.resource/jhia/images/step-process-bg.jpg.html");
    background-position: center;
    background-size: cover;
    mask-image: radial-gradient(circle at 50% -15px, transparent 55px, white 0%);
    /*-webkit-mask-image: radial-gradient(circle at 50% -15px, transparent 55px, white 0%);*/
    border-radius: 10px;
    z-index: 1;
    top: 0;
    right: 0;
}
.leather-process-part .lp-step-content-wrap {
    z-index: 2;
    display: flex;
    align-items: center;
}
.leather-process-part .lp-step-txt {
    padding-right: 2em;
    padding-top: 1em;
}
.leather-process-part .step-sign {
    position: absolute;
    height: 0;
}
.leather-process-part h2.step-sign {
    margin: auto;
    position: absolute;
    right: 0;
    top: -28px;
    text-align: center;
    font-size: 30px;
    border-radius: 50%;
    padding: 0;
    font-family: "FOT-TsukuARdGothic Std", 'Zen Maru Gothic', sans-serif;
    width: 100%;
    text-align: center;
}
.leather-process-part .lp-step-txt h3 {
    color: #ffffff;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 14px;
    font-family: "FOT-TsukuARdGothic Std", 'Zen Maru Gothic', sans-serif;
}
.leather-process-part .lp-step-txt p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
}
.leather-process-part .lp-step-img {
    padding-left: 1em;
}
.leather-process-part .dot-pink {
    display: flex;
    align-items: center;
    justify-content: center;
}
.leather-process-mrg {
    margin-bottom: 3.5em;
    margin-top: 0;
}
/*MQ process*/


.leather-category-index .start-sect {
    margin-top: 3em;
}
.leather-category-index .embro a {
    display: inline-block;
    width: 16.3%;
    height: 0;
    padding-bottom: 16.3%;
    position: relative;
}
.leather-category-index .embro img.width-pict {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.leather-category-index .knitting-feature-wrapp .section-title {
    padding-top: 2em;
}
.leather-category-index .knitting-step {
    margin-top: 1em !important;
    margin-bottom: 1em;
}

/*leather cart product*/
.sewing-product-wrap {
    display: block;
    padding: 0 0 2em;
}
.sewing-product-wrap p {
    color: #ffffff;
    margin: 0 1.5em 0.5em;
}
/*.sewing-prod1-wrap {
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0.5em;
    padding-left: 0;
}
.sewing-prod2-wrap {
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0.5em;   
}*/
.invisibleDiv {
    visibility: hidden;
}
.borderDiv {
    border: 1px solid blue;
}
.sewing-product1 {
    border: solid 1px #ffffff;
    border-radius: 10px;
}
.sewing-product1 p {
    color: #ffffff;
}
.sewing-product2 {
    border: solid 1px #ffffff;
    border-radius: 10px;
}
.sewing-product2 p {
    color: #ffffff;
}
.sewing-product1 p, .sewing-product2 p {
    margin: 5px 10px;
    color: #FFF;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.sewing-radio label {
    color: #ffffff;
}
.sewing-radio-float tr td{
    display: flex;
    align-items: center;
}
.sewing-radio td {
    padding: 5px 0 2px;
    display: flex;
    align-items: center;
}
body .sewing-radio .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    border: 1px solid #ffffff;
    background-color: transparent;
}
body .sewing-radio .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon {
    background-color: #ffffff;
}
body .sewing-radio .ui-radiobutton .ui-radiobutton-box {
    border: 1px solid #cccccc;
    background-color: transparent;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    /*    -moz-transition: border-color 0.15s, box-shadow 0.15s;
        -o-transition: border-color 0.15s, box-shadow 0.15s;*/
    /*-webkit-transition: border-color 0.15s, box-shadow 0.15s;*/
    transition: border-color 0.15s, box-shadow 0.15s;
    /*    -moz-border-radius: 50%;
        -webkit-border-radius: 50%;*/
    border-radius: 50%;
}
img.sewing-prod-img {
    border-radius: 10px;
}
.page-triangle-new.leather {
    /*-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);*/
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    position: absolute;
    width: 65px;
    height: 25px;
    left: 50%;
    bottom: -3%;
    background-color: #0f3587;
    z-index: 2;
    transform: translateX(-50%);
}
.sewing-selection tr {
    width: 100%;
    display: flex;
    margin: auto;
}
.sewing-prod-choice {
    padding-top: 0;
}
.campaign-price-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5em;
}
.campaign-price-layout h1 {
    margin: 0!important;
}
.work1-wrap .img-fit.bigger-scale {
    overflow: hidden;
    border-radius: 30px;
}
.work1-wrap .img-fit.bigger-scale img:not(.colour-opt-icon) {
    transform: scale(1.5);
}
.title-banner{
    text-align: center;
}
.title-banner p{
    color: #FFF;
    text-align: center;
    font-family: "YuGothic";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 0;
}
.title-banner h1{
    color: #FFF;
    text-align: center;
    font-family: "YuGothic";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}
.white-box{
    border: 2px solid #FFF;
    background: rgba(229, 229, 229, 0.90);
    opacity: 0.8;
    padding: 24px 51px;
    margin: auto;
    display: flex;
    float: none;
    margin-top: 50px;
    margin-bottom: 50px;
}
.white-box ol li{
    color: #4E4D4E;
    font-family: 'YuGothic';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 31px;
}
.white-box ol{
    position: relative;
    list-style-type: none;
}
.white-box ol li:last-child{
    margin-bottom: 0;
}
.white-box{
    display: flex;
    gap: 76px;
    counter-reset: mycounter;
}
.split {
    list-style: none;
}
.split li::before {
    color: #4E4D4E;
    font-family: 'YuGothic';
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: absolute;
    left: 10px;
}
.split li.one::before {
    content: "1 ";
}
.split li.two::before {
    content: "2 ";
}
.split li.three::before {
    content: "3 ";
}
.split li.four::before {
    content: "4 ";
}
.split li.five::before {
    content: "5 ";
}
.split li.six::before {
    content: "6 ";
}
.size-note{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 32px;
}
.size-note table, th, td{
    border-collapse: collapse;
    border: 1px solid #E5E5E5;
}
.size-note table th, .size-note table td{
    padding: 10px 12px;
}
.w25{
    width: 25%;
}
.text-note{
    color: #121212;
    font-family: 'YuGothic';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 40px;
    margin-top: 40px;
}
.text-small{
    color: #121212;
    font-family: 'YuGothic';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.text-small.right{
    text-align: right;
}
/*.sewing-buy.course-price-wrap .course-price .price h1{
    width: 100%;
}*/
.sewing-buy.course-price-wrap .course-price .price #intro-course p{
    color: #FFF;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: left;
}
/*.sewing-buy.course-price-wrap .course-price .price #intro-course{
    margin: auto;
}*/
.buy-button{
    margin-top: 40px;
}
.sewing-price .buy-button{
    margin-top: 20px;
}
.sewing-price .new-crochet .buy-button .ui-button.lock-button {
    max-width: 400px;
}
.padding-lesson{
    padding-inline-start: 20px;
}
.padding-lesson:last-of-type {
    margin-bottom: 0;
}

.faq-sewing{
    display: flex;
}
.line-nw-section-crochet-course {
    width: 21%;
    background: #fa7563;
    position: relative;
    height: 1px;
    display: block;
    bottom: 15px;
}
.line-nw-section-crochet-course:before {
    width: 100%;
    content: '';
    background: #39bddc;
    height: 1px;
    position: absolute;
    bottom: 3px;
    left: 0;
    display: block;
}
.line-nw-section-crochet-course:after {
    width: 100%;
    content: '';
    background: #ec599f;
    height: 1px;
    position: absolute;
    top: 3px;
    left: 0;
    display: block;
}
.section-ttl p {
    font-size: 16px;
    font-weight: bold;
    background-color: #ffffff;
    display: inline-flex;
    padding: 0 10px;
    border-radius: 50%;
    font-family: "Snell Roundhand", cursive;
    z-index: 99;
    position: relative;
    margin: auto;
}

/* added by andyka */
.slick-slider .slick-list {
    border-radius: 30px;
}
/*.work1-wrap .work-slider .img-fit.bigger-scale img:not(.colour-opt-icon) {
    object-fit: contain;
    margin-top: -85px;
}*/
.work-slider .slick-dots {
    bottom: 15px;
}
.new-price-float.course-price-wrap-float .course-price-float {
    margin: -3em auto 1.5em !important;
}
.new-price-float.course-price-wrap-float .course-price-float p {
    color: white;
    text-align: center;
}
#floatWindow {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 85px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #0f3587;
    color: white;
    cursor: pointer;
    padding: 9px 13px;
    border-radius: 10px;
    width: 465px;
    height: 500px;
}
.buy-button-float span {
    font-size: 12px;
}
.buy-button-float {
    margin-top: 20px;
}
.new-crochet .buy-button-float .ui-button {
    background-color: #ff8765;
    border-radius: 50px;
    width: 55%;
    max-width: 375px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 64px;
    padding: 0px;
    word-break: keep-all;
}
.work1-wrap .img-fit.bigger-scale img:not(.colour-opt-icon){
    transform:scale(1)
}
body .sewing-radio-float .ui-radiobutton .ui-radiobutton-box {
    width: 15px;
    height: 15px;
}
.sewing-radio-float label {
    color: #ffffff;
    font-size: 12px;
    display: inline;
    margin: 0 0 0 8px;
}
body .sewing-radio-float .ui-radiobutton .ui-radiobutton-box {
    border: 1px solid #cccccc;
    background-color: transparent;
    width: 15px;
    height: 15px;
    line-height: 18px;
    text-align: center;
    -moz-transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-transition: border-color 0.15s, box-shadow 0.15s;
    transition: border-color 0.15s, box-shadow 0.15s;
    border-radius: 50%;
}
body .sewing-radio-float .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon {
    background-color: #ffffff;
    margin-top: 1.3px;
}
.btn-close-float {
    z-index: 10;
    position: absolute;
    right: 15px;
}
.mt-30 {
    margin-top: 30px;
}
.course-price-wrap .course-price .price h1 span{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.bg-grey {
    background-color: #FFF;
    padding: 30px 20px 20px 0;
}
.bg-grey.list {
    background-color: #FFF;
    padding: 0 20px 0 0;
}
padding-left-visa-sm {
    margin-bottom: 0;
}
.pay-img-new {
    padding: 1em 10em 1.5em 20px;
    width: 80%;
}
.buy-con.payment {
    display: flex;
    padding: 0;
    margin: 2em auto 2em !important;
    background-color: #fff;
}
.buy-descript {
    padding: 0 40px;
    margin: 0;
}
.buy-descript h3{
    display: flex;
    gap: 10px;
    align-items: baseline;
}
.buy-descript h3 span{
    letter-spacing: normal;
    font-size: 15px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    color: #4e4d4e;
    font-weight: normal;
    line-height: 1.5em;
}
.about-vid iframe img{
    width: 100%;
}
.wrap-select p{
    font-size: 12px;
}
.PC-Only{
    display: block;
}
.SM-Only{
    display: none;
}
.course-price-wrap.sewing-price{
    float: inherit;
}
.wrap-select img{
    width: 100px;
}
.object-fit{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    margin: 2em 0 2em;
}
.object-fit img{
    position: absolute;
    width: 100%;
    height: 100%!important;
    object-fit: cover;
}
img.point-img-border{
    margin: 0;
}
img.pay-sewing{
    max-width: 279px;
    padding:25px 0 10px
}
.sewing-buy.sec-buy .buy-image{
    padding: 2em 1em 1em 2em;
}
.sec-buy {
    padding: 0;
}
.buy-image {
    padding: 0;
}
.buy-descript h3 span.small-text1{
    font-size: 12px;
}
.sewing-buy.sec-buy .buy-descript {
    margin: 5px auto 0;
}
.buy-image ul.padding-left-visa-sm{
    padding-inline-start: 40px;
    margin-bottom: 0;
}
.buy-image ul.padding-left-visa-sm:last-of-type {
    margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
    .work1-wrap .work-slider .img-fit {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 290px;
    }
    .work1-wrap .work-slider .img-fit.work {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 240px;
    }
    .leather-prod1-wrap {
        padding-top: 0;
        padding-bottom: 1.5em;
        padding-right: 0;
        padding-left: 0;
    }
    .leather-prod2-wrap {
        padding-top: 0;
        padding-bottom: 1.5em;
        padding-right: 0;
        padding-left: 0;
    }
    .page-triangle-new.leather {
        height: 30px;
        bottom: -2%;
    }
    .leather-selection table {
        width: 100%;
    }
    .work1-wrap .colour-opt-icon, .work1-wrap .colour-opt-icon.colour4 {
        width: 70px;
        height: 70px;
        top: 211px;
        left: 2%;
    }
    .sewing-buy.sec-buy .buy-image {
        padding: 2em 2em 1em 2em;
    }
    .buy-descript {
        padding: 0 2em 1em;
    }
    .pay-img-new {
        width: 80%;
    }
    img.pay-sewing {
        width: 80%
    }
    .buy-image ul.padding-left-visa-sm {
        padding-inline-start: 20px;
    }
}

@media screen and (max-width: 820px) {
    .work1-wrap .colour-opt-icon, .work1-wrap .colour-opt-icon.colour4 {
        width: 70px;
        height: 70px;
        top: 235px;
        left: 2%;
    }

    /*leather cart product*/
    .sewing-prod1-wrap {
        display: block;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
        padding-left: 0;
    }
    .sewing-prod2-wrap {
        display: block;
        padding-top: 1em;
        padding-bottom: 0;
        padding-right: 0;
        padding-left: 0;
    }
    .sewing-radio td {
        padding: 7px 0 3px;
    }
    .sewing-buy.course-price-wrap .course-price .course h1 {
        color: #ffffff;
        font-size: 28px;
        margin: 30px 0 0;
        word-break: keep-all;
    }
    .sewing-buy.course-price-wrap .course-price .price h1 {
        margin-top: 0;
        margin-left: 0;
    }
    .sewing-product-wrap p {
        margin: 0 1em 0.5em;
    }
}

@media screen and (max-width: 768px) {
    .buy-con.payment {
        flex-wrap: wrap;
    }
    .work1-wrap .colour-opt-icon, .work1-wrap .colour-opt-icon.colour4 {
        width: 70px;
        height: 70px;
        top: 215px;
        left: 2%;
    }

    /*process part*/
    .leather-process-part .lp-step-content-wrap {
        display: flex;
        flex-flow: column-reverse;
        padding-left: 0;
        padding-right: 0;
    }
    .leather-process-part .lp-step-txt {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .leather-process-part .lp-step-img {
        width: 100%;
        padding: 0;
        margin-top: 2em;
    }
    /*end process part*/

    .campaign-price-layout {
        margin-top: 1em;
    }
    .sewing-buy.sec-buy .buy-image {
        padding: 2em 2em 0;
    }
    .buy-descript {
        padding: 1em;
    }
    .pay-img-new {
        width: 60%;
        padding: 1.5em 20px;
    }
    .bg-grey {
        padding: 0 20px 20px 0;
    }
}

@media screen and (max-width: 40.063em) {
    .leather-category-index .work-wrap-2 {
        width: 100%
    }
    .padding-left-visa-sm {
        padding-left: 40px;
    }
    .margin-top-visa {
        margin-top: 0;
        margin-left: 20px;
        flex-wrap: wrap;
    }
    .leather-category-index .top-knitting-cover {
        position: relative;
        height: auto;
    }
    .leather-category-index .blue-box {
        padding: 20px;
        margin-bottom: 20px;
    }
    .leather-category-index .work1-wrap .img-fit {
        width: 230px;
        padding-bottom: 230px;
        margin: auto;
    }
    .leather-category-index .work1-wrap {
        margin-bottom: 0;
        left: 5px;
    }
    .embro img.width-pict {
        width: 100%;
    }
    .embro {
        padding: .5em 0 0;
    }
    .qualification-buy {
        padding-left: 0;
    }
    .leather-category-index .sec-buy.second {
        margin-bottom: 0em;
    }
    .leather-category-index #embro-faq {
        margin-bottom: 1em;
    }
    .feature-teachers-wrap {
        padding: 0;
    }
    .leather-category-index .blue-box img {
        width: 100%;
    }
    .leather-category-index .img-top-knitting {
        padding: 0;
    }
    .work1-wrap .colour-opt-icon, .work1-wrap .colour-opt-icon.colour4 {
        width: 55px;
        height: 55px;
        top: 168px;
        left: 2%;
    }

    /*css if course have old and new price*/
    .new-price .arrow-price {
        margin: 0 1em;
    }
    .new-price.course-price-wrap .course-price .price h1 span {
        font-size: 14px;
    }
    .new-price.course-price-wrap .course-price .course h1 {
        margin-top: 0;
    }
    /*end css if course have old and new price*/

    /*process part*/
    .leather-feature-part {
        margin-bottom: 0;
    }
    .leather-process-part h2.step-sign {
        top: -20px;
        font-size: 28px;
    }
    .leather-process-part .topsection-mg-btm {
        margin-bottom: 0;
    }
    .leather-process-part .pink-box {
        margin-top: 1.5em;
    }
    /*end process part*/

    .leather-curriculum-ttl {
        padding: 1em 0 0em;
    }
    .leather-category-index .work-wrap-knit {
        padding-bottom: 2em;
        width: 100%;
    }
    .leather-category-index .knitting-feature-wrapp .section-title {
        padding-top: 1em;
    }
    .leather-category-index .start-sect {
        margin-top: 0em;
    }
    .page-triangle-new.leather {
        bottom: -2.5%;
    }
    .leather-category-index .about-sec {
        padding-bottom: 0;
    }

    .curriculum-tentative {
        margin-top: -3.5em;
    }
    .title-banner p{
        font-size: 13px;
    }
    .title-banner h1{
        font-size: 18px;
    }
    .white-box {
        display: flex;
        gap: 5px;
        counter-reset: mycounter;
        padding: 14px 5px;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .white-box ol {
        padding-inline-start: 25px;
    }
    .white-box ol li {
        font-size: 14px;
        margin-bottom: 11px;
    }
    .split li::before {
        font-size: 18px;
        left: 10px;
    }
    .work1-wrap .work-slider .img-fit.bigger-scale img:not(.colour-opt-icon) {
        object-fit: cover;
        margin-top: 0;
    }
    .size-note {
        flex-direction: column;
        gap: 32px;
    }
    #floatWindow {
        bottom: 0;
        right: 0;
        width: 60%;
        height: auto;
        z-index: 999;
    }
    .new-crochet .buy-button-float .ui-button{
        width: 100%;
        max-width: 100%;
        margin-bottom: 1em;
    }
    .sewing-product1, .sewing-product2 {
        padding: 0 0.5em 0.5em;
    }
    .leather-category-index .embro a {
        width: 15.5%;
        padding-bottom: 15.5%;
    }
    .wrap-select{
        flex-direction: column;
    }
    .wrap-select p{
        font-size: 11px;
    }
    .PC-Only{
        display: none;
    }
    .SM-Only{
        display: block;
    }
    .sewing-prod-choice{
        padding: 0;
    }
    .sewing-radio-float tr td{
        align-items: flex-start;
    }
    body .sewing-radio-float .ui-radiobutton .ui-radiobutton-box{
        margin-top: 8px;
        margin-left: 1em;
    }
    .sewing-product-wrap .SM-Only p{
        color: #FFF;
        font-family: 'YuGothic';
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 14px;
        margin: 0;
    }
    .new-price-float.course-price-wrap-float .course-price-float p{
        color: #FFF;
        text-align: center;
        font-family: 'YuGothic';
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .buy-button-float {
        margin-top: 10px;
    }
    .new-price-float.course-price-wrap-float .course-price-float .price p,
    .title-floatWindow{
        margin: 10px 0;
    }
    .new-crochet .buy-button-float .ui-button{
        color: #FFF;
        text-align: center;
        font-family: "Hiragino Kaku Gothic ProN";
        font-size: 11.5px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 0;
    }
    .new-crochet .buy-button-float .ui-button.ui-button-text-only .ui-button-text {
        padding: 6px 0;
    }
    .new-crochet .buy-button-float .btn-arrow.ui-button::after{
        opacity: 0;
    }
    .new-price-float.course-price-wrap-float .course-price-float {
        margin: -3em auto 10px !important;
    }
    .sewing-product-wrap {
        padding: 0;
    }
    .wrap-select img{
        border-radius: 10px;
        width: 96px;
        height: 55px;
    }
    .wrap-select p.SM-Only{
        color: #FFF;
        font-family: "YuGothic";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .wrap-select p{
        margin-left: 0;
        margin-right: 0;
    }
    .sewing-buy .price #intro-course2 p{
        color: #FFF;
        text-align: center;
        font-family: "YuGothic";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 14px;
        word-break: keep-all;
    }
    .sewing-buy .price p{
        font-size: 14px;
        font-weight: 700;
    }
    .new-crochet .buy-button .ui-button {
        width: 100%;
    }
    .sewing-faq .section-ttl h2{
        margin-top: auto;
    }
    .sitemap-sec.sitemap-detail.sewing-faq {
        margin-top: 0;
        margin-bottom: 20px;
    }
    .work-sewing .work1-knit h4, .work-sewing .work2-knit h4, .work-sewing .work3-knit h4, .work-sewing .work4-knit h4{
        margin-top: 1.33em;
    }
}
@media screen and (max-width: 320px) {
    .work1-wrap .colour-opt-icon, .work1-wrap .colour-opt-icon.colour4 {
        left: 10%;
    }
}