/*New ORG form*/

input.btn-file{
    opacity: 0;
    height: 0;
    width: 0;
}
label.label-input-file{
    color: #5c6578;
    background-color: transparent;
    border: 1px solid #d2d2d2;
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    width: 100%;
    align-items: center;
}
.ui-widget .ui-icon.fa, .ui-icon.fa {
    background: none repeat scroll 0 0 transparent!important;
    text-indent: 0!important;
    margin-right: 10px;
    width: 40px;
    font-size: 16px;
    left: 5px
}
p#file-name64, p#file-name642 {
    margin: 1px 0 auto;
    width: 100%;
}

body {
    color: #5c6578;
}
.form-step-wrap {
    display: flex;
    margin: 1.5em auto 0;
}
.number-bullet {
    width: 25px;
    height: 25px;
    background-color: #003884;
    margin-right: 0.5em;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    padding: 2px 0 0 0;
    margin: 10px 10px 10px 0;
    line-height: 21px;
}
.form-step-wrap span {
    margin: auto 0;
    font-family: "Kozuka Gothic Pr6N", sans-serif;
    color: #4e4d4e;
    font-size: 21px;
    font-weight: bold;
}
.form-btn-wrap {
    margin-top: 1.5em;
}
body .ui-button.button-second.ui-button-text-only .ui-button-text {
    padding: 6px 12px;
    font-weight: normal;
}
#data-form .ui-inputtextarea {
    font-weight: normal;
    width: 100%;
}
.image-upload-box input {
    width: 100%;
    padding-left: 40px;
    background-color: transparent;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #c3ccdd;
    /* color: #d8dee9; */
    color: #4e4d4e;
    margin-top: 0;
    height: 30px;
}
.image-upload .image-upload-box {
    position: relative;
    margin-bottom: 15px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.image-upload .image-upload-box i {
    position: absolute;
    color: #6f6f6f;
    font-size: 17px;
    top: 3%;
    margin-top: 0px;
    left: 10px;
}

body .ui-rating .ui-rating-star-on a{
    color: #fdc833;
}
.layout-main {
    padding: 148px 0 0;
    margin: 0;
}
.centered-text{
    text-align: center;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 0; /* height of sticky header */
}
body {
    background-color: white;
    overflow-x: hidden;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-size: 14px;
}
body a:hover {
    color: #51d1e6;
    transition: 500ms ease 0s;
}
body .ui-inputfield {
    width: 48.8%;
    font-size: 16px;
}
body .ui-widget, body .ui-widget .ui-widget {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-size: 16px;
    color: #222222;
}
body .ui-widget .ui-button, body .ui-widget .ui-widget .ui-button {
    color: #ffffff;
}
body .ui-widget .ui-steps-number, body .ui-widget .ui-widget .ui-steps-number {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body .ui-widget .ui-steps-title, body .ui-widget .ui-widget .ui-steps-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
}
.bg-blue{
    background-color: #283A84;
    margin: 1.5em 0;
    display: flex;
}
.left-banner{
    padding-left: 1em;
}
.bg-blue h1 {
    color: #ffffff;
    text-align: center;
    padding: 0 1em;
    font-size: 23px;
}
.blue-text{
    display: grid;
    align-content: center;
    justify-content: center;
}
.bg-blue img.logo-white{
    margin: auto;
    display: flex;
    padding-bottom: 1em;
}
.banner-handmade{
    display: flex;
    flex-wrap: wrap;
}
.ui-panelgrid .ui-grid-responsive .ui-panelgrid-cell.handicraft{
    padding: 1em
}
.list-category-top .ui-panelgrid .ui-panelgrid-cell{
    padding: 0;
}
.ui-datagrid-content-empty {
    padding: 4px 0;
}
.datagrid-empty {
    margin: auto;
}
.max-2560{
    max-width: 2560px;
}
.padding05-left-right{
    padding: 0 0.7em;
}
.small-note{
    font-size: 13px;
    line-height: 10px;
    word-break: keep-all;
}
.flex-column{
    display: flex;
    flex-flow: column;
}
.flex-one{
    flex: 1;
    min-height: 265px;
    max-height: 265px;
    object-fit: cover;
}
.flex-wrap{
    display: flex;
    flex-flow: wrap;
}
.padding-list-pr{
    padding: 0 1.5em !important;
}
.news-list-margintop{
    margin-top: 1em !important;
}
.news-tag-margintop{
    margin-top: .2em !important;
}
.dashboard-certified-menu{
    margin-bottom: 3em;
}
.courseList-certif-menu{
    margin-bottom: 2em;
    margin-top: 1em;
}
.form-certif-menu{
    margin-bottom: 0em;
    margin-top: 1em;
}
.textbook-certif-menu{
    margin-bottom: 0em;
    margin-top: 0em;
}
.notice-certif-menu{
    margin-bottom: 0em;
    margin-top: 1em;
}
.pass-change-certif-menu{
    margin-bottom: 0em;
    margin-top: 1em;
}
.pay-history-certif-menu{
    margin-bottom: 0em;
    margin-top: .5em;
}
.withdrawal-certif-menu{
    margin-bottom: 0em;
    margin-top: 1em;
}
.button-bluelight.center-btn-bluelight .ui-button-text{
    padding: 3px 25px 4px 6px !important;
    text-align: center;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.button-bluelight.center-btn-bluelight .ui-button-text:after{
    right: 39px !important;
}
.mail-address-text{
    color: #222222;
    font-size: 16px;
}
.margin-ttl-mypage{
    margin: 1.5em auto !important;
}
.display-news-sm{
    display: none;
}
.display-news-pc{
    display: block;
}
.item-pay-process{
    font-weight: bold;
    margin: auto;
    line-height: 1;
    margin-top: .5em;
}
.item-pay-success{
    font-weight: bold;
    margin: auto;
    line-height: 1;
    margin-top: .5em;
}
.item-pay-fail{
    color:red;
    margin: auto;
    line-height: 1;
    margin-top: .5em;
}
.padd-top-menu-member{
    padding-top: 0em;
}
.padd-top-menu-member .ui-menu.ui-menubar.member-menu .ui-menu-list{
    display: flex;
    justify-content: space-between;
}
.text-fill-field .ui-inputfield{
    background: #f2f5f8 !important;
    border: 1px solid #f2f5f8;
    border-radius: 0;
    max-width: 340px;
}
.news-navigation-wrap {
    display: flex;
    margin: 3em auto 5em;
    justify-content: center;
}
.nav-number .number p {
    border-bottom: 3px solid #a2a2a2;
    padding: 0 10px 7px;
    font-size: 16px;
    color: #a2a2a2;
    margin: 0;
}
.nav-number a.article-next .arrow {
    left: 0;
    margin-left: .5em;
}
.nav-number .number {
    margin: 0 .5em;
}
.nav-number .number.active p {
    color: #222222;
    border-bottom: 3px solid #0f3587;
}
.dashed-line-100{
    border-bottom: 1px dashed #c4c4c4;
}
.font-12{
    font-size: 12px !important;
}
.font-13{
    font-size: 13px !important;
}
.font14{
    font-size: 14px;
}

.padding-top2i{
    padding-top: 2em !important;
}
.margin-top0{
    margin-top: 0 !important;
}
.padding-top0{
    padding-top: 0 !important;
}
.padding-btm0{
    padding-bottom: 0 !important;
}
.display-flex{
    display: flex;
}
.ui-cartNext{
    width: 100%;
}
.ui-growl-message {
    padding: 0 0 0px 0;
    width: 295px;
    float: right;
    line-height: 2.3em;
}
.ui-growl {
    position: fixed;
    top: 120px !important;
    left: 0;
    right: 0;
    margin: auto;
    width: 390px;
}
.ui-growl-title {
    font-weight: bold;
    padding: 0 0 3px 0;
    display: block;
}
.ui-steps ul {
    margin: auto;
}
.w100{
    width: 100%;
}
.w80{
    width: 80%;
}
.w45{
    width: 45%;
}
.max-width-1440 {
    max-width: 1440px;
}
/* MY PAGE */
.user-information{
    background: #f2f2f2;
    margin-top: 2.5em;
}
.editor-photo{
    width: 95px;
    margin-right: 2em;
    height: 95px;
    align-self: center;
    border-radius: 50%;
}
.margin-2em-auto{
    margin: 2em auto;
}
.unable-button{
    background-color: #8a9bc4 !important;
}
.post-review-btn{
    word-break: keep-all;
    padding: 0px 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: auto;
}
.bg-gray-f5{
    background: #f5f5f5;
}
.user-information-wrap{
    margin: 2.5em auto;
}
.table-mypage{
    margin-top: 2em;
}
.edit-text-btn{
    color: #0f3587;
    text-align: left;
    text-decoration: underline;
}
.edit-text-btn a{
    text-decoration: underline;
}
.review-list-star .fa {
    font-size: 1.7vw;
    color: #e3e3e3;
}
.eval-star{
    margin-bottom: .5em;
}
.ttl-item-workshop{
    text-align: center;
    /*margin-left: 1.5em;*/
    width: 100%;
}
.review-list-star .fa.point {
    color: #facc2e;
}
.edit-text-btn-tbl{
    color: #0f3587;
    text-align: center;
    margin-top: 5px;
}
.editor-info-member{
    margin-top: 5px;
    font-weight: bold;
    word-break: keep-all;
}
.editor-info{
    margin-bottom: 5px;
    font-size: 16px;
}
.text-align-name{
    text-align: left;
}
.date-time-index{
    display: flex;
    align-items: center;
}
.news-for-member{
    padding-right: 2em;
    padding-top: 1.5em;
}
.news-for-member2{
    padding-top: 1.5em;
    padding-left: 2em;
}
.member-name{
    max-width: 25%;
    width: 25%;
}
.membership-info{
    max-width: 25%;
    width: 25%;
}
.box-user-inform{
    padding: 1.5em 1em;
    background: white;
    margin: .25em;
    text-align: center;
    flex: 1;
}
.title-table-course{
    background: #163789;
    color: white;
    word-break: keep-all;
}
.title-row-course{
    min-width: 120px;
}
.course-detail-btn{
    word-break: keep-all;
    padding: 0px 36px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: auto;
}
.text-title-row-course{
    color: white;
    padding: .5em 2em;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
}
.course-workshop{
    display: flex;
    align-items: center;
}
.content-table-course td{
    padding: 1em;
    word-break: keep-all;
}
.table-course-myPage{
    border-collapse: collapse;
    width: -webkit-fill-available;
}
.img-course-workshop-wrap{
    color: white;
    border: 1px solid transparent;
    width: 30%;
    height: 0;
    padding-bottom: 19.5%;
    position: relative;
}
.img-course-workshop{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.ui-datatable thead th {
    text-align: center;
    font-weight: normal;
}
th.history-table-width {
    width: 35%;
}
body .reg-form .ui-state-highlight {
    width: fit-content;
    color: #ffffff!important;
}
/* END MY PAGE CSS */
/* GUIDE PAGE */
.bg-color-title{
    background-color: #003884;
    padding: 2em;
}
.bg-color-content{
    background-color: white;
}
.course-guide .qna-icon{
    width: 10% !important;
    margin-right: 2em !important;
    margin-top: 0;
}
.margin-top-guide-top-text-faq{
    margin-top: 15px;
}
.margin-btm-guide-top-text-faq{
    margin-bottom: 15px;
}
.margin-btm-faq-guide{
    margin-bottom: 8em !important;
}
.img-icon-guides{
    width: 45px;
}
.img-icon-guides-note{
    width: 40px;
}
.point-text-guide{
    align-items: baseline;
}
.point-arrow{
    content: url('../../resources/jhia/images/blue-arrow.png');
    width: 8px;
    height: auto;
    padding: 0;
    margin-right: 1em;
}
.text-content-guide-part{
    margin: .5em;
}
.toga-img{
    width: 55px !important;
}
.display-flex-guide{
    display: flex;
}
.guide-index{
    margin-top: 1em;
}
.guide-top-background{
    border-radius: 5px;
    border: 1px solid #f5f5f5;
    background-color: #f5f5f5;
    padding: .5em!important;
}
.title-guide-part{
    color: #ffffff;
    font-weight: 500;
    font-size: 22px;
    text-align: left;
}
.continue-faq{
    align-self: center;
}
.title-guide-part-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-guide{
    display: flex;
    align-items: center;
    padding: 2em;
}
.faq-guide-wrap{
    display: flex;
    justify-content: space-between;
    border: 1px solid;
    border-left: 8px solid #003884;
    padding: 2em 2em 2em 12em;
}
.img-qna{
    width: 70px;
}
.list-qual-grid{
    display: grid;
    grid-template-columns: repeat(2, auto);
}
.margin-li-qual-member{
    margin: .5em 0;
}
.list-qual-member li p{
    margin: 0;
    text-decoration: underline;
}
.list-qual-member{
    list-style: none;
    padding-inline-start: 0;
    margin: .5em 2.2em;

}
.margin-right-half{
    margin-right: .5em;
}
.list-qual-member a{
    color: #222222;
}
.title-member-dashboard{
    margin-bottom: 5px;
    font-weight: normal;
}
.qual-member{
    margin-top: 2em;
    margin-bottom: 0;
}
.news-member{
    border-bottom: 1px dashed #cdcdcd;
    width: 97%;
}
.news-member a{
    color: #222222;
}
.news-member-side{
    display: flex;
    align-items: center;
    padding-bottom: 0;
    padding-left: 0;
}
.news-member-side p {
    font-size: 13px;
    color: #787878;
    line-height: 1.6;
}
.label-news-member-embroidery{
    background-color: #f4618e;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-knit{
    background-color: #aa7b53;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-lace{
    background-color: #66bfd9;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-quilt{
    background-color: #b06dc8;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-paint{
    background-color: #2ecaa0;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-handwoven{
    background-color: #81b32d;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-leather{
    background-color: #ffb401;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-calligraphy{
    background-color: #c9a966;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-sewing{
    background-color: #1190c6;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-other{
    background-color: #ed8e60;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-volume {
    background-color: #0f3587;
    color: #ffffff!important;
    width: 40px;
    height: 40px;
    padding: 4px 5px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    left: 0;
    top: -10px;
    position: absolute;
}
.series-list-img {
    position: relative
}
.wrap-series-date {
    display: block;
    align-items: center;
}
.wrap-series-date .news-date {
    margin: 0 0 7px;
}
.label-news-member-volume span {
    font-size: 18px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif!important;
}
.series-list-side p.label-series {
    line-height: 1.2;
}
.series-list-side {
    padding: 0;
    margin: 1em 0 0.8em;
    display: flex;
    align-items: center;
}
.series-list-side h4.ttl {
    margin-top: 0;
    margin-left: 1.2em;
    font-weight: normal;
}
.title-qual-member{
    font-weight: bold;
    background: #eceff4;
    padding: 1.5em 2em;
    margin-top: 0;
}
.qualified-member-content{
    border: 1px solid #cdcdcd;
    padding: 0 0 2em 0;
    flex: 1;
}
.sameheight-column .bg-color-content ul{
    padding-inline-start: 2em !important;
}
.bg-color-content.height-box-white2 ul{
    padding-inline-start: 2em !important;
}
.bg-color-content.height-box-white1 ul{
    padding-inline-start: 2em !important;
}
.sameheight-column{
    display: flex;
    flex-flow: column;
}
.height-box-white1{
    flex: 1;
}
.height-box-white2{
    flex: 1;
}
.img-icon-faq{
    margin-right: 2em;
}
.any-question-text{
    font-size: 22px;
    line-height: 30px;
}
.arrow-to-faq{
    content: '';
    border-right: 2px solid #123a89;
    border-top: 2px solid #123a89;
    transform: rotate(45deg);
    height: 30px;
    width: 30px;
}
/* END CSS GUIDE PAGE */

/*container*/
.page-container{
    padding: 0;
}
.section-container{
    /*padding: 100px 0 100px 0;*/
    padding: 50px 0 80px 0;
}

/*primeflex*/
.p-grid {
    margin-left: 0;
    margin-right: 0;
}

/*text setting*/
body .text-small {
    font-size: 13px;
}
h1.page-ttl{
    text-align: center;
    margin: auto;
}
.centered-item{
    float: none;
    margin: auto;
}
.centered{
    text-align: center;
}
.register-btn{
    margin-bottom: 2em;
}
.label-indetail{
    font-weight: 500;
}
h1 > span.course-ttl{
    color: #37abcc;
}
body .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon{
    margin-top: 4px;
}
body .ui-button {
    color: #ffffff;
    background-color: #003884;
    border: 1px solid transparent;
    font-size: 16px;
    -moz-transition: background-color 0.15s, box-shadow 0.15s;
    -o-transition: background-color 0.15s, box-shadow 0.15s;
    -webkit-transition: background-color 0.15s, box-shadow 0.15s;
    transition: background-color 0.15s, box-shadow 0.15s;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    font-weight: 600;
}
.ui-button.topbar-btn-cart{
    background-color: #113883;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    margin: auto;
    margin-right: 1em;
    height: 35px;
}
body .ui-button.ui-state-hover {
    /*background-color: #f3c31d;*/
    background-color: #ec7c5d;
    border-color: transparent;
}
body .ui-button.ui-button-text-icon-right .ui-button-text {
    padding: 6px 28px 6px 12px;
    font-weight: bold;
}
.sameheight-wrap {
    display: flex!important;
    flex-wrap: wrap!important;
}
.guide-bg{
    background-color: #eceff4;
    margin: 1em auto;
    border-radius: 5px;
}
.center-wrap{
    margin: auto!important;
    float: none!important;
}
.name-wrap{
    display: block;
    flex-direction: row;
    place-content: space-between;
}
.year-wrap{
    display: flex;
    flex-direction: row;
}
.year-wrap span{
    padding: 0.5em;
}
.zip-wrap{
    display: flex;
    flex-direction: row;
}
.zip-wrap span{
    align-self: center;
}

.zip1{
    width: 55px !important;
    margin-right: 11.5px;
}
.zip2{
    width: 70px !important;
    margin-left: 11.5px;
}
.border-bottom-grey{
    border-bottom: #f2f2f2 2px solid;
}
.menu-wrap{
    margin-bottom: 2em;
}
h1.membername-title{
    color: #37abcc;
}
.card .score span{
    font-size: 28px;
}
.blue-text{
    color: #37abcc;
}
.red-txt{
    color: red;
}
.green-txt{
    color: #45994a;
}
.width-auto{
    width: auto;
}
.icon-green{
    color: #33d9b2;
    font-size: 25px;
}
.icon-red{
    color: #ff5252;
    font-size: 25px;
}
.required-label:after{
    content:"*";
    color: red;
}
.color-red{
    color: #ff5252;
}
.color-green{
    color: #33d9b2;
}
.color-orange{
    color: #ff9f43;
}

.no-padding{
    padding: 0px;
}
.no-padtb{
    padding: 0 0.5em;
}
.no-padlr{
    padding: 0.5em 0;
}
.no-pad-left{
    padding-left: 0 !important;
}
.no-pad-right{
    padding-right: 0 !important;
}
.no-margin{
    margin: 0px;
}
.no-marginp p{
    margin: 0;
}
.margin-bottom1{
    margin-bottom: 1em;
}
.margin-bottom{
    margin-bottom: 2em;
}
.margin-bottom2-sm1{
    margin-bottom: 2em;
}
.no-margin-bottom{
    margin-bottom: 0;
}
.no-margin-bottompc{
    margin-bottom: 0;
}
.no-margin-toppc{
    margin-top: 0;
}
.margin-top1{
    margin-top: 1em;
}
.margin-top2{
    margin-top: 2em;
}
.margin-top3{
    margin-top: 3em;
}
.margin-top4{
    margin-top: 0;
}
.margin-top3-nosm{
    margin-top: 3em;
}
.margin-top2-nosm{
    margin-top: 2em;
}
.margin-top1-nosm{
    margin-top: 1em;
}
.margin-bottom3{
    margin-bottom: 3em;
}
.margin-bottom9{
    margin-bottom: 9em;
}
.margin-tb-nosm{
    margin: 1em auto;
}
.margin-tb-5{
    margin: .5em 0;
}
.margin-tb{
    margin: 1em 0;
}
.margin-tba2{
    margin: 2em auto;
}
.margin-tba3{
    margin: 3em auto;
}
.centered-text{
    text-align: center;
}
.left-text{
    text-align: left;
}
.right-text{
    text-align: right;
}
.float-right {
    float: right!important;
}
.bold-text{
    font-weight: bold;
}
.lightblue-bg {
    background-color: #e5f1f8;
}

/*button*/
body .ui-button.ui-button-text-only .ui-button-text {
    font-size: 16px;
}
body .article-more .ui-button.ui-button-text-only .ui-button-text, body .news-more .ui-button.ui-button-text-only .ui-button-text {
    font-size: 16px;
    padding: 6px 34px 6px 0;
}
.ui-button.button-third{
    background-color: #003884;
    border-radius: 50px;
    border: 1px solid white;
    padding: 0px 2em;
    font-weight: 600;
}
.ui-button.button-second{
    background-color: #003884;
    border-radius: 50px;
    color: white;
    font-weight: 600;
    /*padding: 4px 2.5em;*/
    padding: 4px 10px;
    word-break: keep-all;
}
.gmo-return-btn{
    border-radius: 100px;
    width: 275px;
}
.user-name{
    font-weight: 600;
    font-size: 1.1em;
}

button.back-btn{
    margin-bottom: 5px;
    padding: 0.4em;
    float:right;
    font-size: 16px;
}

.popup-panel-overlay{
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 99999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.popup-panel{
    position: relative;
    margin: 15% 25%;
    background-color: transparent;
    border-radius: 5px;
}
.video-margin-a{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.ui-button.btn-close-circle{
    border-radius: 50%;
    zoom: 1.5;
}
.btn-video-close{
    display: block;
    position: absolute;
    right: -2%;
    top: -6%;
}

.myImg {
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {
    opacity: 0.7;
}

.single-wrap {
    display: block;
}

/*-------------------------------buttom to top*/
#myButton {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 99;
    border: none;
    outline: none;
    background-color:#0d2b89;
    color: white;
    cursor: pointer;
    padding: 9px 13px;
    border-radius: 10px;
}

#myButton i {
    color: #fff;
    margin: 0;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#myButton:hover {
    background-color: #555;
}
.button-language{
    width: 100%;
    font-size: 0.9em;
    text-align: left;
    background-color: #fff;
    border:none;
    padding: 0.5em;
}
.button-language:hover{
    background-color: #f1f2f7;
}

/*general css*/
p{
    letter-spacing: normal;
    font-size: 16px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    color: #222222;
    line-height: 1.6em;
    /*margin: 0em auto;*/
}
h1, h2, h3, h4, h5{
    /*font-family: 'ToppanBunkyuMincho Regular';*/
    letter-spacing: normal;
    color: #222222;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    line-height: 1.6em;
}
h2{
    font-size: 21px;
}
.red-text{
    color: red;
}
.sec-mrg{
    margin: 3em auto;
}
.sec-ttl{
    width: 100%;
    padding-top: 3em;
    padding-bottom: 1em;
}
.dash-line{
    border-bottom: #cdcdcd dashed thin;
}
.dot-line{
    border-bottom: #9d9da0 dotted thin;
}
.blue-line{
    border-bottom: 1px solid #003884;
    margin-bottom: 1em;
}
.gray-line {
    border-bottom: 2px solid #c8c8c8;
    width: 40px;
}
.gray-line2 {
    border-bottom: 1px solid #cdcdcd;
}
.layout-content{
    margin: 0;
    padding: 0;
}
.center-txt{
    text-align: center;
}
.btn-arrow.ui-button {
    position: relative;
}
.btn-arrow.ui-button::after, .btn-arrow.topbar-btn-cart::after {
    width: 10px;
    height: 10px;
    box-shadow: -2px 2px 0 rgb(255, 255, 255);
    transform: rotate(225deg);
    position: absolute;
    content: "";
    right: 9%;
}
.hr-line {
    border-bottom: 1px dashed #c1c1c1;
}
.hr-line-menu{
    border-bottom: 1px solid #c1c1c1;
    width: 320px;
}
.max-1260 {
    max-width: 1260px;
}
.max-1260-center {
    max-width: 1260px;
    margin: auto;
    float: none;
}

.top-cover{
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    margin-top: 46px;
    background-color: #cccccc;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}
.em-logo{
    position: relative;
    left: 40%;
    width: 20%;
    margin: 4em auto 2em;
}
.whitebox{
    background: rgba(255,255,255,0.8);
    border-radius: 10px;
    width: 75%;
    margin: 0 auto 3em;
}
.whitebox p{
    letter-spacing: normal;
    /*font-size: 16px;*/
    text-align: justify;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    color: #4e4d4e;
    line-height: 2em;
    padding-bottom: 3em;
}
.icon-stitch{
    position: relative;
    float: none;
    width: 30%;
    margin: -15px auto 10px;
    text-align: center;
    left: 34%;
}
.icon-kugen {
    position: relative;
    float: none;
    width: 25%;
    margin: -15px auto 10px;
    text-align: center;
    left: 36.5%;
}
.icon-shiro {
    position: relative;
    float: none;
    width: 25%;
    margin: -15px auto 10px;
    text-align: center;
    left: 36%;
}
.icon-crochet {
    position: relative;
    float: none;
    width: 15%;
    margin: -15px auto 10px;
    text-align: center;
    left: 42.5%;
}
.icon-course {
    position: relative;
    float: none;
    width: 40%;
    margin: 10px auto;
    left: 30%;
}
.margin-top-visa{
    margin-top: 0;
    margin-left: 21px;
}
.step-sec{
    background-color: #e5ebf2;
    padding: 4em 0 5em;
}
.step-bttm-mgr{
    margin-bottom: -2em;
}
.course-txt{
    margin: 1em auto;
    float: left;
    text-align: left;
    padding: 0.5em 2em;
}
.sticker{
    width: 7%;
    height: 7%;
    display: flex;
    position: relative;
    left: 73%;
    top: -430px;
    float: none;
}
.step-wrap{
    display: inline-flex;
    margin: 1em auto 2em;
    /*    display: flex!important;
        flex-wrap: wrap!important;*/
    position: relative;
}
.stepbox.stepbox1{
    background-color: #446da5;
}
.stepbox.stepbox-triangle:after{
    content: " ";
    position: absolute;
    right: -19px;
    top: 168px;
    border-top: 18px solid transparent;
    border-right: none;
    border-left: 20px solid #446da5;
    border-bottom: 18px solid transparent;
}
.stepbox.stepbox2{
    background-color: #2e5c9a;
}
.stepbox.stepbox2.stepbox-triangle:after{
    border-left: 20px solid #2e5c9a;
}
.stepbox.stepbox3{
    background-color: #164a8f;
}
.stepbox.stepbox3.stepbox-triangle:after{
    border-left: 20px solid #164a8f;
}
.stepbox.stepbox4{
    background-color: #003884;
}
.stepbox.stepbox4.stepbox-triangle:after{
    border-left: 20px solid #003884;
}
.stepbox.stepbox5{
    background-color: #002c67;
}
.stepbox-knitting.stepbox1{
    background-color: #2e5c9a;
}
.stepbox-knitting.stepbox-triangle:after{
    content: " ";
    position: absolute;
    right: -19px;
    top: 168px;
    border-top: 18px solid transparent;
    border-right: none;
    border-left: 20px solid #2e5c9a;
    border-bottom: 18px solid transparent;
}
.stepbox-knitting.stepbox2{
    background-color: #164a8f;
}
.stepbox-knitting.stepbox2.stepbox-triangle:after{
    border-left: 20px solid #164a8f;
}
.stepbox-knitting.stepbox3{
    background-color: #164a8f;
}
.stepbox-knitting.stepbox3.stepbox-triangle:after{
    border-left: 20px solid #164a8f;
}
.stepbox-knitting.stepbox4{
    background-color: #003884;
}
.stepbox-knitting.stepbox4.stepbox-triangle:after{
    border-left: 20px solid #003884;
}
.stepbox-knitting.stepbox5{
    background-color: #002c67;
}
.step-img{
    width: 100%;
}
.step-ttl{
    text-align: center;
}
.step-ttl5{
    display: block;
    font-weight: bold;
    width: 83%;
    margin: auto;
    margin-top: -15px;
    text-align: center;
}
.step-ttl p{
    color: #f1f8fb;
}
.step-ttl5 h3{
    font-size: 14px;
    height: 10px;
    color: #f1f8fb;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    margin-top: 0px;
}
.step-ttl5 h2{
    margin: auto;
    color: #f1f8fb;
    margin-bottom: 14px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.step-ttl5 p {
    font-size: 16px;
    margin-bottom: 14px;
    margin-top: 14px;
    color: #f1f8fb;
}
.step-ttl h3,.step-ttl2 h3{
    margin: 13px 5px;
    color: #f1f8fb;
}
.step-content{
    margin: auto;
}
.step-content p{
    color: #f1f8fb;
    font-family: 'Hiragino Kaku Gothic ProN';
    text-align: justify;
}
.step-btn .ui-button{
    background-color: #ff8765;
    border-radius: 50px;
    width: 65%;
    height: 9%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

body .ui-rating .ui-rating-star-on a{
    color: #fdc833;
}
.layout-main {
    padding: 148px 0 0;
    margin: 0;
}
.centered-text{
    text-align: center;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 0; /* height of sticky header */
}
body {
    background-color: white;
    overflow-x: hidden;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-size: 14px;
}
body a:hover {
    color: #51d1e6;
    transition: 500ms ease 0s;
}
body .ui-inputfield {
    width: 48.8%;
    font-size: 16px;
}
body .ui-widget, body .ui-widget .ui-widget {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-size: 16px;
    color: #222222;
}
body .ui-widget .ui-button, body .ui-widget .ui-widget .ui-button {
    color: #ffffff;
}
body .ui-widget .ui-steps-number, body .ui-widget .ui-widget .ui-steps-number {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body .ui-widget .ui-steps-title, body .ui-widget .ui-widget .ui-steps-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
}
.bg-blue{
    background-color: #283A84;
    margin: 1.5em 0;
    display: flex;
}
.left-banner{
    padding-left: 1em;
}
.bg-blue h1 {
    color: #ffffff;
    text-align: center;
    padding: 0 1em;
    font-size: 23px;
}
.blue-text{
    display: grid;
    align-content: center;
    justify-content: center;
}
.bg-blue img.logo-white{
    margin: auto;
    display: flex;
    padding-bottom: 1em;
}
.banner-handmade{
    display: flex;
    flex-wrap: wrap;
}
.ui-panelgrid .ui-grid-responsive .ui-panelgrid-cell.handicraft{
    padding: 1em
}
.list-category-top .ui-panelgrid .ui-panelgrid-cell{
    padding: 0;
}
.ui-datagrid-content-empty {
    padding: 4px 0;
}
.datagrid-empty {
    margin: auto;
}
.max-2560{
    max-width: 2560px;
}
.padding05-left-right{
    padding: 0 0.7em;
}
.small-note{
    font-size: 13px;
    line-height: 10px;
    word-break: keep-all;
}
.flex-column{
    display: flex;
    flex-flow: column;
}
.flex-one{
    flex: 1;
    min-height: 265px;
    max-height: 265px;
    object-fit: cover;
}
.flex-wrap{
    display: flex;
    flex-flow: wrap;
}
.padding-list-pr{
    padding: 0 1.5em !important;
}
.news-list-margintop{
    margin-top: 1em !important;
}
.news-tag-margintop{
    margin-top: .2em !important;
}
.dashboard-certified-menu{
    margin-bottom: 3em;
}
.courseList-certif-menu{
    margin-bottom: 2em;
    margin-top: 1em;
}
.form-certif-menu{
    margin-bottom: 0em;
    margin-top: 1em;
}
.textbook-certif-menu{
    margin-bottom: 0em;
    margin-top: 0em;
}
.notice-certif-menu{
    margin-bottom: 0em;
    margin-top: 1em;
}
.pass-change-certif-menu{
    margin-bottom: 0em;
    margin-top: 1em;
}
.pay-history-certif-menu{
    margin-bottom: 0em;
    margin-top: .5em;
}
.withdrawal-certif-menu{
    margin-bottom: 0em;
    margin-top: 1em;
}
.button-bluelight.center-btn-bluelight .ui-button-text{
    padding: 3px 25px 4px 6px !important;
    text-align: center;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.button-bluelight.center-btn-bluelight .ui-button-text:after{
    right: 39px !important;
}
.mail-address-text{
    color: #222222;
    font-size: 16px;
}
.margin-ttl-mypage{
    margin: 1.5em auto !important;
}
.display-news-sm{
    display: none;
}
.display-news-pc{
    display: block;
}
.item-pay-process{
    font-weight: bold;
    margin: auto;
    line-height: 1;
    margin-top: .5em;
}
.item-pay-success{
    font-weight: bold;
    margin: auto;
    line-height: 1;
    margin-top: .5em;
}
.item-pay-fail{
    color:red;
    margin: auto;
    line-height: 1;
    margin-top: .5em;
}
.padd-top-menu-member{
    padding-top: 0em;
}
.padd-top-menu-member .ui-menu.ui-menubar.member-menu .ui-menu-list{
    display: flex;
    justify-content: space-between;
}
.text-fill-field .ui-inputfield{
    background: #f2f5f8 !important;
    border: 1px solid #f2f5f8;
    border-radius: 0;
    max-width: 340px;
}
.news-navigation-wrap {
    display: flex;
    margin: 3em auto 5em;
    justify-content: center;
}
.nav-number .number p {
    border-bottom: 3px solid #a2a2a2;
    padding: 0 10px 7px;
    font-size: 16px;
    color: #a2a2a2;
    margin: 0;
}
.nav-number a.article-next .arrow {
    left: 0;
    margin-left: .5em;
}
.nav-number .number {
    margin: 0 .5em;
}
.nav-number .number.active p {
    color: #222222;
    border-bottom: 3px solid #0f3587;
}
.dashed-line-100{
    border-bottom: 1px dashed #c4c4c4;
}
.font-12{
    font-size: 12px !important;
}
.font-13{
    font-size: 13px !important;
}
.font14{
    font-size: 14px;
}

.padding-top2i{
    padding-top: 2em !important;
}
.margin-top0{
    margin-top: 0 !important;
}
.padding-top0{
    padding-top: 0 !important;
}
.padding-btm0{
    padding-bottom: 0 !important;
}
.display-flex{
    display: flex;
}
.ui-cartNext{
    width: 100%;
}
.ui-growl-message {
    padding: 0 0 0px 0;
    width: 295px;
    float: right;
    line-height: 2.3em;
}
.ui-growl {
    position: fixed;
    top: 120px !important;
    left: 0;
    right: 0;
    margin: auto;
    width: 390px;
}
.ui-growl-title {
    font-weight: bold;
    padding: 0 0 3px 0;
    display: block;
}
.ui-steps ul {
    margin: auto;
}
.w100{
    width: 100%;
}
.w80{
    width: 80%;
}
.w45{
    width: 45%;
}
.max-width-1440 {
    max-width: 1440px;
}
/* MY PAGE */
.user-information{
    background: #f2f2f2;
    margin-top: 2.5em;
}
.editor-photo{
    width: 95px;
    margin-right: 2em;
    height: 95px;
    align-self: center;
    border-radius: 50%;
}
.margin-2em-auto{
    margin: 2em auto;
}
.unable-button{
    background-color: #8a9bc4 !important;
}
.post-review-btn{
    word-break: keep-all;
    padding: 0px 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: auto;
}
.bg-gray-f5{
    background: #f5f5f5;
}
.user-information-wrap{
    margin: 2.5em auto;
}
.table-mypage{
    margin-top: 2em;
}
.edit-text-btn{
    color: #0f3587;
    text-align: left;
    text-decoration: underline;
}
.edit-text-btn a{
    text-decoration: underline;
}
.review-list-star .fa {
    font-size: 1.7vw;
    color: #e3e3e3;
}
.eval-star{
    margin-bottom: .5em;
}
.ttl-item-workshop{
    text-align: center;
    /*margin-left: 1.5em;*/
    width: 100%;
}
.review-list-star .fa.point {
    color: #facc2e;
}
.edit-text-btn-tbl{
    color: #0f3587;
    text-align: center;
    margin-top: 5px;
}
.editor-info-member{
    margin-top: 5px;
    font-weight: bold;
    word-break: keep-all;
}
.editor-info{
    margin-bottom: 5px;
    font-size: 16px;
}
.text-align-name{
    text-align: left;
}
.date-time-index{
    display: flex;
    align-items: center;
}
.news-for-member{
    padding-right: 2em;
    padding-top: 1.5em;
}
.news-for-member2{
    padding-top: 1.5em;
    padding-left: 2em;
}
.member-name{
    max-width: 25%;
    width: 25%;
}
.membership-info{
    max-width: 25%;
    width: 25%;
}
.box-user-inform{
    padding: 1.5em 1em;
    background: white;
    margin: .25em;
    text-align: center;
    flex: 1;
}
.title-table-course{
    background: #163789;
    color: white;
    word-break: keep-all;
}
.title-row-course{
    min-width: 120px;
}
.course-detail-btn{
    word-break: keep-all;
    padding: 0px 36px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: auto;
}
.text-title-row-course{
    color: white;
    padding: .5em 1.5em;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
}
.course-workshop{
    display: flex;
    align-items: center;
}
.content-table-course td{
    padding: 17px 10px;
    word-break: keep-all;
}
.table-course-myPage{
    border-collapse: collapse;
    width: -webkit-fill-available;
}
.img-course-workshop-wrap{
    color: white;
    border: 1px solid transparent;
    width: 30%;
    height: 0;
    padding-bottom: 19.5%;
    position: relative;
}
.img-course-workshop{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.ui-datatable thead th {
    text-align: center;
    font-weight: normal;
}
th.history-table-width {
    width: 35%;
}
body .reg-form .ui-state-highlight {
    width: fit-content;
    color: #ffffff!important;
}
/* END MY PAGE CSS */
/* GUIDE PAGE */
.bg-color-title{
    background-color: #003884;
    padding: 2em;
}
.bg-color-content{
    background-color: white;
}
.background-top-left{
    background: url(../../resources/jhia/images/top-left-bg.jpg)!important;
    background-position: right!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    height: 200px;
}
.background-top-right{
    background: url(../../resources/jhia/images/top-right-bg.jpg)!important;
    background-position: right!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    height: 200px;
}
.bg-purple-trans {
    background-color: rgba(148, 136, 151, 0.8);
    min-height: 200px;
}
.bg-green-trans {
    background-color: rgba(142, 154, 132, 0.8);
    min-height: 200px;
}
.index-login-button {
    padding: 10px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    background-color: #724444;
}
.course-text {
    text-align: left;
    font-size: 1.5em;
    padding-left: 1em;
}
.white-text {
    color: #fff !important;
}
.schooling-ttl {
    font-family: TBChibiRGothicPlusK Pro;
    font-weight: 700;
    display: inline;
    font-size: 18px;
}
.background-menu {
    background: url(../../resources/jhia/images/bg-menu_1.jpg) !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    height: auto;
}
.row-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 2em;
    margin-bottom: 7em;
}
.row-wrapper-list {
    margin-top: 2em;
    margin-bottom: 7em;
}
.table-map {
    display: flex;
    align-items: flex-start;
    gap: 20px
}
.japan-img {
    width: 100%;
    display: none;
}
.city-col-wraper {
    margin-top: 0em;
    margin-right: 1em;
}
.grey-box-pref {
    background-color: #eee;
    padding: 0.3em 0.3em;
    color: #2d3435;
    float: left;
    border-radius: 5px;
    font-size: 15px;
    display: block;
    margin-bottom: 1em;
    margin-right: 1em;
    text-align: center;
    width: 75px;
}
.trans-box {
    padding: 0.3em 0.3em;
    float: left;
    border-radius: 5px;
    font-size: 15px;
    display: block;
    margin-bottom: 1em;
    margin-right: 1em;
    text-align: center;
    width: 68px;
    color: #fff;
}
.background-top-panel {
    top: -112px;
    z-index: -1;
    background: url(../../resources/jhia/images/bg-topanel.jpg) !important;
    min-height: 450px;
    background-position: left !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    margin: auto; 
    float: none; 
    display: flex; 
    align-items: center
}
.background-top-panel2 {
    top: -112px;
    z-index: -1;
    background: url(../../resources/jhia/images/bg-topanel2.jpg) !important;
    min-height: 450px;
    background-position: left !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.city-brown {
    background-color: #805656;
    padding: 0.6em 2em;
    color: white;
    margin-right: 1em;
    border-radius: 5px;
    font-size: 18px;
    display: inline;
}
.datatext-table-title {
    background-color: #eeeeee !important;
    color: #2d3435 !important;
}
.detail-box-left {
    position: relative;
    top: 5px;
    display: inline;
    font-weight: bold;
    vertical-align: middle;
}
.table-th-text {
    text-align: left;
    font-weight: bold;
    display: inline;
}
.detail-box {
    background-color: #fff;
    padding: 0.3em 1em;
    color: #2d3435;
    float: right;
    border-radius: 5px;
    font-size: 15px;
    display: inline;
}
.detail-box a {
    color: #6eceb7;
    text-decoration: none;
}

.datatext-table {
    border-right: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}
.datatext-table .ui-lg-3 {
    color: #ff940a;
    font-weight: 700;
    font-size: 10pt;
}
.datatext-table .ui-lg-3, .datatext-table .ui-lg-9 {
    padding: 0px 7px;
}
.course-guide .qna-icon{
    width: 10% !important;
    margin-right: 2em !important;
    margin-top: 0;
}
.margin-top-guide-top-text-faq{
    margin-top: 15px;
}
.margin-btm-guide-top-text-faq{
    margin-bottom: 15px;
}
.margin-btm-faq-guide{
    margin-bottom: 8em !important;
}
.img-icon-guides{
    width: 45px;
}
.img-icon-guides-note{
    width: 40px;
}
.point-text-guide{
    align-items: baseline;
}
.point-arrow{
    content: url('../../resources/jhia/images/blue-arrow.png');
    width: 8px;
    height: auto;
    padding: 0;
    margin-right: 1em;
}
.text-content-guide-part{
    margin: .5em;
}
.toga-img{
    width: 55px !important;
}
.display-flex-guide{
    display: flex;
}
.guide-index{
    margin-top: 1em;
}
.guide-top-background{
    border-radius: 5px;
    border: 1px solid #f5f5f5;
    background-color: #f5f5f5;
    padding: .5em!important;
}
.title-guide-part{
    color: #ffffff;
    font-weight: 500;
    font-size: 22px;
    text-align: left;
}
.continue-faq{
    align-self: center;
}
.title-guide-part-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-guide{
    display: flex;
    align-items: center;
    padding: 2em;
}
.faq-guide-wrap{
    display: flex;
    justify-content: space-between;
    border: 1px solid;
    border-left: 8px solid #003884;
    padding: 2em 2em 2em 12em;
}
.img-qna{
    width: 70px;
}
.list-qual-grid{
    display: grid;
    grid-template-columns: repeat(2, auto);
}
.margin-li-qual-member{
    margin: .5em 0;
}
.list-qual-member li p{
    margin: 0;
    text-decoration: underline;
}
.list-qual-member{
    list-style: none;
    padding-inline-start: 0;
    margin: .5em 2.2em;

}
.margin-right-half{
    margin-right: .5em;
}
.list-qual-member a{
    color: #222222;
}
.title-member-dashboard{
    margin-bottom: 5px;
    font-weight: normal;
}
.qual-member{
    margin-top: 2em;
    margin-bottom: 0;
}
.news-member{
    border-bottom: 1px dashed #cdcdcd;
    width: 97%;
}
.news-member a{
    color: #222222;
}
.news-member-side{
    display: flex;
    align-items: center;
    padding-bottom: 0;
    padding-left: 0;
}
.news-member-side p {
    font-size: 13px;
    color: #787878;
    line-height: 1.6;
}
.label-news-member-embroidery{
    background-color: #f4618e;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-knit{
    background-color: #aa7b53;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-lace{
    background-color: #66bfd9;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-quilt{
    background-color: #b06dc8;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-paint{
    background-color: #2ecaa0;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-handwoven{
    background-color: #81b32d;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-leather{
    background-color: #ffb401;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-calligraphy{
    background-color: #c9a966;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-sewing{
    background-color: #1190c6;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-other{
    background-color: #ed8e60;
    color: #ffffff!important;
    min-width: 86px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.label-news-member-volume {
    background-color: #0f3587;
    color: #ffffff!important;
    width: 40px;
    height: 40px;
    padding: 4px 5px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    left: 0;
    top: -10px;
    position: absolute;
}
.series-list-img {
    position: relative
}
.wrap-series-date {
    display: block;
    align-items: center;
}
.wrap-series-date .news-date {
    margin: 0 0 7px;
}
.label-news-member-volume span {
    font-size: 18px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif!important;
}
.series-list-side p.label-series {
    line-height: 1.2;
}
.series-list-side {
    padding: 0;
    margin: 1em 0 0.8em;
    display: flex;
    align-items: center;
}
.series-list-side h4.ttl {
    margin-top: 0;
    margin-left: 1.2em;
    font-weight: normal;
}
.title-qual-member{
    font-weight: bold;
    background: #eceff4;
    padding: 1.5em 2em;
    margin-top: 0;
}
.qualified-member-content{
    border: 1px solid #cdcdcd;
    padding: 0 0 2em 0;
    flex: 1;
}
.sameheight-column .bg-color-content ul{
    padding-inline-start: 2em !important;
}
.bg-color-content.height-box-white2 ul{
    padding-inline-start: 2em !important;
}
.bg-color-content.height-box-white1 ul{
    padding-inline-start: 2em !important;
}
.sameheight-column{
    display: flex;
    flex-flow: column;
}
.height-box-white1{
    flex: 1;
}
.height-box-white2{
    flex: 1;
}
.img-icon-faq{
    margin-right: 2em;
}
.any-question-text{
    font-size: 22px;
    line-height: 30px;
}
.arrow-to-faq{
    content: '';
    border-right: 2px solid #123a89;
    border-top: 2px solid #123a89;
    transform: rotate(45deg);
    height: 30px;
    width: 30px;
}
/* END CSS GUIDE PAGE */

/*container*/
.page-container{
    padding: 0;
}
.section-container{
    /*padding: 100px 0 100px 0;*/
    padding: 50px 0 80px 0;
}

/*primeflex*/
.p-grid {
    margin-left: 0;
    margin-right: 0;
}

/*text setting*/
body .text-small {
    font-size: 13px;
}
h1.page-ttl{
    text-align: center;
    margin: auto;
}
.centered-item{
    float: none;
    margin: auto;
}
.centered{
    text-align: center;
}
.register-btn{
    margin-bottom: 2em;
}
.label-indetail{
    font-weight: 500;
}
h1 > span.course-ttl{
    color: #37abcc;
}
body .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon{
    margin-top: 4px;
}
body .ui-button {
    color: #ffffff;
    background-color: #003884;
    border: 1px solid transparent;
    font-size: 16px;
    -moz-transition: background-color 0.15s, box-shadow 0.15s;
    -o-transition: background-color 0.15s, box-shadow 0.15s;
    -webkit-transition: background-color 0.15s, box-shadow 0.15s;
    transition: background-color 0.15s, box-shadow 0.15s;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    font-weight: 600;
}
.ui-button.topbar-btn-cart{
    background-color: #113883;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    margin: auto;
    margin-right: 1em;
    height: 35px;
}
body .ui-button.ui-state-hover {
    /*background-color: #f3c31d;*/
    background-color: #ec7c5d;
    border-color: transparent;
}
body .ui-button.ui-button-text-icon-right .ui-button-text {
    padding: 6px 28px 6px 12px;
    font-weight: bold;
}
.sameheight-wrap {
    display: flex!important;
    flex-wrap: wrap!important;
}
.guide-bg{
    background-color: #eceff4;
    margin: 1em auto;
    border-radius: 5px;
}
.center-wrap{
    margin: auto!important;
    float: none!important;
}
.name-wrap{
    display: block;
    flex-direction: row;
    place-content: space-between;
}
.year-wrap{
    display: flex;
    flex-direction: row;
}
.year-wrap span{
    padding: 0.5em;
}
.zip-wrap{
    display: flex;
    flex-direction: row;
}
.zip-wrap span{
    align-self: center;
}

.zip1{
    width: 55px !important;
    margin-right: 11.5px;
}
.zip2{
    width: 70px !important;
    margin-left: 11.5px;
}
.border-bottom-grey{
    border-bottom: #f2f2f2 2px solid;
}
.menu-wrap{
    margin-bottom: 2em;
}
h1.membername-title{
    color: #37abcc;
}
.card .score span{
    font-size: 28px;
}
.blue-text{
    color: #37abcc;
}
.red-txt{
    color: red;
}
.green-txt{
    color: #45994a;
}
.width-auto{
    width: auto;
}
.icon-green{
    color: #33d9b2;
    font-size: 25px;
}
.icon-red{
    color: #ff5252;
    font-size: 25px;
}
.required-label:after{
    content:"*";
    color: red;
}
.color-red{
    color: #ff5252;
}
.color-green{
    color: #33d9b2;
}
.color-orange{
    color: #ff9f43;
}

.no-padding{
    padding: 0px;
}
.no-padtb{
    padding: 0 0.5em;
}
.no-padlr{
    padding: 0.5em 0;
}
.no-pad-left{
    padding-left: 0 !important;
}
.no-pad-right{
    padding-right: 0 !important;
}
.no-margin{
    margin: 0px;
}
.no-marginp p{
    margin: 0;
}
.margin-bottom1{
    margin-bottom: 1em;
}
.margin-bottom{
    margin-bottom: 2em;
}
.margin-bottom2-sm1{
    margin-bottom: 2em;
}
.no-margin-bottom{
    margin-bottom: 0;
}
.no-margin-bottompc{
    margin-bottom: 0;
}
.no-margin-toppc{
    margin-top: 0;
}
.margin-top1{
    margin-top: 1em;
}
.margin-top2{
    margin-top: 2em;
}
.margin-top3{
    margin-top: 3em;
}
.margin-top4{
    margin-top: 0;
}
.margin-top3-nosm{
    margin-top: 3em;
}
.margin-top2-nosm{
    margin-top: 2em;
}
.margin-top1-nosm{
    margin-top: 1em;
}
.margin-bottom3{
    margin-bottom: 3em;
}
.margin-bottom9{
    margin-bottom: 9em;
}
.margin-tb-nosm{
    margin: 1em auto;
}
.margin-tb-5{
    margin: .5em 0;
}
.margin-tb{
    margin: 1em 0;
}
.margin-tba2{
    margin: 2em auto;
}
.margin-tba3{
    margin: 3em auto;
}
.centered-text{
    text-align: center;
}
.left-text{
    text-align: left;
}
.right-text{
    text-align: right;
}
.float-right {
    float: right!important;
}
.bold-text{
    font-weight: bold;
}
.lightblue-bg {
    background-color: #e5f1f8;
}

/*button*/
body .ui-button.ui-button-text-only .ui-button-text {
    font-size: 16px;
}
body .article-more .ui-button.ui-button-text-only .ui-button-text, body .news-more .ui-button.ui-button-text-only .ui-button-text {
    font-size: 16px;
    padding: 6px 34px 6px 0;
}
.ui-button.button-third{
    background-color: #003884;
    border-radius: 50px;
    border: 1px solid white;
    padding: 0px 2em;
    font-weight: 600;
}
.ui-button.button-second{
    background-color: #003884;
    border-radius: 50px;
    color: white;
    font-weight: 600;
    /*padding: 4px 2.5em;*/
    padding: 4px 10px;
    word-break: keep-all;
}
.gmo-return-btn{
    border-radius: 100px;
    width: 275px;
}
.user-name{
    font-weight: 600;
    font-size: 1.1em;
}

button.back-btn{
    margin-bottom: 5px;
    padding: 0.4em;
    float:right;
    font-size: 16px;
}

.popup-panel-overlay{
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 99999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.popup-panel{
    position: relative;
    margin: 15% 25%;
    background-color: transparent;
    border-radius: 5px;
}
.video-margin-a{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.ui-button.btn-close-circle{
    border-radius: 50%;
    zoom: 1.5;
}
.btn-video-close{
    display: block;
    position: absolute;
    right: -2%;
    top: -6%;
}

.myImg {
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {
    opacity: 0.7;
}

.single-wrap {
    display: block;
}

/*-------------------------------buttom to top*/
#myButton {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 99;
    border: none;
    outline: none;
    background-color:#0d2b89;
    color: white;
    cursor: pointer;
    padding: 9px 13px;
    border-radius: 10px;
}

#myButton i {
    color: #fff;
    margin: 0;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#myButton:hover {
    background-color: #555;
}
.button-language{
    width: 100%;
    font-size: 0.9em;
    text-align: left;
    background-color: #fff;
    border:none;
    padding: 0.5em;
}
.button-language:hover{
    background-color: #f1f2f7;
}

/*general css*/
p{
    letter-spacing: normal;
    font-size: 16px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    color: #222222;
    line-height: 1.6em;
    /*margin: 0em auto;*/
}
h1, h2, h3, h4, h5{
    /*font-family: 'ToppanBunkyuMincho Regular';*/
    letter-spacing: normal;
    color: #222222;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    line-height: 1.6em;
}
h2{
    font-size: 21px;
}
.red-text{
    color: red;
}
.sec-mrg{
    margin: 3em auto;
}
.sec-ttl{
    width: 100%;
    padding-top: 3em;
    padding-bottom: 1em;
}
.dash-line{
    border-bottom: #cdcdcd dashed thin;
}
.dot-line{
    border-bottom: #9d9da0 dotted thin;
}
.blue-line{
    border-bottom: 1px solid #003884;
    margin-bottom: 1em;
}
.gray-line {
    border-bottom: 2px solid #c8c8c8;
    width: 40px;
}
.gray-line2 {
    border-bottom: 1px solid #cdcdcd;
}
.layout-content{
    margin: 0;
    padding: 0;
}
.center-txt{
    text-align: center;
}
.btn-arrow.ui-button {
    position: relative;
}
.btn-arrow.ui-button::after, .btn-arrow.topbar-btn-cart::after {
    width: 10px;
    height: 10px;
    box-shadow: -2px 2px 0 rgb(255, 255, 255);
    transform: rotate(225deg);
    position: absolute;
    content: "";
    right: 9%;
}
.hr-line {
    border-bottom: 1px dashed #c1c1c1;
}
.hr-line-menu{
    border-bottom: 1px solid #c1c1c1;
    width: 320px;
}
.max-1260 {
    max-width: 1260px;
}
.max-1260-center {
    max-width: 1260px;
    margin: auto;
    float: none;
}

.top-cover{
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    margin-top: 46px;
    background-color: #cccccc;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}
.em-logo{
    position: relative;
    left: 40%;
    width: 20%;
    margin: 4em auto 2em;
}
.whitebox{
    background: rgba(255,255,255,0.8);
    border-radius: 10px;
    width: 75%;
    margin: 0 auto 3em;
}
.whitebox p{
    letter-spacing: normal;
    /*font-size: 16px;*/
    text-align: justify;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    color: #4e4d4e;
    line-height: 2em;
    padding-bottom: 3em;
}
.icon-stitch{
    position: relative;
    float: none;
    width: 30%;
    margin: -15px auto 10px;
    text-align: center;
    left: 34%;
}
.icon-kugen {
    position: relative;
    float: none;
    width: 25%;
    margin: -15px auto 10px;
    text-align: center;
    left: 36.5%;
}
.icon-shiro {
    position: relative;
    float: none;
    width: 25%;
    margin: -15px auto 10px;
    text-align: center;
    left: 36%;
}
.icon-crochet {
    position: relative;
    float: none;
    width: 15%;
    margin: -15px auto 10px;
    text-align: center;
    left: 42.5%;
}
.icon-course {
    position: relative;
    float: none;
    width: 40%;
    margin: 10px auto;
    left: 30%;
}
.margin-top-visa{
    margin-top: 0;
    margin-left: 21px;
}
.step-sec{
    background-color: #e5ebf2;
    padding: 4em 0 5em;
}
.step-bttm-mgr{
    margin-bottom: -2em;
}
.course-txt{
    margin: 1em auto;
    float: left;
    text-align: left;
    padding: 0.5em 2em;
}
.sticker{
    width: 7%;
    height: 7%;
    display: flex;
    position: relative;
    left: 73%;
    top: -430px;
    float: none;
}
.step-wrap{
    display: inline-flex;
    margin: 1em auto 2em;
    /*    display: flex!important;
        flex-wrap: wrap!important;*/
    position: relative;
}
.stepbox.stepbox1{
    background-color: #446da5;
}
.stepbox.stepbox-triangle:after{
    content: " ";
    position: absolute;
    right: -19px;
    top: 168px;
    border-top: 18px solid transparent;
    border-right: none;
    border-left: 20px solid #446da5;
    border-bottom: 18px solid transparent;
}
.stepbox.stepbox2{
    background-color: #2e5c9a;
}
.stepbox.stepbox2.stepbox-triangle:after{
    border-left: 20px solid #2e5c9a;
}
.stepbox.stepbox3{
    background-color: #164a8f;
}
.stepbox.stepbox3.stepbox-triangle:after{
    border-left: 20px solid #164a8f;
}
.stepbox.stepbox4{
    background-color: #003884;
}
.stepbox.stepbox4.stepbox-triangle:after{
    border-left: 20px solid #003884;
}
.stepbox.stepbox5{
    background-color: #002c67;
}
.stepbox-knitting.stepbox1{
    background-color: #2e5c9a;
}
.stepbox-knitting.stepbox-triangle:after{
    content: " ";
    position: absolute;
    right: -19px;
    top: 168px;
    border-top: 18px solid transparent;
    border-right: none;
    border-left: 20px solid #2e5c9a;
    border-bottom: 18px solid transparent;
}
.stepbox-knitting.stepbox2{
    background-color: #164a8f;
}
.stepbox-knitting.stepbox2.stepbox-triangle:after{
    border-left: 20px solid #164a8f;
}
.stepbox-knitting.stepbox3{
    background-color: #164a8f;
}
.stepbox-knitting.stepbox3.stepbox-triangle:after{
    border-left: 20px solid #164a8f;
}
.stepbox-knitting.stepbox4{
    background-color: #003884;
}
.stepbox-knitting.stepbox4.stepbox-triangle:after{
    border-left: 20px solid #003884;
}
.stepbox-knitting.stepbox5{
    background-color: #002c67;
}
.step-img{
    width: 100%;
}
.step-ttl{
    text-align: center;
}
.step-ttl5{
    display: block;
    font-weight: bold;
    width: 83%;
    margin: auto;
    margin-top: -15px;
    text-align: center;
}
.step-ttl p{
    color: #f1f8fb;
}
.step-ttl5 h3{
    font-size: 14px;
    height: 10px;
    color: #f1f8fb;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    margin-top: 0px;
}
.step-ttl5 h2{
    margin: auto;
    color: #f1f8fb;
    margin-bottom: 14px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.step-ttl5 p {
    font-size: 16px;
    margin-bottom: 14px;
    margin-top: 14px;
    color: #f1f8fb;
}
.step-ttl h3,.step-ttl2 h3{
    margin: 13px 5px;
    color: #f1f8fb;
}
.step-content{
    margin: auto;
}
.step-content p{
    color: #f1f8fb;
    font-family: 'Hiragino Kaku Gothic ProN';
    text-align: justify;
}
.step-btn .ui-button{
    background-color: #ff8765;
    border-radius: 50px;
    width: 65%;
    height: 9%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.step-btn:hover{
    /*    background-color: #ec7c5d;
        cursor: pointer;*/
}
/*.stepbox2 .step-btn{
    background-color: #ff8765;
    border-radius: 50px;
    width: 65%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10% auto auto;
}
.stepbox2 .step-btn:hover{
    background-color: #ec7c5d;
    cursor: pointer;
}
.stepbox3 .step-btn{
    background-color: #ff8765;
    border-radius: 50px;
    width: 65%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.stepbox3 .step-btn:hover{
    background-color: #ec7c5d;
    cursor: pointer;
}
.stepbox4 .step-btn{
    background-color: #ff8765;
    border-radius: 50px;
    width: 65%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.stepbox4 .step-btn:hover{
    background-color: #ec7c5d;
    cursor: pointer;
}*/
.step-btn p{
    color: #ffffff;
    text-align: center;
    font-weight: bolder;
    margin: auto 44px;
}
.arrow-btn{
    width: 10px!important;
    height: 10px!important;
    box-shadow: -2px 2px 0 rgb(255, 255, 255);
    margin: -1em auto 1em auto;
    transform: rotate(225deg);
    position: relative;
    top: 50%;
    left: -10%;
}
.course-con{
    display: inline-flex;
    padding: 5em 0 2em;
}
.lecture-con{
    display: block;
    padding: 3em 0 0em;
}
.course-desc{
    padding-left: 3em;
}
.course-desc h2 {
    padding-bottom: 0em;
    text-align: justify;
    margin-top: 0;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.course-desc p{
    margin: auto;
    text-align: left;
}
.work-wrap.lecture-wrap{
    padding-top: 2em;
}
.work-wrap{
    display: inline-flex;
    margin: auto;
    padding-top: 5em;
    padding-bottom: 5em;
    padding-left: 0;
    padding-right: 0;
}

.img-circle-product{
    border-radius: 50%;
    width:85%;
}

.h3-ttl-work-item{
    color: #043382;
    text-align: center;
}

.work-wrap-knit {
    display: block;
    margin: auto;
    padding-top: 5em;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
}
.work1{
    margin: 0 auto;
}
.work1-knit{
    margin: 0 0;
}/*
.work2{
    margin: 0 4.5em;
    padding: 0;
    display: block;
}
.work3{
    margin: 0 .5em 0 5em;
    padding: 0;
    display: block;
}*/
.work1b{
    margin: 0 5% 0 .5em;
    padding: 0;
    display: block;
}
.work2b{
    margin: 0 5%;
    padding: 0;
    display: block;
}
.work3b{
    margin: 0 5%;
    padding: 0;
    display: block;
}
.work4b{
    margin: 0 .5em 0 5%;
    padding: 0;
    display: block;
}
.work1 img, .work2 img, .work3 img, .work4 img{
    width: 100%;
    border-radius: 20px;
}
.work1-knit img, .work2-knit img, .work3-knit img, .work4-knit img{
    width: 100%;
    border-radius: 30px;
}
.work1b img, .work2b img, .work3b img, .work4b img{
    width: 120%;
}
.work1 h3, .work2 h3, .work3 h3, .work4 h3{
    text-align: center;
    padding-top: 1em;
    font-weight: 600;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    word-break: break-all;
}
.work1-knit h4, .work2-knit h4, .work3-knit h4, .work4-knit h4{
    text-align: center;
    padding-top: 1em;
    margin-bottom: auto;
    font-weight: normal;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    word-break: break-all;
}
.work1-knit h3, .work2-knit h3, .work3-knit h3, .work4-knit h3{
    text-align: center;
    margin-top: auto;
    font-weight: 600;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    word-break: break-all;
}
.work1b h3, .work2b h3, .work3b h3, .work4b h3{
    text-align: center;
    padding-top: 1em;
    width: 120%;
}
.work1 p, .work2 p, .work3 p, .work4 p{
    text-align: left;
    width: 100%;
}
.work1-knit p, .work2-knit p, .work3-knit p, .work4-knit p{
    text-align: left;
    width: 100%;
}
.work1b p, .work2b p, .work3b p, .work4b p{
    text-align: left;
    width: 120%;
}
/*.work-sticker1{
    width: 7%;
    height: 7%;
    display: flex;
    position: relative;
    left: -80%;
    bottom: 37px;
}
.work-sticker2{
    width: 7%;
    height: 7%;
    display: flex;
    position: relative;
    left: -48%;
    bottom: 37px;
}
.work-sticker3{
    width: 7%;
    height: 7%;
    display: flex;
    position: relative;
    left: -20%;
    bottom: 37px;
}*/
.work-sticker1b{
    width: 5%;
    height: 5%;
    display: flex;
    position: relative;
    left: -87%;
    bottom: 25px;
}
.work-sticker2b{
    width: 5%;
    height: 5%;
    display: flex;
    position: relative;
    left: -64%;
    bottom: 25px;
}
.work-sticker3b{
    width: 5%;
    height: 5%;
    display: flex;
    position: relative;
    left: -42%;
    bottom: 25px;
}
.work-sticker4b{
    width: 5%;
    height: 5%;
    display: flex;
    position: relative;
    left: -19%;
    bottom: 25px;
}
.buy-sec{
    background-color: #e5ebf2;
    position: relative;
}
buy-sec .bg-triangle{
    clip-path: polygon(50% 7%, 45% 0, 55% 0);
    position: absolute;
    background-color: #ffffff;
    right: 50%;
    color: #ffffff;
    display: flex;
    z-index: 1;
}

.pay-con{
    display: inline-flex;
    padding: 5em 0 1em;
}
.buy-con {
    display: flex;
    padding: 5em 0;
}
.buy-img{
    padding: 0 1em 0 .5em;
}
.buy-ttl{
    display: inline-flex;
    text-align: center;
    padding-bottom: 1em
}
.buy-ttl h1{
    font-size: 40px;
    margin: 11px 10px 0;
    color: #003884;
}
.buy-ttl h2{
    font-size: 30px;
}
.buy-desc{
    padding: 0 2em;
    margin: auto;
}
.price-wrap{
    padding: 1em 0.5em;
    display: flex;
    align-items: center;
    /*margin: auto 20%;*/
    justify-content: center;
}

.price-wrap h2 {
    font-size: 25px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-weight: 400;
}
.price-wrap span {
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}
.price2 {
    padding: 1em 0.5em;
    display: flex;
}
.price2 h2{
    margin: auto 7px;
    font-family: 'HiraginoKakuGothic ProN';
}
.price2 h3{
    line-height: 68px;
    margin: 0 10px;
    font-family: 'HiraginoKakuGothic ProN';
}
.buy-desc p, .pay-desc p{
    /*font-size: 16px;*/
    margin: 5px auto;
}
.buy-desc ul{
    padding-inline-start: 20px;
    padding-bottom: 10px;
}
.buy-desc h3 {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-weight: 400;
}
.buy-btn .ui-button {
    background-color: #ff8765;
    border-radius: 50px;
    width: 60%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3em auto auto;
    padding: 0px 8%;
    word-break: keep-all;
}
.buy-btn .ui-button:hover{
    background-color: #ec7c5d;
    cursor: pointer;
}
.buy-btn .ui-button.lock-btn {
    width: 100%;
    max-width: 550px;
}
.buy-btn .ui-button.lock-btn:hover {
    background-color: #ff8765;
    cursor: auto;
}
.ui-button.lock-btn {
    position: relative;
}
.ui-button.lock-btn::before {
    content: "";
    background: url(../../resources/jhia/images/lock-icon.png);
    width: 26px;
    height: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
.buy-btn p {
    color: #ffffff;
    text-align: center;
    font-weight: bolder;
    margin: auto 113px;
}
.arrow-btn-buy {
    width: 10px!important;
    height: 10px!important;
    box-shadow: -2px 2px 0 rgb(255, 255, 255);
    margin: -1em auto 1em auto;
    transform: rotate(225deg);
    position: relative;
    top: 25%;
    left: -8%;
}
.section-ttl{
    display: block;
    text-align: center;
    padding-top: 0;
    margin-bottom: 0.5em;
}
.section-ttl span{
    font-size: 27px;
    margin: 7px 10px 5px;
    color: #003884;
}
.knit-faq{
    padding: 0 0 2em;
}
.sitemap-con .jhia-line-section{
    width: 115px;
    margin: 5px auto 1em!important;
}
.knit-faq .jhia-line-section{
    width: 115px;
    margin: 5px auto 3em!important;
}
.jhia-line-section {
    width: 28%;
    background: #fa7563;
    position: relative;
    height: 1px;
    display: block;
}
.jhia-line-new-section {
    width: 15%;
    background: #fa7563;
    position: relative;
    height: 1px;
    display: block;
}

.jhia-line-new-section:before{
    width: 100%;
    content:'';
    background: #39bddc;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 0;
    display: block;
}
.jhia-line-new-section:after{
    width: 100%;
    content:'';
    background: #ec599f;
    height: 1px;
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
}
.jhia-line-section:before{
    width: 100%;
    content:'';
    background: #39bddc;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 0;
    display: block;
}
.jhia-line-section:after{
    width: 100%;
    content:'';
    background: #ec599f;
    height: 1px;
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
}
.knitting .jhia-line-section {
    width: 22%;
    background: #fa7563;
    position: relative;
    height: 1px;
    display: block;
}
.knitting .jhia-line-section:before{
    width: 100%;
    content:'';
    background: #39bddc;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 0;
    display: block;
}
.knitting .jhia-line-section:after{
    width: 100%;
    content:'';
    background: #ec599f;
    height: 1px;
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
}
.jhia-line-section2 {
    width: 26%;
    background: #fa7563;
    position: relative;
    height: 1px;
    display: block;
}
.jhia-line-section2:before{
    width: 100%;
    content:'';
    background: #39bddc;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 0;
    display: block;
}
.jhia-line-section2:after{
    width: 100%;
    content:'';
    background: #ec599f;
    height: 1px;
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
}
.pay-sec{
    background-color: #ffffff;
}
.pay-img{
    padding: 5em 4em 5em 10em;
}
.pay-desc{
    padding: 0 .5em;
}
.pay-desc ul {
    padding-inline-start: 20px;
}
.sitemap-sec{
    background-color: #e8e8e8;
}
.sitemap-con{
    /*display: inline-flex;*/
    padding: 4em 0 1em;
}
.sitemap-list{
    padding: 0;
    border-bottom: #b8b8b8 dotted thin;
    width: calc(100% - 6em);
    margin: auto 3em;
}
.sitemap-list p{
    font-size: 16px;
    padding: 10px 0 3px 0;
    font-weight: bold;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
}
.fa-plus.plus-color{
    color: #003884;
    font-size: 16px;
    float: right;
    line-height: 25px;
}
/*
.discount {
    position: relative;
    height: 50px; 
    width: 50px;  
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: none;
}
.discount::before, .discount::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 3px;
    background-color: black;
}
.discount::before {
    transform: rotate(45deg);
}
.discount::after {
    transform: rotate(-45deg);
} */

/*shiroitoshishu*/
.shiro-section .jhia-line-section {
    width: 30%;
    background: #fa7563;
    position: relative;
    height: 1px;
    display: block;
}
.shiro-section .jhia-line-section:before{
    width: 100%;
    content:'';
    background: #39bddc;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 0;
    display: block;
}
.jhia-line-section:after{
    width: 100%;
    content:'';
    background: #ec599f;
    height: 1px;
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
}
.work-img-border{
    border-radius: 10%;
}

/*topbar*/
#topbar-menu-dt, #topbar-menu-kugen, #topbar-menu-shiro, #topbar-menu-crochet, #topbar-menu-knit, #topbar-menu-coop, #topbar-menu-po{
    display: none;
}
.layout-topbar {
    background-color: #ffffff;
    position: absolute;
    top: 0;
    z-index: 998;
    width: 100%;
    -moz-transition: width 0.15s;
    -o-transition: width 0.15s;
    -webkit-transition: width 0.15s;
    transition: width 0.15s;
    -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
}
.layout-topbar .layout-topbar-wrapper .layout-topbar-left .sidebar-menu-button, .layout-topbar .layout-topbar-wrapper .layout-topbar-left .megamenu-mobile-button, .layout-topbar .layout-topbar-wrapper .layout-topbar-left .topbar-menu-mobile-button, .layout-topbar .layout-topbar-wrapper .layout-topbar-left .layout-topbar-logo{
    display: inline-block;
}
.layout-topbar .layout-topbar-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 75px;
    padding: 0;
}
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    margin: auto;
    margin-right: 0;
    height: 35px;
}
.login-btn:hover {
    background-color: #ec7c5d;
    cursor: pointer;
}
.login-btn .ui-button {
    color: #ffffff;
    border: 1px solid transparent;
    font-size: 14px;
    text-align: center;
    font-weight: bolder;
    -moz-transition: background-color 0.15s, box-shadow 0.15s;
    -o-transition: background-color 0.15s, box-shadow 0.15s;
    -webkit-transition: background-color 0.15s, box-shadow 0.15s;
    transition: background-color 0.15s, box-shadow 0.15s;
}
.login-btn .ui-button.button-text-only.ui-button-text::after {
    width: 12px;
    height: 12px;
    box-shadow: -2px 2px 0 rgb(255, 255, 255);
    transform: rotate(225deg);
    position: absolute;
    content: "";
    right: 14px;
}
.login-btn p {
    color: #ffffff;
    text-align: center;
    font-weight: bolder;
    margin: auto 49px;
}
.jhia-centerline{
    width: 100%;
    background: #dbdcdd;
    position: relative;
    height: 1px;
    display: block;
}
.jhia-line{
    width: 100%;
    background: #fa7563;
    position: relative;
    height: 1px;
    display: block;
}
.jhia-line:before{
    width: 100%;
    content:'';
    background: #39bddc;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 0;
    display: block;
}
.jhia-line:after{
    width: 100%;
    content:'';
    background: #ec599f;
    height: 1px;
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
}
.layout-topbar-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /*justify-content: center;*/
    list-style-type: none;
    margin: 5px auto;
    height: 100%;
    width: 85%;
}
ul .topbar-item:first-of-type {
    margin-left: 0;
}
ul .topbar-item:last-of-type {
    margin-right: 0;
}
.topbar-item{
    list-style: none;
    display: inline-flex;
    margin: auto 1.2em;
}
.topbar-item a{
    color: #635e5e;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    word-break: keep-all;
}
.topbar-item a:hover{
    color: #003884;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-weight: bold;
}
.layout-topbar-wrap {
    width: 83.3333%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    float: none;
}
.layout-topbar-wrap a img {
    max-width: 230px;
    height: auto;
}
.mobile-menu-list {
    height: 0px;
    -webkit-transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    -ms-transition: height 0.5s linear;
    -o-transition: height 0.5s linear;
    transition: height 0.5s linear;
}
.mobile-menu-list.show {
    display: block;
    height: auto;
    -webkit-transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    -ms-transition: height 0.5s linear;
    -o-transition: height 0.5s linear;
    transition: height 0.5s linear;
}
.topbar-mobile {
    display: none;
}
.icon-faq::after {
    content: "";
    background: url("../../resources/jhia/images/topbar-icon1.png");
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 5px;
}
.icon-cart::before {
    content: "";
    background: url(../../resources/jhia/images/topbar-cart.png);
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-flex;
    margin: 0px 5px 0px -10px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-cart-pc::before {
    content: "";
    background: url(../../resources/jhia/images/topbar-cart.png);
    width: 23px;
    height: 23px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-flex;
    margin: 5px 4px 0px 4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-login-pc::before {
    content: "";
    background: url(../../resources/jhia/images/topbar-login.png);
    width: 23px;
    height: 23px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-flex;
    margin: 5px 4px 0px 4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-about-pc::before{
    content: "";
    background: url(../../resources/jhia/images/topbar-about2-white.png);
    width: 23px;
    height: 23px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-flex;
    margin: 5px 4px 0px 4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*
.icon-cart:hover {
    opacity: 0.5;
}
*/
.icon-cart-link{
    position: relative;
    margin:auto;
}
.cart-num{
    position: absolute;
    top: -9px;
    right: 133px;
    background: #f18563;
    padding: 3px;
    border-radius: 100px;
    min-width: 23px;
    text-align: center;
    color: white;
}
.fa.icon-mail {
    width: 20px;
    height: 20px;
}
.icon-mail::after {
    content: "";
    background: url("../../resources/jhia/images/topbar-icon2.png");
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    /*margin-left: 5px;*/
}
.ui-button.ui-button-text-icon-left .ui-icon.icon-faq {
    margin-top: -9px;
}
.ui-button.topbar-btn {
    width: 35px;
    height: 35px;
    background-color: #003884;
    margin-right: 1em;
}
.topbar-btn-menu {
    display: flex;
    margin: auto;
    margin-right: 0
}
.topbar-item.vr-line {
    border-left: 1px solid #c1c1c1;
    height: 20px;
}
.topbar-btn .fa-envelope-o {
    font-size: 18px;
    overflow: visible;
    margin-left: -1px;
    margin-top: -9px!important;
    margin-left: -1.6px;
}
.object-fit-50 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}
.object-fit-50 img {
    position: absolute;
    width: 100%;
    height: 100%!important;
    object-fit: cover;
}

/*member*/
.content{
    width: 100%;
}
.center-wrap-member{
    margin: auto!important;
    margin-top: 0em!important;
}
.img-valign {
    vertical-align: middle;
    margin-bottom: 0.2em;
}
.content-wrapper{
    margin-top: 3em;
}
.top-main-title h1{
    color:#554f4f;
    text-align: center;
    margin-top: 1em;
    font-weight: 600;
    font-family: 'Toppan Bunkyu Mincho'
}
.top-main-title p{
    float:right;
}
.public-wrapper{
    margin-bottom: 3em;
}
.centered-wrapper{
    float: none!important;
    margin: auto!important;
}
.make-inline{
    display: -webkit-inline-box;
}
.logo-andttl{
    zoom:0.90;
}
.h1-ttl{
    font-weight: 500;
    line-height: 1.5em;
    text-align: justify;
}
.h1-ttl-underline{
    font-weight: 500;
    line-height: 1.5em;
    text-align: justify;
    border-bottom: #fff 2px solid;

}
.h2-title-blue{
    border-bottom: #f2f2f2 2px solid;
    color: #3853a8;
    font-weight: bold;
    line-height: 2em;
}
.h2-title-black{
    border-bottom: #f2f2f2 2px solid;
    color: #000;
    font-weight: bold;
    line-height: 2em;
    text-align: justify;
}
.h2-title-black-no-underline{
    color: #000;
    font-weight: bold;
    line-height: 1em;
    text-align: justify;
}
.h2-title-white-no-underline{
    color: #fff;
    font-weight: bold;
    line-height: 1em;
    text-align: justify;
}
.h3-title-underline{
    border-bottom: #f2f2f2 2px solid;
    color: #554f4f;
    font-weight: bold;
    line-height: 2em;
    text-align: center;
    font-family: 'Hiragino Kaku Gothic Pro';
}
.h3-title-no-underline{
    color: #554f4f;
    font-weight: bold;
    line-height: 2em;
    text-align: center;
    font-family: 'Hiragino Kaku Gothic Pro';
}
.pass-setting span{
    border: solid #003884 thin;
    color: #003884
}
.table-learn-situation table{
    border: none;
    width: 100%;
    text-align: center;
}
.table-learn-situation tr:first-child {
    background: #163689;
    color: #6b6b6b;
}
.table-learn-situation td:first-child {
    background: #dbe0ed;
    color: black;
}
.table-learn-situation thead th {
    background-color: #163689!important;
    color: #ffffff!important;
}
.no-marginTop{
    margin-top: 0!important;
}
.ui-menu.ui-menubar.member-menu{
    background-color: #ffffff;
    border: #e5ebf2 solid medium;
    border-radius: 0;
    /*margin-bottom: 2em;*/
}
body .ui-menu.ui-menubar > .ui-menu-list > .ui-menuitem > .ui-menuitem-link {
    color: #554f4f;
    padding: 15px 7px;
}
.member-subtitle h2{
    font-weight: 600;
    text-align: center;
    font-family: 'Hiragino Kaku Gothic Pro'
}
.withdrawal-text{
    text-align: center;
}
.button-withdrawal .ui-button-icon-left{
    left: 3.5em;
}
.learning-wrapper{
    margin-bottom: 3em;
}
img.learning-ttl {
    width: 40px;
    display: inline-block;
    position: relative;
    top: 15px;
    margin-right: 3px;
}
.ttl-w-img {
    display: table;
    margin: 2em auto 0.5em;
}
.ttl-w-img h2 {
    color: #003884;
    margin-bottom: 5px;
}
.section-ttl-learning h2 {
    margin: auto;
    margin-bottom: 0;
}
.btn-wrap{
    display: inline-flex;
    align-items: center;
    margin: 1em auto 1em;
}
.button-bluedark{
    width: 100%;
    border-radius: 2px;
    font-size: 14px!important;
    height: 50px;
    padding: 0 14px;
    background-color: #1a3a88!important;
    padding-left: 0.5em!important;
    padding-right: 0.5em!important;
    color: white!important;
    font-weight: bold;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif!important;
}
.button-bluedark:hover {
    background-color: #ff8765!important;
    transition: 500ms ease 0s;
}
.ui-button.button-course-bluedark{
    width: auto;
    border-radius: 50px;
    font-size: 14px;
    padding: 0 14px;
    background-color: #1a3a88!important;
    padding-left: 0.5em!important;
    padding-right: 0.5em!important;
    color: white!important;
    margin-bottom: 0.5em;
}
.register-btn-margin{
    margin:15px 0px 50px 0px;
}
.button-edit{
    margin-top: 15px;
}
.box-top-line{
    border-top: #969696 solid 1px;
    width: 100%;
}
.box-bottom-line{
    border-bottom: #969696 solid 1px;
    width: 100%;
}
.required-blue{
    border: #1a3a88 solid thin;
    color: #1a3a88;
    font-weight: bold;
    padding: 1.5px;
    float: right;
    margin-top: 14.5px;
    margin-right: 12.5px;
    font-size: 14px;
}
.label-box{
    background-color: #f2f5f8;
    height: 50px;
    padding-left: 20px;
    font-size: 16px;
}

.label-form-confirm{
    font-size: 16px;
    color: #6f6f6f;
}
.color-black-confirm{
    font-size: 16px;
    color: #4e4d4e !important;
}
.label-form, .label-form span{
    line-height: 50px;
    font-size: 16px;
    color: #554f4f;
}
.ui-inputfield.textbox{
    background: #f2f5f8;
    border: none;
    border-radius: 0;
    height: 30px;
    font-size: 16px;
}
select.perfecture-box{
    height: 30px;
    font-size: 16px;
}
.pad-left{
    padding-left: 1em;
}
.pad-top10{
    padding-top: 10px;
}
.pad-bttm-last{
    padding-bottom: 5em;
}
.textColorRed{
    color: red;
}
.grey-box{
    background-color: #f7f7f7;
    padding: 1em;
}
.news-list ul{
    padding-inline-start: 20px;
}
.news-list li{
    margin-bottom: 14px;
}
.news-list li a{
    color: #333333;
    line-height: 1.5em;
    font-size: 16px;
}
/*Learning situation*/

.yellow-box-info{
    border-radius: 10px;
    background-color: #fff68d;
    margin-top: 2em!important;
}
.icon-info-wrap{
    margin: auto;
    float: none;
}
.icon-info{
    color: #229bd8;
    font-size: 50px;
    float: none;
}
.text-info{
    text-align: center;
    margin-top: 0;
}
ul.forgotpass-list{
    padding-left: 1.5em;
    line-height: 1.5em;
    font-size: 14px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    color: #4e4d4e;
}

/*footer*/
.layout-footer-wrapper{
    display: inline-flex;
    margin: 0 6em;
}
.layout-footer {
    background-color: #003884;
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    justify-content: space-between;
    align-items: center;
    height: auto;
}
.footer-top1{
    margin: 3em 0;
    margin-right: 5em;
}
.footer-pad-top{
    padding-top: 1em;
}
.footer-top2{
    margin: 3em 6em;
}
.footer-top3{
    margin: 3em 0;
    margin-left: 5em;
}
.footer-top2 p{
    color: #ffffff;
    margin: 5px auto;
}
.footer-top2 h4, .footer-top3 h4, .footer-top3 h3, .footer-top3 h2{
    color: #ffffff;
}
.jhia-footer-logo{
    margin: 1em 0 12px 0;
    max-width: 240px
}
img.hamanaka-logo{
    max-height: 60px;
    width: auto!important;
    display: block;
    margin:auto;
}
.address-txt{
    display: block;
    margin-top: -10px;
}
.phone-txt h1, .phone-txt p{
    display: inline-flex;
    margin: auto 5px;
    color: #fff;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.phone-txt p{
    margin-left: 0;
}
.contact-btn {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 15px;
}
.contact-btn:hover {
    background-color: #ec7c5d;
    cursor: pointer;
}
.contact-btn p {
    color: #ffffff;
    text-align: center;
    font-weight: bolder;
    margin: 10px 49px;
}
.contact-btn .arrow-btn{
    width: 10px!important;
    height: 10px!important;
    box-shadow: -2px 2px 0 rgb(255, 255, 255);
    margin: -1em auto 1em auto;
    transform: rotate(225deg);
    position: relative;
    top: 35%;
    left: -8%;
}
.footer-line{
    /*    position: relative;
        top: 230px;*/
    border-bottom: #809cc2 solid 1px;
    margin: 0em auto;
}
.footer-middle{
    display: block;
    margin: 1em 6px 2em;
}
.footer-middle p{
    color: #ffffff;
    font-weight: bold;
}
.footer-bottom{
    display: inline-flex;
    margin-bottom: 5em;
}
.footer-bttm{
    margin-top: 0em;
}
.padding-top-0{
    padding-top: 0;
}
.footer-bottom p{
    color: #ffffff;
    font-size: 10px;
    /*margin-left: 56%;*/
    text-align: right;
    font-family: 'Hiragino Kaku Gothic ProN';
}
.footer-bottom img{
    width: 5%;
    position: relative;
    bottom: 14px;
    margin: auto 30px;
}
.footer-add-wrap {
    float: right;
    width: 70%;
}
.footer-jhia-new a:hover h1 {
    color: #ff8765;
}
.footer-jhia-new p a:hover {
    color: #ff8765;
}
.footer-jhia-new h3 {
    color: #ffffff;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    margin-bottom: 5px;
    margin-top: 10px;
}
.footer-jhia-new p {
    color: #ffffff;
}
.footer-jhia-new p a {
    color: #ffffff;
}
.footer-add-wrap.num-call {
    text-align: left;
}
.footer-jhia-new {
    background-color: #003884;
}
.footer-jhia-new.p-grid {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    display: flex;
}
img.footer-knit-img {
    width: 48%;
}
.footer-add-wrap.num-call h1{
    font-weight: 400;
}
.footer-add-wrap.num-call h3{
    font-weight: 400;
    margin: 10px auto 0em;
}
.footer-add-wrap p{
    margin: 5px auto;
    line-height: 1em;
}
.footer-jhia-new .footer-btm {
    display: block;
    justify-content: flex-end;
    align-items: baseline;
    margin-bottom: 1em;
    text-align: center;
}
.bottom-link-new h3{
    font-weight: bold;
    color: #ffffff;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    margin-bottom: 15px;
}
.bottom-link-new p{
    color: #ffffff;
    margin-bottom: -10px;
}
.app-badge{
    display: grid;
    padding: 0;
}
.footer-jhia-new .footer-btm-img {
    width: 60px;
    margin-left: 25px;
}
.bottom-link-text{
    list-style-type: none;
    padding: 0;
    word-break: keep-all;
    text-align: left;
    font-size: 16px;
    margin-top: 0;
    display: flex;
    margin-bottom: 0.25em;
}
li.linkText{
    vertical-align: middle;
    display: inline;
}
li.linkText a{
    color: #ffffff;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-size: 13px;
}
li.linkText a:hover {
    color: #ff8765;
}
li.footcommonText{
    display: inline;
    padding: 0 13px;
    color: #ffffff;
}
p.copyright {
    font-size: 13px;
    margin: 10px auto 0;
    text-align: left;
}
body .contact-btn.ui-button {
    color: #063884;
    background-color: #ffffff;
    border: 1px solid transparent;
    font-size: 16px;
    -moz-transition: background-color 0.15s, box-shadow 0.15s;
    -o-transition: background-color 0.15s, box-shadow 0.15s;
    -webkit-transition: background-color 0.15s, box-shadow 0.15s;
    transition: background-color 0.15s, box-shadow 0.15s;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    font-weight: 600;
    width: 210px;
    float: left;
}
.btn-arrow.contact-btn.ui-button::after {
    width: 10px;
    height: 10px;
    box-shadow: -2px 2px 0 rgb(6 56 132);
    transform: rotate(225deg);
    position: absolute;
    content: "";
    right: 9%;
}
body .contact-btn.ui-button.ui-state-hover {
    color: #ffffff;
    background-color: #ec7c5d;
    border-color: transparent;
}
.btn-arrow.contact-btn.ui-button.ui-state-hover::after {
    width: 10px;
    height: 10px;
    box-shadow: -2px 2px 0 #ffffff;
    transform: rotate(225deg);
    position: absolute;
    content: "";
    right: 9%;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.btn-col{
    width: 10em;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform:scale(0)
    }
    to {
        -webkit-transform:scale(1)
    }
}

@keyframes zoom {
    from {
        transform:scale(0)
    }
    to {
        transform:scale(1)
    }
}

/* Begin The Close Button - Image */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
/* End The Close Button - Image*/

.card h1.no-margin{
    margin: 0px 0px;
}

.btn-preCreate{
    margin: 1.5em 0px;
}

/*certificate css*/
.pos-relative{
    position: relative;
}
.certif-text{
    position: absolute;
    color: black;
}
.certif-text.number-certif{
    text-align: right;
    width: fit-content;
    font-size: 16px;
    right: 14%;
    top: 14%;
}
.certif-text.ttl-certif{
    letter-spacing: .4em;
    text-align: center;
    top: 30%;
    font-size: 28px;
}
.certif-text.fullname-certif{
    text-align: center;
    top: 42%;
    font-size: 20px;
}
.certif-text.memberas-certif{
    text-align: center;
    top: 50%;
    font-size: 13px;
}
.certif-text.ttl-course-certif{
    text-align: center;
    top: 54%;
    font-size: 13px;
}
.certif-text.date-certif{
    text-align: center;
    top: 67%;
    font-size: 17px;
}
.certif-text.assoname-certif{
    text-align: center;
    top: 74%;
    font-size: 13px;
}
.certif-text.directorname-certif{
    text-align: center;
    top: 78%;
    font-size: 13px;
}
/*end of certificate css*/

/*.group-step {
    display: absolute;
}*/
.stepbox {
    background-color: #446da5;
    display: block;
    position: relative;
    margin: 0 1.3em;
    width: calc(20% - 2.6em);
}
.stepbox.stepbox-triangle1{
    margin-top: 0;
}
.stepbox.stepbox-triangle1:after{
    content: " ";
    position: absolute;
    right: -19px;
    top: 168px;
    border-top: 18px solid transparent;
    border-right: none;
    border-left: 20px solid #446da5;
    border-bottom: 18px solid transparent;
}
.stepbox-knitting {
    background-color: #446da5;
    display: block;
    position: relative;
    margin: 0 1.3em;
    width: calc(25% - 2.6em);
}
.stepbox-knitting.stepbox-triangle1{
    margin-top: 0;
}
.stepbox-knitting.stepbox-triangle1:after{
    content: " ";
    position: absolute;
    right: -19px;
    top: 168px;
    border-top: 18px solid transparent;
    border-right: none;
    border-left: 20px solid #446da5;
    border-bottom: 18px solid transparent;
}
/*.group-step .stepbox{
    width: 30%;
}*/
.section-ttl h2 {
    margin: 0;
    margin-bottom: 0;
    text-align: left!important;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.6em;
}
.work1-wrap {
    position: relative;
    width: 83%;
    margin: 0 auto
}
.work1-wrap img.work-sticker1 {
    width: 83px;
    height: 83px;
    position: absolute;
    top: -6%;
    right: -6%;
}
.work-sec {
    position: relative;
    padding: 3em 0 2em;
}
.page-triangle {
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    position: absolute;
    width: 40px;
    height: 18px;
    bottom: -8px;
    left: 50%;
    background-color: #ffffff;
    z-index: 2;
    transform: translateX(-50%);
}
.work-wrap-2 {
    width: 100%;
    display: inline-flex;
}
.work-wrap-2-knit {
    width: 100%;
    display: inline-block;
}
.buy-ttl h2 {
    margin: auto;
    margin-bottom: 0;
}
.buy-ttl h2 span {
    font-size: 40px;
    margin: 11px 10px 0;
    color: #003884;
}
.arrow-price {
    border-bottom: 2px solid #ff8765;
    border-right: 2px solid #ff8765;
    width: 20px;
    height: 20px;
    transform: rotate(-45deg);
    position: relative;
    margin: 0 2em;
}
.arrow-price::before {
    content: "";
    border-top: 2px solid #ff8765;
    width: 22px;
    position: absolute;
    transform: rotate(45deg);
    top: 9px;
    right: -3px;
}
.before-off h2{
    position: relative;
}
.x-price {
    position: absolute;
    width: 60px;
    height: 20px;
    border-bottom: 2px solid #ff8765;
    bottom: 11px;
    right: 22px;
    transform: rotate(45deg);
}

.x-price2 {
    position: absolute;
    width: 60px;
    height: 20px;
    border-bottom: 2px solid #ff8765;
    bottom: 11px;
    right: 31px;
    transform: rotate(-45deg);
}
.before-off , .after-off {
    display: flex;
    align-items: baseline;
}
.price-add {
    display: block;
    text-align: center;
    margin: 16px auto -40px;
    padding-top: 0.5em;
}
.work-sec2 .work-wrap-2 {
    width: 94%;
}
.work-sec2 .work1-wrap {
    width: 90%;
}
.sitemap-wrapper.answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    font-size: 14px;
}
.fa-minus.plus-color {
    color: #003884;
    font-size: 16px;
    float: right;
    line-height: 27px;
}
.collapsible .fa-minus {
    display: none;
}
.collapsible.active-collapsible .fa-minus {
    display: inline-block;
}
.collapsible.active-collapsible .fa-plus {
    display: none;
}
.sitemap-wrapper.answer p {
    font-size: 14px;
    margin-top: 0;
    font-weight: normal;
}
.sitemap-wrapper.question:hover {
    cursor: pointer;
}
.sitemap-wrapper.question:hover p {
    color: #003884;
}
.sum-section {
    position: absolute;
    top: -35px;
    width: calc(100% + 1em);
    left: 50%;
    transform: translateX(-50%);
}
.sum-section.just-certif {
    position: absolute;
    top: -35px;
    width: calc(100% * 2 + 3em + 1em);
    left: -.6em;
    transform: none;
}
.sum-section-wrap {
    position: relative;
}
.sum-section .text-sum-line {
    position: absolute;
    top: -13px;
    left: 50%;
    background-color: #e5ebf2;
    transform: translateX(-50%);
    width: max-content;
    width: -moz-max-content;
}
.sum-section .sum-line {
    border-top: 1px solid #000000;
    width: 100%;
    height: 20px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
.sum-section.just-step {
    width: calc(100% * 3 + 5em + 1em);
    left: -.5em;
    transform: unset;
}
.sum-section p {
    margin: auto 1em;
    font-weight: 600;
    font-size: 14px;
}
.sum-section-knitting {
    position: absolute;
    top: -35px;
    width: calc(100% + 1em);
    left: 50%;
    transform: translateX(-50%);
}
.sum-section-knitting.just-certif {
    position: absolute;
    top: -35px;
    width: calc(100% * 2 + 3em + 1em);
    left: -.6em;
    transform: none;
}
.sum-section-wrap {
    position: relative;
}
.sum-section-knitting .text-sum-line {
    position: absolute;
    top: -13px;
    left: 50%;
    background-color: #e5ebf2;
    transform: translateX(-50%);
    width: max-content;
    width: -moz-max-content;
}
.sum-section-knitting .sum-line {
    border-top: 1px solid #000000;
    width: 100%;
    height: 20px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
.sum-section-knitting.just-step {
    width: calc(100% * 2 + 3em + 1em);
    left: -.5em;
    transform: unset;
}
.sum-section-knitting p {
    margin: auto 1em;
    font-weight: 600;
    font-size: 14px;
}
.wrap-step-content {
    padding: .5em;
    padding-bottom: 5em;
}
.desc-text-step {
    padding: .5em;
}
.step-wrap .step-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2em;
    height: unset;
    width: 65%;
}
.step-wrap .step-btn .ui-button {
    background-color: #ff8765;
    border-radius: 50px;
    width: 100%;
    max-width: 150px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: relative;
}
.step-wrap .step-btn .ui-button:hover {
    background-color: #ec7c5d;
    cursor: pointer;
}
.step-wrap .step-btn .ui-button::after {
    width: 10px;
    height: 10px;
    box-shadow: -2px 2px 0 rgb(255, 255, 255);
    transform: rotate(225deg);
    position: absolute;
    content: "";
    right: 14px;
}
.step-wrap .stepbox-triangle:last-of-type::after {
    display: none;
}
.step-ttl p {
    font-size: 16px;
    margin-bottom: 14px;
    margin-top: 14px;
}
.step-ttl p span {
    font-size: 18px;
}
img.sticker-step {
    position: absolute;
    width: 75px;
    height: 75px;
    top: -5%;
    right: -8%;
}

img.stiker-step-certif{
    position: absolute;
    width: 55px;
    height: 55px;
    top: -7%;
    right: -20%;
}

img.sticker-step-knitting {
    position: absolute;
    width: 75px;
    height: 75px;
    top: -5%;
    right: -8%;
}
#mobile-menu.show {
    display: block;
}
body .ui-steps .ui-steps-item.ui-state-disabled .ui-steps-number {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 27px;
    text-align: center;
}
body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number{
    background-color: #013883;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 27px;
    text-align: center;
}
body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 27px;
    text-align: center;
}
ul.numbering-list {
    list-style-type: decimal;
    padding-left: 1em;
    font-size: 16px;
    color: #222;
}
ol.numbering2 {
    list-style-type: decimal;
    padding-left: 1em;
    font-size: 16px;
    color: #222;
}
.ui-button.lock-btn .ui-button-text {
    line-height: 1.5em;
}

/*production coop*/
.section-production {
    padding: 95px 0 30px 0;
}
.production-textrow {
    border-bottom: 1px solid #969696;
}
.production-ttl h2{
    font-family: 'Hiragino Sans';
    font-weight: 300;
    margin: 1em auto;
}
.production-textrow p {
    font-family: 'HiraginoKakuGothic Pro';
}
.production-textrow p {
    margin-bottom: 10px;
    font-family: 'HiraginoKakuGothic Regular';
}
.production-container {
    padding-top: 35px;
    padding-bottom: 3em;
}

/*css for diploma application*/
.diploma-application {
    padding-top: 3em;
}
.dip-application {
    padding-right: 3%;
    border-top: 1px dashed #929598;
    padding-top: 4em;
    padding-left: 3%;
}
.diploma-application p {
    margin: 2em 0;
    text-align: left;
}
.diploma-fee {
    border: 1px solid #797979;
    border-radius: 20px;
}
.diploma-fee-ttl {
    background-color: #003884;
    width: 100%;
    border-top-right-radius: 19px;
    border-top-left-radius: 19px;
    text-align: center;
    padding: 0 2em;
}
.diploma-fee-ttl h4 {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.diploma-fee-dt {
    padding: 1em 0;
    width: 70%;
    margin: auto;
}
.diploma-fee-dt .point p {
    display: inline;
    margin: 0;
}
.diploma-fee-dt .point p span {
    font-size: 17px;
    font-weight: 600;
}
.diploma-fee-dt .point {
    border-bottom: 1px dashed #929598;
    /*text-align: center;*/
    padding: 1.5em 0;
    display: flex;
    align-items: baseline;
}
.diploma-fee-dt .point:last-child {
    border-bottom: none;
}
.diploma-fee-dt .point i {
    font-size: 11px;
    margin-right: 1.5em;
    color: #0e9ec0;
    margin-left: 2em;
}
.diploma-fee-dt .point:nth-child(2) i {
    color: #20948b
}
.diploma-fee-dt .point:nth-child(3) i {
    color: #de7a22
}
.dip-application-txt {
    width: 95%;
}
.dip-application-txt h5 {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-weight: 400;
    text-align: left;
}
.dip-application-txt h3 {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.passDone-txt{
    display: block;
    margin: 0 auto 1em auto;
}
.passDone-btn{
    font-size: 16px;
    margin-left: 0%;
    background-color: #013883!important;
    line-height: 2.3em;
    padding:inherit;
    width: 7em;
}
.sec3-index-wrap .ui-button {
    width: 130px;
    position: relative;
    margin: auto;
    display: block;
}
.detail-stitch img.sec3-sub-ttl {
    width: 65px;
}
.other-courses {
    width: 80%;
    background-color: rgba(255, 255, 255, .502);
    position: absolute;
    margin: auto 10%;
    padding: 1em 0 1.5em;
    margin-top: 5em;
}
.index-courses {
    background-color: rgba(255, 255, 255, .502);
    position: absolute;
    /*right: 33px;*/
    padding: 20px 0 0px;
    margin-top: 2.5em !important;
}
.other-courses h1 {
    font-size: 32px;
    text-align: center;
    margin: 0;
}
.other-courses img {
    width: 130px;
    margin: auto;
    display: block;
}
.other-course .btn-arrow.ui-button::after {
    top: 10px;
}
.colorlink{
    color: blue;
}
.other-course h2.course-ttl {
    margin: 0;
    text-align: center;
    color: #003884;
}
.detail-stitch .sec3-index-wrap {
    margin-top: 14.5em;
    margin-right: 0;
    width: 81%;
    /*display: block;*/
    /*margin: auto;*/
}
.padding-btm-knitt2{
    /* padding-bottom: 5em;*/
}
.item-other-cor {
    padding-right: 2em;
}
.other-course .other-ttl-icon {
    padding: 0 2em 0 0;
    margin-bottom: 2em;
}
.detail-stitch .sec3-bg-r .sec3-index-wrap{
    margin-left: 0;
}
.sec3-bg-r .item-other-cor {
    padding-left: 2em;
    padding-right: 0.5em;
}
.other-course .sec3-bg-r .other-ttl-icon {
    padding: 0 0 0 2em;
}

.top-responsive {
    margin-top: 53px;
}

/*cart button style*/
.btn-seecart-float{
    z-index: 9999;
    position: fixed;
    bottom: 13px;
}
.dot-seecart {
    text-align: center;
    z-index: 999;
    font-size: 13px;
    height: 20px;
    width: 20px;
    left: 2em;
    top: auto;
    margin-left: 0;
    position: absolute;
    margin-top: .2em;
    background-color: #ff9900;
    border-radius: 50%;
    color:white;
}

.btn-seecart .ui-icon {
    top: 42%!important;
}
.btn-seecart .ui-button-text{
    padding: 0.429em 0em 0.429em 2em!important;
}
.btn-see-cart .ui-button{
    border: none;
    color: #fff;
    height: 48px;
    line-height: 48px;
    width: 100%;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px!important;
    outline: 0;
    padding: 0 0px;
    text-align: center;
    text-decoration: none;
    background-color: #013883;
    color: #0d2b89;
    box-shadow: 3px 15px 20px rgba(0, 0, 0, 0.06);
    left: 20px;
}
.btn-see-cart .ui-button:hover{
    background-color: #458db3;
    transition: background-color 0.2s;
    color: white;
}

.ui-icon-productcart{
    border-radius: 0px;
    background-image: url("/javax.faces.resource/jhia/images/topbar-cart.png.html") !important;
    background-size: 90%;
    background-position: 0px 0px;
    height: 2em!important;
    width: 2em!important;
}
.prod-cart .ui-icon-productcart{
    right: 73%!important;
    left: unset!important;
}
.show-ipad-sm{
    display: none;
}
.show-sm{
    display: none!important;
}
.padding-bot-gmopush {
    padding-bottom: 5em;
}
.course-name-text {
    text-align: center;
}

.margin-input-right{
    margin-right: 10px;
}
.lecturer-subtitle{
    text-align: center;
    font-weight: 600;
    font-size: 1.1em;
    width: 90%;
    float: none;
    margin: auto;
}
img.lecture-step{
    margin: auto;
    display: block;
    width: 73px!important;
}
.proposal-txt{
    color: #292828;
}
p.schedule-txt{
    color: #4e4d4e;
    margin-top: 1em!important;
    word-break: keep-all;
    font-weight: normal;
}
.separator-buy{
    border: 0.5px dashed #013884;
    margin: 1em 0 2.5em;
    float: left;
    width: 100%;
}
.buy-complete .ui-panelgrid .ui-panelgrid-cell{
    padding:3px!important;
}
.buy-complete .ui-grid-responsive .ui-grid-row{
    display: flex;
}
.buy-complete .ui-grid-responsive .ui-grid-row .ui-panelgrid-cell{
    padding:4px!important;
}
.buy-complete .ui-grid-responsive .ui-grid-row .ui-panelgrid-cell:first-child{
    width: 132px;
}
.buy-complete .ui-grid-responsive .ui-grid-row .ui-panelgrid-cell:nth-child(2){
    width: 67%;
    word-break: break-word;
}

/*new design*/
html {
    --scroll-behavior: smooth;
}
.index-courses-new {
    background-color: #ffffff;
    position: absolute;
    /* right: 33px; */
    padding: 20px 0 20px;
    margin-top: 3em !important;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.layout-topbar-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* justify-content: center; */
    list-style-type: none;
    margin: 5px 1em;
    height: 100%;
    width: 100%;
}
.topbar-item-top {
    list-style: none;
    display: inline-flex;
    margin: auto 1.2em;
}
.topbar-item-top a {
    color: #635e5e;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-size: 14px;
    word-break: keep-all;
    text-align: center;
    line-height: 1.3em;
}
.topbar-item-top a:hover {
    color: #003884;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-weight: bold;
}
.topbar-item-top.vr-line {
    border-left: 1px solid #c1c1c1;
    height: 20px;
}
.layout-topbar-top-wrap {
    width: 83.3333%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    float: none;
    height: 60px;
}

.show-1140 {
    display: none;
}
.show-pc {
    display: flex!important;
}
.page-ttl h1 {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-weight: normal;
    font-size: 28px;
    margin: 1em auto 7px;
}
.page-ttl p {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #787878;
}
.workshop-title h1 {
    font-family: "Kozuka Mincho Pr6N", serif;
    font-size: 20px;
    width: 100%;
    margin-top: 18px;
    line-height: 1.6em;
    float: left;
    margin-bottom: 7px;
}
.workshop-title .members-only {
    margin: 1em 0 -.7em;
    color: #4c566a;
    float: left;
    width: 100%;
}
.slider-list-category .slick-slide{
    opacity: 1;
}
.slick-slide {
    display: none;
    float: left;
    /* height: 100%; */
    min-height: 1px;
    opacity: 0.5;
}
.slick-slide.slick-current {
    display: none;
    float: left;
    /* height: 100%; */
    min-height: 1px;
    opacity: 1;
}
.slide-top-left {
    padding-top: 0em;
    padding-right: 0em;
    padding-left: 3em;
    width: 58%;
}
.slide-top-right {
    padding-right: 0.2em;
    padding-left: 3em;
    /*max-height: 370px;*/
    width: 42%;
    /*min-width: 510px;*/
    align-self: baseline;
}
.slide-top-right img.top-img-course {
    /*    max-width: 640px;
        min-width: 640px;
        max-height: 510px;
        min-height: 510px;*/
    object-fit: cover;
}
.workshop-top-wrap {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: .8em;
}
.workshop-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.workshop-top p.course {
    color: #ffffff;
    padding: 4px 15px;
    font-size: 13px;
    font-weight: bold;
    margin-top: 0;
    margin-right: 1em;
    width: fit-content;
    text-align: center;
    word-break: keep-all;
    margin-bottom: 5px;
}
.multi .workshop-top p.course {
    background-color: #ecf0f1;
}
.sewing .workshop-top p.course {
    background-color: #1190c6;
}
.quilt .workshop-top p.course {
    background-color: #b06dc8;
}
.embroidery .workshop-top p.course {
    background-color: #f4618e;
}
.knit .workshop-top p.course {
    background-color: #aa7b53;
}
.lace .workshop-top p.course {
    background-color: #66bfd9;
}
.paint .workshop-top p.course {
    background-color: #2ecaa0;
}
.handwoven .workshop-top p.course {
    background-color: #81b32d;
}
.leather .workshop-top p.course {
    background-color: #ffb401;
}
.calligraphy .workshop-top p.course {
    background-color: #c9a966;
}
.pressed .workshop-top p.course {
    background-color: #ed8e60;
}
.other .workshop-top p.course {
    background-color: #adadad;
}
.workshop-news p.course {
    background-color: #c08ad3;
    color: #ffffff;
    padding: 2px 15px;
    font-size: 13px;
    font-weight: bold;
    margin-right: 1.5em;
    margin-top: 1em;
    line-height: 1.8;
}
.workshop-news.multi p.course {
    background-color: #ecf0f1;
}
.workshop-news.sewing p.course {
    background-color: #1190c6;
}
.workshop-news.quilt p.course {
    background-color: #b06dc8;
}
.workshop-news.embroidery p.course {
    background-color: #f4618e;
}
.workshop-news.knit p.course {
    background-color: #aa7b53;
}
.workshop-news.lace p.course {
    background-color: #66bfd9;
}
.workshop-news.paint p.course {
    background-color: #2ecaa0;
}
.workshop-news.handwoven p.course {
    background-color: #81b32d;
}
.workshop-news.leather p.course {
    background-color: #ffb401;
}
.workshop-news.calligraphy p.course {
    background-color: #c9a966;
}
.workshop-news.pressed p.course {
    background-color: #ed8e60;
}
.workshop-news.other p.course {
    background-color: #ed8e60;
}
.workshop-top p.level {
    padding: 3px 10px;
    padding-left: 0;
    font-size: 14px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 5px;
    margin-right: 15px;
    border-right: 1px solid #a2a2a2;
    word-break: keep-all;
}
.workshop-top p.type {
    padding: 3px 10px 3px 0;
    font-size: 14px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 5px;
    margin-right: 15px;
    border-right: 1px solid #a2a2a2;
    word-break: keep-all;
}
.workshop-top p.available {
    padding: 3px 10px 3px 0;
    font-size: 14px;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 5px;
    margin-right: 0;
    display: inline-flex;
    line-height: 20px!important;
}
.workshop-top p.available span img {
    width: 20px;
    height: auto;
    margin-right: 0.5em;
}
.workshop-top p.available span img.times {
    width: 74%;
    height: auto;
    margin-right: -5px;
}
.tags {
    display: flex;
    flex-wrap: wrap;
}
.tags a {
    border: 1px solid #969696;
    padding: 2px 10px 0;
    margin: 0 10px 1em 0;
    min-width: 55px;
    text-align: center;
    background-color: #ffffff;
    cursor: pointer;
}
/*.tags a:hover {
    border: 1px solid #ffffff;
    background-color: #2f9fea;
}*/
.tags a p {
    font-size: 13px!important;
    font-weight: bold;
    margin: auto;
    word-break: keep-all;
}
/*.tags a:hover p {
    color: #ffffff;
}*/
.tags a:first-of-type {
    margin-left: 0;
}
.tags a:last-of-type {
    margin-right: 0;
}
.courses {
    display: flex;
}
.date-time .date, .date-time .time {
    display: flex;
    margin-right: 2em;
    align-items: center;
}
.icon-course img {
    margin-top: 5px;
}
.date-time .date p {
    display: inline;
    margin-bottom: 0;
    margin-top: 0em;
    margin-left: 0.5em;
    font-size: 14px;
}
.date-time .time p {
    display: inline;
    margin-bottom: 0;
    margin-top: 0em;
    margin-left: 0.5em;
    font-size: 14px;
}
.icon-date img {
    width: 20px;
    margin-top: -2px;
    margin-right: 3px;
}
.icon-time-center{
    align-self: center;
}
.icon-time img {
    width: 20px;
    margin-top: 1px;
}
.content .list-course {
    margin-top: 0;
}
.courses .block {
    padding-left: 0.7em;
    padding-right: 0.7em;
    position: relative;
    z-index: 1;
    margin-top: 3em;
}
.courses .block:first-of-type {
    padding-left: 0;
    padding-right: 1.5em;
}
.courses .block:nth-child(3n + 4) {
    padding-left: 0;
    padding-right: 1.5em;
}
.courses .block:nth-child(3n) {
    padding-left: 1.5em;
    padding-right: 0;
}
.courses .block:before {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 0;
    height: 15px;
    width: 92%;
    border-bottom: 1px solid #cdcdcd;
}
.courses .block:first-of-type:before {
    content: "";
    position: absolute;
    left: 6px;
    bottom: 0;
    height: 15px;
    width: 91%;
    border-bottom: 1px solid #cdcdcd;
}
.courses .block:nth-child(3n + 4):before {
    content: "";
    position: absolute;
    left: 6px;
    bottom: 0;
    height: 15px;
    width: 91%;
    border-bottom: 1px solid #cdcdcd;
}
.courses .block:nth-child(3n):before {
    content: "";
    position: absolute;
    left: 28px;
    bottom: 0;
    height: 15px;
    width: 91%;
    border-bottom: 1px solid #cdcdcd;
}
.course-button .ui-button {
    width: 120px;
    height: 35px;
    margin: auto;
}
.accepted-btn {
    margin-bottom: 1em;
}
.ui-button.button-bluelight {
    font-size: 14px!important;
    padding: 0 14px;
    background-color: #2f9fea!important;
    color: white;
    font-weight: bold!important;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    margin-top: 5px;
}
.ui-button.button-bluelight:hover {
    background-color: #1878b9!important;
    transition: 500ms ease 0s;
}
.course-button .ui-button .ui-button-text::after {
    width: 9px;
    height: 9px;
    box-shadow: -2px 2px 0 rgb(255 255 255);
    transform: rotate(225deg)translateY(64%);
    position: absolute;
    content: "";
    right: 33px;
    top: 47%;
}
.tag-float {
    position: absolute;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: bold;
    top: 0;
    left: 0;
    z-index: 1;
}
.tag-float p {
    color: #ffffff;
    margin: auto;
    font-weight: bold;
    font-size: 13px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    line-height: 1.6;
}
.tag-float.quilt {
    background-color: #b06dc8;
}
.tag-float.embroidery{
    background-color: #f4618e;
}
.tag-float.multi{
    /*background-color: #ecf0f1;*/
    display: flex;
    flex-wrap: wrap;
}
.tag-float.sewing{
    background-color: #1190c6;
}
.tag-float.knit{
    background-color: #aa7b53;
}
.tag-float.lace{
    background-color: #66bfd9;
}
.tag-float.paint{
    background-color: #2ecaa0;
}
.tag-float.handwoven{
    background-color: #81b32d;
}
.tag-float.leather{
    background-color: #ffb401;
}
.tag-float.calligraphy{
    background-color: #c9a966;
}
.tag-float.pressed{
    background-color: #ed8e60;
}
.tag-float.other{
    background-color: #ed8e60;
}
.hide {
    display: none!important;
}
.course-more {
    margin-bottom: 3.5em;
    padding-left: 0;
    padding-right: 0;
}
.news-course {
    background-color: #e5f1f8;
    padding: 3.5em 0;
}
.news-course-wrap {
    display: flex;
}
.news-left {
    padding-right: 2em;
    padding-top: 0.5em;
    padding-left: 0;
}
.news-right {
    padding-left: 2em;
    padding-top: 0.5em;
    margin-top: 0em!important;
    padding-right: 0;
}
.wrap-news-date {
    display: flex;
    align-items: center;
}
.wrap-news-date.detail {
    display: flex;
    align-items: center;
    margin-top: 0;
}
p.news-date {
    color: #787878;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    line-height: normal;
    margin-top: 1em;
    font-size: 14px;
    text-align: left;
}
.wrap-news-date.detail p.news-date {
    color: #787878;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    line-height: normal;
    margin-top: 0;
}
a:hover p.news-ttl {
    color: #51d1e6;
    transition: 500ms ease 0s;
}
p.news-ttl {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-weight: bold;
    color: #222222;
    margin-bottom: 1em;
    font-size: 16px;
    line-height: 1.6;
}
p.news-ttl.list {
    font-weight: normal;
    margin-bottom: 1.5em;
    font-size: 16px;
    line-height: 1.6;
}
.course-news-list {
    border-bottom: 1px dashed #cdcdcd;
    margin-bottom: 1em;
}
.news-more .ui-button {
    width: 180px;
    height: 45px;
    position: relative;
    margin: 33px auto auto;
    display: block;
    /* box-shadow: 2px 2px 3px rgb(0 0 0 / 36%); */
}
.news-more.handmate-more .ui-button {
    width: 180px;
    height: 45px;
    position: relative;
    margin: 33px 0 auto;
    display: block;
    /* box-shadow: 2px 2px 3px rgb(0 0 0 / 36%); */
}
.news-section .news-more .button-topSpace{
    margin: 10px auto auto;
}
.news-more .ui-button .ui-button-text::after {
    width: 9px;
    height: 9px;
    box-shadow: -2px 2px 0 rgb(255 255 255);
    transform: rotate(225deg)translateY(64%);
    position: absolute;
    content: "";
    right: 40px;
    top: 20px;
}
.course-content h3 {
    margin-bottom: 0.2em;
    line-height: 1.6;
    font-size: 16px;
}
.course-content p {
    margin-top: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
}
.misc-course {
    padding: 4em 0;
}
.misc-course .misc-wrap {
    display: flex;
}
.course-faq h2, .course-guide.gallery-link-event h2{
    max-width: 75%;
}
.course-guide.gallery-link-event{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
}
.gallery-link-event .event-link-image{
    position: relative;
    width: 40%;
    height: 0;
    padding-bottom: 27.2%;
}
.gallery-link-event .event-link-image img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    margin: 0;
}
.course-guide-wrap.gallery-link-event-wrap .gallery-link-event{
    margin-top: 8em;
}
.course-faq-wrap {
    padding-right: 2em;
    padding-top: 0;
    padding-bottom: 0;
    padding-left:  0;
    cursor: pointer;
}
.course-guide-wrap {
    padding: 0;
    cursor: pointer;
}
.course-faq, .course-guide {
    border: 1px solid #d2d2d2;
    border-left: 6px solid #0f3587;
    display: flex;
    padding: 2em 2em;
    align-items: center;
    justify-content: center;
    margin-top: 4em;
    margin-bottom: 5em;
    position: relative;
}
.course-guide {
    /*margin-top: 0.5em;*/
    margin-top: 1.5em;
    margin-bottom: 4em;
}
.course-faq:hover, .course-guide:hover {
    transition: 300ms ease-in-out 0s;
}
.course-faq img {
    width: 8%;
    margin-right: 1.5em;
}
.course-guide img {
    width: 6.5%;
    margin-right: 2em;
    margin-top: 5px;
}
.course-faq h2, .course-guide h2 {
    font-weight: normal;
    margin-bottom: 0;
    font-size: 25px;
}
.course-faq:hover h2, .course-guide:hover h2 {
    font-weight: bold;
    color: #0f3587;
    transition: 300ms ease-in-out 0s;
}
.course-faq p, .course-guide p {
    margin-top: 0;
}
.course-faq:hover p, .course-guide:hover p {
    font-weight: bold;
    color: #0f3587;
    transition: 300ms ease-in-out 0s;
}
.feature-news img {
    float: left;
    margin: 5px 15px 0 0;
    width: 36%;
}
.feature-news p {
    text-align: left;
    margin: auto;
    line-height: 1.6;
}
.banner-mid-image {
    position: absolute;
    width: 27%;
    top: 6%;
    right: 36%;
}
.course-faq .arrow {
    width: 20px;
    height: 20px;
    box-shadow: -2px 2px 0 rgb(27 58 136);
    transform: rotate(225deg)translateY(64%);
    position: relative;
    content: "";
    right: -110px;
    top: 10px;
}
.course-guide .arrow {
    width: 25px;
    height: 25px;
    box-shadow: -2px 2px 0 #969696;
    transform: rotate(225deg)translateX(50%);
    position: absolute;
    content: "";
    right: 40px;
    top: 50%;
}
.course-guide:hover .arrow {
    right: 100px;
    transition: 500ms ease 0s;
}
.course-index-pad {
    padding: 0.5em;
}
.courses .block:nth-child(1), .courses .block:nth-child(2), .courses .block:nth-child(3) {
    margin-top: 1em;
}

/*===== access page =====*/
.mar-bottom{
    margin-bottom: 3em;
}
.mar-bottom2{
    margin-bottom: 2em;
}
.access{
    padding-left: 2.5em;
    padding-right: 3.5em;
}
.margin-top-access{
    margin-top: 1.5em;
}
.access-table, th, td {
    border: 1px solid #e5e5e5;
    /*    padding: 1em 4em; */
    text-align: center;
    letter-spacing: normal;
    font-size: 16px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    color: #222222;
}
.access-table{
    border-collapse: collapse;
    width: 100%;
}
.access-table td{
    width: 50%;
    padding: 2.5em 0;
}
.phone-div-access{
    display: flex;
    flex-direction: column;
}
.phone-div-access p{
    margin: .4em 0 .8em;
    font-size: 14px;
}
.phone-div-access .phone-number{
    display: flex;
    align-items: center;
    margin: auto;
}
.phone-div-access .phone-number a{
    text-decoration: underline;
    font-size: 22px;
    font-weight: bold;
    margin-block: 0;
    color: #222222;
}
.phone-div-access .icon-phone{
    width: 20px;
    margin-right: 1em;
}
.email-access .icon-email{
    width: 24px;
    margin-right: 1em;
}
.email-access{
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
}
.email-access a{
    text-decoration: underline;
    color: #222222;
    font-size: 14px;
}
.access-loc{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.access-loc .icon-loc{
    width: 20px;
    object-fit: contain;
    margin-right: 1.5em;
    margin-top: .8em;
}
.access-address{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.access-address p{
    text-align: left;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}
.access-address .icon-map{
    width: 24px;
}
.map-access{
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}
.map-access iframe{
    width: 100%;
    height: 30vw;
    border: 0;
}
.access-transport{
    padding-left: 2.5em;
    padding-right: 3.5em;
    margin-bottom: 3em !important;
}
.access-transport .metro-train{
    display: flex;
    padding-bottom: 1.5em;
}
.access-transport .keio-bus{
    display: flex;
    align-items: flex-start;
    padding-top: 1em;
    border-top: 1px dashed #c8c8c8;
    width: fit-content;
}
.access-transport .keio-bus p{
    margin-top: 0;
    font-size: 16px;
    margin-right: 1em;
    margin-bottom: 0;
}
.access-transport .metro-train p{
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 0;
}
.icon-metro{
    width: 27px;
    margin-right: 1.65em;
    object-fit: contain;
}
.icon-keio{
    width: 40px;
    margin-right: .8em;
    object-fit: contain;
    margin-top: 1.2em;
}
.sm-table-access{
    display: none;
}

/*pagination css*/
body .ui-datagrid .ui-paginator {
    padding: 2em 0 1em;
}
body .ui-paginator .ui-paginator-pages .ui-paginator-page {
    padding: 5px;
    margin: auto 0.5em;
    border: none;
    border-bottom: 2px solid #a2a2a2;
    background-color: transparent;
    color: #a2a2a2;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    min-width: 30px;
    min-height: 30px;
}
body .ui-paginator .ui-paginator-pages .ui-paginator-page:last-child {
    border-bottom: 2px solid #a2a2a2;
    border-right: none;
}
body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background-color: #ffffff;
    color: #0f3587;
    border-color: #0f3587;
    border-bottom: 2px solid #0f3587;
}
body .ui-paginator .ui-paginator-next:before {
    content: " ";
}
body .ui-paginator .ui-paginator-next {
    width: 13px;
    height: 13px;
    box-shadow: -2px 2px 0 #a2a2a2;
    transform: rotate(225deg)translateY(64%);
    position: relative;
    content: "";
    left: 0;
    top: 50%;
    background: none;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0px !important;
    text-align: center;
    background-color: #ffffff;
    border-right: none;
}
body .ui-paginator .ui-paginator-first, body .ui-paginator .ui-paginator-prev, body .ui-paginator .ui-paginator-next, body .ui-paginator .ui-paginator-last {
    color: transparent;
    min-width: 13px;
    min-height: 13px;
    border: none;
    margin: 0;
    vertical-align: bottom;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-left: 0 none;
    border-right: 0 none;
}
body .ui-paginator .ui-paginator-first.ui-state-disabled, body .ui-paginator .ui-paginator-prev.ui-state-disabled, body .ui-paginator .ui-paginator-next.ui-state-disabled, body .ui-paginator .ui-paginator-last.ui-state-disabled {
    opacity: 0;
    filter: alpha(opacity=100);
    background-color: transparent;
}
body .ui-paginator .ui-paginator-prev {
    background: none;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0px !important;
    text-align: center;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    background-color: #ffffff;
    border-right: none;
    width: 13px;
    height: 13px;
    box-shadow: -2px 2px 0 #a2a2a2;
    transform: rotate(405deg)translateY(-64%);
    position: relative;
    content: "";
    right: 15px;
    top: 50%;
}
body .ui-paginator .ui-paginator-prev:before {
    content: " ";
}

.ui-button.button-category {
    font-size: 14px!important;
    padding: 0 14px;
    color: white;
    font-weight: bold!important;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    margin-top: 5px;
}
.ui-button.button-category:hover {
    transition: 500ms ease 0s;
}
.ui-button.button {
    font-size: 14px!important;
    padding: 0 14px;
    color: white;
    font-weight: bold!important;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    margin-top: 5px;
}
.ui-button.button.multi, .multi .ui-button.button-category {
    background-color: #ecf0f1!important;
}
.ui-button.button.sewing, .sewing .ui-button.button-category {
    background-color: #1190c6!important;
}
.ui-button.button.quilt, .quilt .ui-button.button-category {
    background-color: #b06dc8!important;
}
.ui-button.button.embroidery, .embroidery .ui-button.button-category {
    background-color: #f4618e!important;
}
.ui-button.button.knit, .knit .ui-button.button-category {
    background-color: #aa7b53!important;
}
.ui-button.button.lace, .lace .ui-button.button-category {
    background-color: #66bfd9!important;
}
.ui-button.button.paint, .paint .ui-button.button-category {
    background-color: #2ecaa0!important;
}
.ui-button.button.handwoven, .handwoven .ui-button.button-category {
    background-color: #81b32d!important;
}
.ui-button.button.leather, .leather .ui-button.button-category {
    background-color: #ffb401!important;
}
.ui-button.button.calligraphy, .calligraphy .ui-button.button-category {
    background-color: #c9a966!important;
}
.ui-button.button.other, .other .ui-button.button-category {
    background-color: #adadad!important;
}
.ui-button.button:hover {
    transition: 500ms ease 0s;
}
.ui-button.button.multi:hover, .multi .ui-button.button-category:hover {
    background-color: #066791!important;
}
.ui-button.button.sewing:hover, .sewing .ui-button.button-category:hover {
    background-color: #066790!important;
}
.ui-button.button.quilt:hover, .quilt .ui-button.button-category:hover {
    background-color: #9b4fb7!important;
}
.ui-button.button.embroidery:hover, .embroidery .ui-button.button-category:hover {
    background-color: #da4e78!important;
}
.ui-button.button.knit:hover, .knit .ui-button.button-category:hover {
    background-color: #885b36!important;
}
.ui-button.button.lace:hover, .lace .ui-button.button-category:hover {
    background-color: #4094ad!important;
}
.ui-button.button.paint:hover, .paint .ui-button.button-category:hover {
    background-color: #11926f!important;
}
.ui-button.button.handwoven:hover, .handwoven .ui-button.button-category:hover {
    background-color: #5b8417!important;
}
.ui-button.button.leather:hover, .leather .ui-button.button-category:hover {
    background-color: #dc9b00!important;
}
.ui-button.button.calligraphy:hover, .calligraphy .ui-button.button-category:hover {
    background-color: #9a7d40!important;
}
.ui-button.button.other:hover, .other .ui-button.button-category:hover {
    background-color: #848484!important;
}
.scroll-overflow {
    overflow: scroll;
}
.scroll-overflow::-webkit-scrollbar {
    display: none;
}

.ui-inputfield.middle-input {
    width: 48%;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}

.lb-data .lb-close {
    /*    position: absolute;
        top: -14%;
        right: 33.5%;*/
}
.lb-prev, .lb-next {
    display: none!important;
}
.lightbox {
    display: flex;
    flex-flow: column-reverse;
}

/*image wrapper*/
.image-fit-75{
    padding-bottom: 75%;
    position: relative;
    height: 0;
    width: 100%;
}
.image-fit-75 img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
}
.image-fit {
    padding-bottom: 65%;
    position: relative;
    height: 0;
    width: 100%;
}
.image-fit img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
}
.listing-tag .courses .block {
    padding: 0 1.5em;
    margin-top: 1.5em;
    width: 100%;
}
.listing-tag .course-content {
    padding: .5em 0;
}
.listing-tag .image-fit {
    margin-bottom: .5em;
}
.wrap-btn-seemore {
    padding: .5em 0;
}
.listing-tag .courses .block:first-of-type:before {
    width: calc(100% - 3em);
    left: 1.5em;
}
.listing-tag .ui-datagrid-column {
    display: flex;
}
.listing-tag .courses {
    width: calc(100% + 3em);
    margin-left: -1.5em;
}
.list-course .courses .block:before {
    width: calc(100% - 1.4em);
    left: .7em;
}
.list-course .courses .block:first-of-type:before {
    width: calc(100% - 1.5em);
    left: 0;
}
.list-course .courses .block:nth-child(3n):before {
    width: calc(100% - 1.5em);
    left: 1.5em;
}
.list-course .courses .block:nth-child(3n + 1):before {
    width: calc(100% - 1.5em);
    left: 0;
}

/*=============== TermsOfUse CSS ================*/
.tou-container {
    margin-top: 35px;
    padding: 0;
}
.tou-container p {
    margin: 0;
}
/*=============== END TermsOfUse CSS ================*/

.news-member-side p.label-news {
    line-height: 1.8;
}
.news-member-side p.date {
    font-size: 14px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.wrap-tag-float {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
}
.wrap-tag-float .tag-float {
    position: relative;
}
.wrap-event-cat {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
}
.wrap-event-cat p.course {
    margin-bottom: 0;
}

/*.margin-left-min {
    margin-left: 40px;
    margin-right: 105px;
    width: 90% !important;
}*/

/*search result*/
.search-list {
    padding: 0 0 2em;
}

/*no data*/
p.no-data{
    text-align: center;
}

body .ui-messages .ui-messages-fatal .ui-messages-fatal-icon {
    margin-top: -1px;
}
body .ui-button.ui-button-text-only.text-center .ui-button-text {
    padding: 6px 12px;
}
.pc-show{
    display: block;
}
.sm-show{
    display: none;
}
.banner-start-handmade{
    justify-content: flex-start;
    margin: 0px auto 4em;
}
.banner-start-handmade .title-handmade {
    color: #000000;
    position: absolute;
    z-index: 1;
    margin-top: 8em;
    left: 50%;
    width: 40%;
}
.banner-start-handmade .block {
    width: 100%;
    overflow: hidden;
    background: rgb(255, 255, 255);
}
.banner-start-handmade .block .image-slide {
    width: auto;
    font-size: 0px;
}
.banner-start-handmade .image-slide div.image-fit {
    display: inline-block;
    float: none;
    position: relative;
    width: 100%;
    height: 0px;
    padding: 0px 0px 475px;
}
.img-slide-fit {
    left: 50% !important;
    margin-left: 0;
    margin-right: 0;
    max-width: 81.5% !important;
    min-width: 81% !important;
    transform: translateX(-50.8%);
}
.banner-start-handmade .image-slide .image-fit img {
    position: absolute;
    width: 90%;
    height: 100%;
    object-fit: cover;
    left: 6rem;
}
.banner-start-handmade .title-handmade h1 {
    font-weight: bolder;
    margin-bottom: 0px;
    font-size: 40px;
    line-height: 1.3;
    margin: 0;
}
.banner-start-handmade .title-handmade p {
    margin-top: 1.5em;
    font-size: 23px;
    font-weight: 700;
    word-break: break-word;
}
.wrapper-twitter-share {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-left: -6px;
}
.wrapper-twitter-share .button-twitter-x {
    background-color: #000;
    color: #fff;
    width: 90px;
    height: 20px;
    font-size: 11.5px;
    border-radius: 1em;
    padding: 2px 12px 1px 12px;
    font-weight: 500;
    display: block;
    margin-top: 0;
}
.wrapper-twitter-share .button-twitter-x .icon {
    width: 11px;
    margin-right: 5px;
    margin-top: -3px;
}
.wrapper-twitter-share iframe {
    position: absolute!important;
    top: 0;
    left: 0;
    opacity: 0;
}
.twitter-share-button {
    width: 90px!important;
    height: 35px!important;
    padding-top: 15px;
}

@media only screen and (width: 1440px) {
    .img-slide-fit {
        left: 50% !important;
        /*width: 81.777% !important;*/
        transform: translateX(-51%) !important;
        max-width: 82% !important;
        min-width: 81% !important;
    }
    .ui-selectoneradio.ui-grid-responsive .ui-grid-row>div, .ui-selectmanycheckbox.ui-grid-responsive .ui-grid-row>div {
        display: flex;
    }
}

@media only screen and (max-width: 1140px) {
    .img-slide-fit {
        left: 50% !important;
        max-width: 82% !important;
        min-width: 81% !important;
        transform: translateX(-51%);
    }
    .show-1140 {
        display: flex;
    }
    .layout-topbar-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        /* justify-content: center; */
        list-style-type: none;
        margin: 5px auto;
        height: 100%;
        width: auto;
    }
}
@media only screen and (max-width: 1280px){
    .faq-guide-wrap{
        padding: 2em 2em 2em 10em;
    }
    .editor-photo{
        margin-right: 1em;
    }
}
/*ipad pro*/
@media only screen and (max-width: 1024px) {
    .img-slide-fit {
        left: 10% !important;
        transform: translateX(-6.5%) !important;
        max-width: 89.5% !important;
        min-width: 89% !important;
    }
    .bg-blue img.logo-white {
        margin: auto;
        display: flex;
    }
    .bg-blue h1 {
        color: #ffffff;
        text-align: center;
    }
    .banner-start-handmade .title-handmade h1 {
        font-size: 32px;
    }
    .banner-start-handmade .title-handmade p {
        font-size: 20px;
    }
    .course-guide-wrap.gallery-link-event-wrap .gallery-link-event{
        margin-top: 7em;
    }
    .img-course-workshop{
        margin-right: 0em;
        width: 100%;
    }
    .box-user-inform{
        max-width: 24.2%;
    }
    .faq-guide-wrap{
        padding: 2em 2em 2em 7em;
    }
    .knitting .jhia-line-section {
        width: 40%;
    }
    .stepbox {
        width: calc(32% - 2.6em);
    }
    .marginimagecourse{
        margin-top: 50px !important;
    }
    .stepbox.stepbox4 {
        margin-top: 2em;
        margin-bottom: 5em;
        margin-left: auto;
        margin-right: 0;
    }
    .stepbox.stepbox5 {
        margin-top: 2em;
        margin-bottom: 5em;
        margin-left: 3em;
        margin-right: auto;
    }
    .price-wrap.discount-price {
        display: block;
        text-align: center;
    }
    .discount-price .before-off, .discount-price .after-off {
        justify-content: center;
    }
    .discount-price .arrow-price {
        margin: auto;
        transform: rotate(45deg);
    }
    .show-pc {
        display: flex!important;
    }

    /*new design*/
    .layout-topbar-top {
        margin: 5px auto;
    }
    .topbar-item-top {
        margin: auto 0.3em;
    }
    .topbar-item-top a {
        font-size: 13px;
        word-break: keep-all;
    }
    .hide-1024 {
        display: none!important;
    }
    #topbar-menu-knit-new .layout-topbar-actions, #topbar-menu-embro-new .layout-topbar-actions {
        justify-content: center;
    }
    .courses .block:nth-child(3) {
        margin-top: 3em;
    }
    .layout-topbar-top-wrap {
        width: 94.3333%;
        display: flex;
        align-items: center;
        margin: 0 2em;
        float: none;
        height: 45px;
    }

    /*course index*/
    .news-right {
        margin-top: 0!important;
    }

    .listing-tag .courses .block {
        padding: 0 .5em;
    }
    .listing-tag .courses .block:first-of-type, .listing-tag .courses .block:nth-child(odd) {
        padding: 0 .5em;
    }
    .listing-tag .courses .block:first-of-type:before {
        width: calc(100% - 1em);
        left: .5em;
    }
    .listing-tag .courses {
        width: calc(100% + 1em);
        margin-left: -.5em;
    }
    .list-course .courses .block:nth-child(odd):before {
        width: calc(100% - 1em);
        left: 0;
    }
    .list-course .courses .block:nth-child(even):before {
        width: calc(100% - 1em);
        left: 1em;
    }

    /* member dashboard */
    .md-width-100{
        max-width: unset;
    }
}
/*ipad pro*/
@media only screen and (max-width: 1024px) {
    body .ui-growl {
        top: 110px;
        left: 50%;
        transform: translate(-50%);
    }
    .popup-panel {
        margin: 15% 10%;
    }
    /*topbar*/
    .topbar-item {
        margin: auto 1%;
        font-size: 12px;
    }
    .layout-topbar-wrap a img {
        /*width: 80%;*/
    }

    /*content*/
    .icon-kugen {
        width: 30%;
        left: 33.5%;
    }
    .icon-crochet {
        width: 20%;
        left: 40%;
    }
    .step-sec {
        padding: 2em 0 3em;
    }
    .icon-course {
        position: relative;
        float: none;
        width: 50%;
        margin: 10px auto;
        left: 25%;
    }
    .sum-section-knitting.just-step {
        width: calc(100% * 3 + -9em + 1em);
    }
    .stepbox-knitting {
        margin: 0 1em;
        width: calc(24% - 2.6em);
    }
    .wrap-step-content-md {
        padding-bottom: 4em!important;
    }
    .stepbox1 {
        margin: 0 1em 0 3em;
    }
    .stepbox4 {
        margin: 0 1em 0 3em;
    }
    .step-ttl {
        width: 93%;
    }
    .step-ttl2 {
        width: 106%;
    }
    .step-btn p {
        margin: auto 31%;
    }
    .arrow-btn {
        left: -14%;
    }
    .stepbox2 .step-btn {
        margin: 27% auto auto;
    }
    .stepbox3 .step-btn {
        margin: 14% auto 0;
    }
    .stepbox4 .step-btn {
        margin: 14% auto 0;
    }
    .sticker {
        left: -10%;
        bottom: 14px;
    }
    .buy-btn p {
        margin: auto 28%;
    }
    .pay-img {
        padding: 3em 1em 3em 9em;
    }
    .work1b {
        margin: 0 5% 0 .5em;
    }
    .work4b {
        margin: 0 .5em 0 5%;
    }
    .work1b h3, .work2b h3, .work3b h3, .work4b h3 {
        font-size: 13px;
    }
    .price2 {
        width: 46%;
    }
    .diploma-fee-dt {
        width: 80%;
    }
    .other-course h2.course-ttl {
        height: 30px;
    }
    .sec3-index-wrap .ui-button {
        width: 100px;
    }
    .other-course .btn-arrow.ui-button::after {
        right: 12%;
    }

    /*footer*/
    .footer-top1 {
        margin: 2em 0;
        margin-right: 3em;
    }
    .footer-top2 {
        margin: 2em 4em;
    }
    .footer-top3 {
        margin: 2em 0;
        margin-left: 3em;
    }
    .phone-txt h1 {
        font-size: 22px;
    }
    .phone-txt p {
        font-size: 14px;
    }
    .contact-btn p {
        font-weight: bolder;
        margin: 3% 25%;
    }
    .contact-btn .arrow-btn {
        top: 45%;
        left: -11%;
    }
    .jhia-footer-logo {
        height: auto;
    }
    .footer-top2 p {
        font-size: 12px;
    }
    .footer-top2 h4, .footer-top3 h4 {
        font-size: 13px;
    }
    .contact-btn {
        width: 100%;
        margin-top: 5px;
    }
    .footer-bottom p {
        margin-left: 43%;
    }
    .footer-bottom img {
        bottom: 8px;
        margin: auto 30px;
    }
    .ui-button.topbar-btn {
        margin-right: 5px;
    }
    body .contact-btn.ui-button {
        width: 180px;
    }

    /*new org css*/
    .course-guide img {
        width: 7%;
    }
    .course-guide .arrow {
        right: 30px;
    }
    .course-guide:hover .arrow {
        right: 70px;
        transition: 500ms ease 0s;
    }
    .slick-initialized .slick-slide.workshop-slide-ipad {
        display: block;
        position: relative;
    }
    .banner-slider.slick-dotted.slick-slider {
        display: block;
    }
    .slide-top-left {
        padding-right: 1em;
        padding-left: 1em;
        width: 100%;
        padding-top: 3em;
    }
    .slide-top-right {
        padding-right: 1em;
        padding-left: 1em;
        width: 100%;
        max-width: unset;
    }
    .slide-top-right img.top-img-course {
        /*        max-height: 700px;
                min-height: 700px;
                max-width: 822px;
                min-width: 822px;*/
    }
    .content .list-course {
        margin-top: 5em;
    }
    .courses .block:nth-child(3n) {
        padding-left: 0;
        padding-right: 0;
    }
    .courses .block {
        padding-left: 1em;
        padding-right: 0;
    }
    .courses .block:first-of-type, .courses .block:nth-child(odd) {
        padding-left: 0;
        padding-right: 1em;
    }
    .courses .block:nth-child(even) {
        padding-left: 1em;
        padding-right: 0;
    }
    .courses .block:nth-child(odd):before {
        content: "";
        position: absolute;
        left: 5px;
        bottom: 0;
        height: 15px;
        width: 94%;
        border-bottom: 1px solid #cdcdcd;
    }
    .courses .block:nth-child(even):before {
        content: "";
        position: absolute;
        left: 20px;
        bottom: 0;
        height: 15px;
        width: 94%;
        border-bottom: 1px solid #cdcdcd;
    }
}
@media screen and (max-width: 876px){
    .img-slide-fit {
        left: 10% !important;
        max-width: 91% !important;
        min-width: 90% !important;
        transform: translateX(-7%) !important;
    }
    .ttl-item-workshop{
        margin-left: auto;
        width: 100%;
    }
    .width-full-768{
        width: 100%;
    }
    .course-guide-wrap.gallery-link-event-wrap{
        width: 100%;
    }
    .course-guide-wrap.gallery-link-event-wrap .gallery-link-event{
        margin-top: 6em;
        margin-bottom: 4em;
    }
    .course-workshop{
        display: block;
    }
    .img-course-workshop-wrap{
        padding-bottom: 60%;
        width: 100%;
    }
    .news-navigation-wrap {
        margin: 2em auto 4em;
    }
    .faq-guide-wrap{
        padding: 2em;
    }
    .display-flex-guide{
        display: block;
    }
    .editor-photo{
        margin-right: .5em;
        height: 54px;
        width: 54px;
    }
    .box-user-inform{
        max-width: 24%;
    }
}

@media screen and (width: 820px) {
    .img-slide-fit {
        left: 9.6% !important;
        max-width: 89% !important;
        min-width: 88% !important;
        transform: translateX(-6%) !important;
    }
}

/* iPad */
@media screen and (max-width: 768px){
    .img-slide-fit {
        left: 10% !important;
        max-width: 88.9% !important;
        min-width: 88% !important;
        transform: translateX(-6.6%) !important;
    }
    .bg-blue img.logo-white {
        margin: auto;
        display: flex;
        padding: 2.5em 0em 1em;
        width: 60%;
    }
    .bg-blue h1 {
        color: #ffffff;
        text-align: center;
        padding: 0 1em;
        font-size: 17px;
    }
    .title-certified-menu{
        max-width: 20%;
    }
    .width-full-768{
        width: 100%;
    }
    .review-list-star .fa{
        font-size: 2.7vw;
    }
    .content-table-course td{
        padding: .5em;
        font-size: 12px;
        word-break: break-word;
    }
    .post-review-btn{
        font-size: 11px !important;
    }
    .course-detail-btn{
        font-size: 11px !important;
        text-decoration: underline;
    }
    .text-title-row-course{
        padding: .5em 1em;
        font-size: 12px;
    }
    .editor-photo{
        margin-right: 1em;
        height: 54px;
        width: 54px;
    }
    .box-user-inform{
        max-width: 24%;
    }
    .display-flex-guide{
        display: block;
    }
    .faq-guide-wrap{
        padding: 0 2em 0 0;
    }
    .show-ipad-sm{
        display: block;
    }
    .spacecontent{
        margin-top: 15px;
    }
    .layout-main {
        padding-top: 70px;
    }
    .marginimagecourse{
        margin-top: 20px !important;
    }
    .show-pc{
        display: none!important;
    }
    .show-sm{
        display: block!important;
    }

    /*video css*/
    .video-table{
        width: 100%;
        display: inline-flex!important;
    }
    .video-table .ui-column-title{
        /*display: none!important;*/
    }
    .button-showvideo .ui-column-title{
        /*display: none!important;*/
    }
    .popup-panel {
        margin: 15% 10%;
    }
    /*end of video css*/


    /*topbar ipad*/
    .topbar-item {
        margin: auto 1%;
    }
    .layout-topbar-wrap {
        width: 90%;
    }
    .mobile-top-bar {
        display: flex;
        padding: 0 1em;
    }
    .mobile-top-bar .fa {
        font-size: 30px;
        margin-left: 11em;
        padding-top: 12px;
        padding-right: 0.5em;
    }
    .header-logo{
        margin: .5em 0 .5em 1em;
    }
    ul.layout-topbar-actions {
        display: block;
        margin: 1em auto;
        text-align: left;
        width: 100%;
    }
    li.topbar-item {
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    ul .topbar-item:first-of-type {
        margin-left: 0;
        margin-top: 0;
    }
    .topbar-mobile {
        display: block;
        overflow: hidden;
        padding-bottom: 0;
    }
    .topbar-pc-show {
        display: none;
    }
    .login-btn {
        margin: auto auto 2em 10px;
    }
    .mobile-menu-list .topbar-btn-menu .ui-button {
        margin: 1.5em .5em;
    }
    .mobile-menu-list .topbar-btn-menu .ui-button:first-of-type {
        margin-left: auto
    }
    .mobile-menu-list .topbar-btn-menu .ui-button:last-of-type {
        margin-right: auto
    }
    .wrap-topbar-list {
        padding: .5em 6em 0;
        display: flex;
        flex-direction: column;
    }
    .cart-num {
        position: absolute;
        top: 14px;
        right: -7px;
        background: #f18563;
        padding: 3px;
        border-radius: 100px;
        min-width: 23px;
        color: white;
    }
    .icon-cart::before {
        content: "";
        background: url(../../resources/jhia/images/topbar-cart.png);
        width: 23px;
        height: 23px;
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-flex;
        margin: 5px 0px 0px 0px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .dot-seecart {
        text-align: center;
        z-index: 999;
        font-size: 13px;
        height: 20px;
        width: 20px;
        left: 32px;
        top: auto;
        margin-left: 0;
        position: absolute;
        margin-top: .2em;
        background-color: #ff9900;
        border-radius: 50%;
        color: white;
        line-height: 20px;
    }
    #topbar-menu-index-sm .hr-line-menu, .hr-line-menu {
        border-bottom: 1px solid #c1c1c1;
        width: 100%;
    }
    #topbar-menu-index-sm li.topbar-item {
        margin-bottom: .5em;
        margin-top: .5em;
    }
    .topbar-item {
        margin: auto 0;
        font-size: 14px;
    }
    .wrap-topbar-list {
        padding: .5em 13em;
    }
    /*end of topbar */

    /*content*/
    .icon-stitch {
        width: 35%;
        left: 31%;
    }
    .icon-kugen {
        width: 40%;
        left: 28%;
    }
    .icon-shiro {
        width: 35%;
        left: 31%;
    }
    .icon-crochet {
        width: 25%;
        left: 38%;
    }
    .kugen-section .jhia-line-section {
        width: 50%;
    }
    .shiro-section .jhia-line-section {
        width: 50%;
    }
    .sum-section-knitting.just-step {
        width: calc(100% * 3 + -6em + 1em);
    }
    .wrap-step-content {
        padding-bottom: 5em;
    }
    .wrap-step-content-md {
        padding-bottom: 4em!important;
    }
    .stepbox-knitting {
        margin: 0 1em;
        width: calc(23% - 1.5em);
    }
    .stepbox4 {
        margin: 0 1em 0 2em;
    }
    .step-ttl {
        width: 100%;
        display: block;
    }
    .step-ttl2 {
        width: 100%;
        display: block;
    }
    img.sticker-step-knitting {
        width: 65px;
        height: 65px;
        right: -20%;
    }
    .other-courses {
        margin-top: 3em;
    }
    .detail-stitch .sec3-index-wrap {
        margin-top: 12.5em;
        margin-bottom: 2em;
    }
    /*    .step-ttl p, .step-ttl2 p {
            text-align: center;
            margin: 3px auto;
        }*/
    .step-ttl h3, .step-ttl2 h3 {
        margin: 3px auto;
        text-align: center;
    }
    /*    .step-wrap .step-btn .ui-button {
            width: 80%;
        }*/
    .step-wrap .step-btn {
        width: 80%;
    }
    .stepbox1 {
        margin: 0px 1em 0 1.5em;
    }
    /*    .stepbox4 {
            margin: 0 1.5em 0 1em;
        }
        .stepbox2 .step-btn {
            margin: 37% auto auto;
            width: 80%;
        }
        .stepbox3 .step-btn {
            width: 80%;
            margin: 0 auto;
        }
        .stepbox4 .step-btn {
            width: 80%;
            margin: 0 auto;
        }*/
    .step-btn p {
        margin: auto 29%;
    }
    .arrow-btn {
        left: -16%;
    }
    .sticker {
        left: -8%;
        bottom: 11px;
    }
    .stepbox1.stepbox-triangle1:after {
        right: -19px;
        top: 110px;
    }
    .stepbox2.stepbox-triangle2:after {
        right: -19px;
        top: 110px;
    }
    .stepbox3.stepbox-triangle3:after {
        right: -19px;
        top: 110px;
    }
    .course-desc h2 {
        padding-bottom: 0px;
        margin: 25px auto 25px;
    }
    /*    .work1 {
            margin: 0 5% 0 .5em;
        }
        .work2 {
            margin: 0 6.5%;
        }
        .work3 {
            margin: 0 .5em 0 5%;
        }*/
    /*    .work-sticker1 {
            left: -80%;
            bottom: 20px;
        }
        .work-sticker2 {
            left: -50%;
            bottom: 20px;
        }
        .work-sticker3 {
            left: -20%;
            bottom: 20px;
        }*/
    .buy-btn {
        margin: 2em auto auto;
    }
    .buy-btn p {
        margin: auto 23%;
    }
    .arrow-btn-buy {
        left: 5%;
        top: 14px;
    }
    .pay-img {
        padding: 3em 1em 3em 4em;
    }
    .price2 {
        width: max-content;
    }
    .work1b {
        margin: 0 5.5% 0 .5em;
    }
    .work2b {
        margin: 0 5%;
    }
    .work3b {
        margin: 0 5%;
    }
    .work4b {
        margin: 0 .5em 0 5.5%;
    }
    .work-sticker1b {
        left: -86%;
        bottom: 14px;
    }
    .work-sticker2b {
        left: -64%;
        bottom: 14px;
    }
    .work-sticker3b {
        left: -42%;
        bottom: 14px;
    }
    .work-sticker4b {
        left: -20%;
        bottom: 14px;
    }
    .top-cover {
        margin-top: 0;
    }
    .work1-wrap img.work-sticker1 {
        width: 55px;
        height: 55px;
    }
    .buy-con {
        display: block;
    }
    .buy-sec .buy-img {
        width: 100%;
    }
    .buy-sec .buy-desc {
        width: 100%;
    }
    .buy-ttl h2 {
        margin: 0.5em auto 0;
    }
    .buy-desc {
        padding: 0;
    }
    .price-wrap.discount-price {
        display: flex;
        text-align: center;
    }
    .discount-price .arrow-price {
        margin: 0 1.5em;
        transform: rotate(-45deg);
    }
    .pay-con {
        display: block;
        padding: 4em 0 2em;
    }
    .pay-img {
        padding: 0;
    }
    .pay-desc {
        padding: 0;
    }
    .pay-con .pay-img {
        width: 100%;
        max-width: 400px;
    }
    .pay-con .pay-desc {
        width: 100%
    }
    .item-other-cor {
        padding-right: 1em;
    }
    .other-course .other-ttl-icon {
        padding: 0 1em 0 0;
    }
    .sec3-bg-r .item-other-cor {
        padding-left: 1em;
    }
    .other-course .sec3-bg-r .other-ttl-icon {
        padding: 0 0 0 1em;
    }
    .jhia-line-section {
        width: 45%;
        background: #fa7563;
        position: relative;
        height: 1px;
        display: block;
    }
    .sec3-index-wrap .ui-button {
        width: 80px;
    }
    .other-course .btn-arrow.ui-button::after {
        right: 15%;
    }
    .other-course h2.course-ttl {
        height: auto;
    }

    .top-responsive {
        margin-top: 0px;
    }

    /*footer*/
    .footer-top1 {
        margin: 1em 0;
        margin-right: 2em;
    }
    .footer-top2 {
        margin: 1em 2em;
    }
    .footer-top3 {
        margin: 1em 0;
        margin-left: 2em;
    }
    .footer-jhia-new .footer-btm-img {
        width: 50px;
        margin-left: 10px;
    }
    .footer-add-wrap p {
        line-height: 1.3em;
    }
    .contact-btn {
        width: 100%;
        padding-right: 10px;
    }
    .contact-btn p {
        margin: 10px 21px;
    }
    .button-bluedark{
        /*font-size: 12.4px !important;*/
    }
    body .contact-btn.ui-button {
        width: 140px;
    }

    /*new org css*/
    .slick-initialized .slick-slide.workshop-slide-ipad {
        display: block;
        position: relative;
    }
    .slide-top-right {
        padding-right: 1em;
        padding-left: 1em;
        /*max-height: 360px;*/
        /*position: absolute;*/
    }
    .slide-top-right img.top-img-course {
        /*        max-height: 480px;
                min-height: 480px;
                max-width: 615px;
                min-width: 600px;*/
    }
    .slide-top-left {
        /*padding-top: 36em;*/
        /*        padding-right: 1em;
                padding-left: 1em;*/
    }
    .workshop-title h1 {
        width: 100%;
        font-size: 20px;
    }
    .banner-slider .slick-dots li {
        margin: 0 15px;
    }
    .course-index-pad {
        padding: 0.5em;
    }
    .courses .block:nth-child(odd) {
        padding-right: 1em;
        padding-left: 0;
    }
    .courses .block:nth-child(even) {
        padding-left: 1em;
        padding-right: 0;
    }
    .courses .block:before {
        left: 20px;
        width: 91%;
    }
    .courses .block:nth-child(odd):before, .courses .block:first-of-type:before {
        content: "";
        position: absolute;
        left: 6px;
        bottom: 0;
        height: 15px;
        width: 90%;
        border-bottom: 1px solid #cdcdcd;
    }
    .courses .block:nth-child(odd):before {
        left: 5px;
        width: 92%;
    }
    .courses .block:nth-child(even):before {
        left: 20px;
        width: 92%;
    }
    .workshop-top p.level {
        padding: 3px 7px;
        padding-left: 0;
        margin-right: 7px;
    }
    .workshop-top p.type {
        padding: 3px 7px 3px 0;
        margin-right: 7px;
    }
    .workshop-top p.available {
        padding: 3px 7px 3px 0;
        padding-right: 0;
        display: flex;
    }
    .workshop-top p.available span img {
        height: auto;
        margin-left: auto;
    }
    .workshop-top p.course {
        margin-right: 0.5em;
    }
    .news-left {
        padding-right: 1em;
        padding-top: 0;
    }
    .news-right {
        padding-left: 1em;
        padding-top: 0;
    }
    .feature-news img {
        float: left;
        margin: 5px 10px 0 0;
        width: 65%;
    }
    .news-more .ui-button {
        margin: 2em auto auto;
    }
    .banner-mid-image {
        width: 70%;
        top: 20%;
        right: 15%;
    }
    .course-faq, .course-guide {
        margin-top: 2em;
    }
    .course-faq:hover, .course-guide:hover {
        padding: 2em 1em;
        transition: 500ms ease 0s;
    }
    .course-guide img {
        width: 10%;
        margin-right: 1em;
    }
    .course-guide .arrow {
        width: 22px;
        height: 22px;
        right: 15px;
        top: 90px;
    }
    .course-guide:hover .arrow {
        right: 20px;
        transition: 500ms ease 0s;
    }
    .date-time .time p {
        margin-left: 0.5em;
    }
    .date-time .date p {
        margin-left: 0.5em;
    }
    .date-time .date {
        margin-right: 1em;
    }

    /*access page*/
    .access-table td {
        width: 50%;
        padding: 2.5em 1em;
    }

    .listing-tag .workshop-top {
        flex-wrap: wrap;
    }
    .listing-tag .workshop-top p.available {
        padding-left: 0;
        margin-top: 5px;
    }
    .listing-tag .workshop-top p.level {
        margin-bottom: 0;
    }
    .listing-tag .workshop-top p.type {
        margin-bottom: 0;
    }

    /*member payment history*/
    th.history-table-width {
        width: fit-content;
    }
}

/* Smarthphone */
@media screen and (max-width: 40.063em){
    .japan-img {
        margin-bottom: 10em;
        margin-top: -5em;
        display: block;
    }
    .background-menu {
        background: none !important;
        height: auto;
        padding-left: 20px;
    }
    .course-guide-wrap.gallery-link-event-wrap .gallery-link-event{
        flex-direction: column;
        gap: 0em;
    }
    .course-faq h2, .course-guide.gallery-link-event h2{
        max-width: 82%;
        margin: 1em auto 0;
    }
    .course-faq h2, .course-guide.gallery-link-event .arrow{
        width: 15px;
        height: 15px;
        right: 16px;
        top: 50%;
        position: absolute;
    }
    .gallery-link-event .event-link-image{
        width: 40%;
        padding-bottom: 40%;
    }
    .img-slide-fit {
        left: 9.5% !important;
        max-width: 92% !important;
        min-width: 92% !important;
        transform: translateX(-5.9%) !important;
    }
    .course-idx-mrgn-sm{
        margin-top: 1em;
    }
    .flex-one{
        min-height: 165px;
        max-height: 165px;
    }
    .padding-list-pr{
        padding: 0 2em 0 0 !important;
        width: 82vw;
        min-width: 82vw;
    }
    .listing-tag .ui-datagrid-column{
        display: flex;
        margin-bottom: 0;
        border-bottom: 1px solid #cdcdcd;
    }
    .hidden-sm{
        display: none;
    }
    .new-article-slider .slick-list{
        overflow: scroll;
    }
    .accepted-slider .slick-list{
        overflow: scroll;
    }
    .accepted-slider .slick-list .slick-track{
        width: fit-content !important;
        padding-right: 1em;
    }
    .new-article-slider .slick-list .slick-track{
        width: fit-content !important;
        padding-right: 1em;
        display: -webkit-inline-box;
    }
    .event-slider .slick-list{
        overflow: scroll;
    }
    .event-slider .slick-list .slick-track{
        width: fit-content !important;
    }
    .new-article-slider .article-item:last-child{
        padding: 0;
    }
    .curriculum-slide .slick-list{
        overflow: scroll;
    }
    .curriculum-slide .slick-list .slick-track{
        width: fit-content !important;
    }
    .padd-top-menu-member .ui-menu.ui-menubar.member-menu .ui-menu-list{
        display: block;
    }
    .border-right-event{
        border-right: none !important;
    }
    .position-star-sm{
        width: 50%;
        float: right;
        padding-left: 4em;
        margin-bottom: 1.5em;
    }
    /*    .news-date-release{
            opacity: 0;  .5 
        }*/
    .item-pay-process{
        margin-top: auto;
        line-height: 1;
    }
    .item-pay-success{
        margin-top: auto;
        line-height: 1;
    }
    .item-pay-fail{
        margin-top: auto;
        line-height: 1;
    }
    .text-align-name{
        text-align: center;
    }
    .img-course-workshop-wrap{
        padding-bottom: 24%;
    }
    .paginator-news-dashboard-sm{
        overflow: auto;
        display: grid;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        grid-gap: 0 28px;
        padding-left: 1.6%;
        -webkit-scrollbar: none;
    }
    .paginator-news-dashboard-sm::-webkit-scrollbar {
        display: none;
    }
    .paginator-news-dashboard-sm > div {
        min-width: 68.5vw;
        max-width: 68.5vw;
        padding-right: 30px;
    }
    .display-news-sm{
        display: grid;
    }
    .display-news-pc{
        display: none;
    }
    .qualified-member-content {
        padding: 0 0 1em 0;
    }
    .user-information {
        margin-top: 1.5em;
    }
    .table-mypage {
        margin-top: 1em;
    }
    .news-for-member {
        padding-top: .5em;
        padding-bottom: 0
    }
    .news-member-side {
        padding-top: 0;
        display: block;
    }
    .news-member-side p.label-news-member-other {
        margin-bottom: 0;
        max-width: fit-content;
    }
    .news-member-side p {
        margin-bottom: 0.5em;
        max-width: fit-content;
    }
    .padding-sm-faq{
        padding: 1em;
    }
    .margin-btm-faq-guide{
        margin-bottom: 4em !important;
    }
    .news-navigation-wrap {
        margin: 2em auto 4em;
    }
    .news-for-member2{
        padding-top: 0;
    }
    .padding-top0-sm{
        padding-top: 0;
    }
    .margin-2em-auto{
        margin: 2em auto 1em;
    }
    .table-course-myPage{
        border: 0;
    }
    .table-mypage .title-table-course{
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .table-mypage .table-course-myPage .content-table-course{
        border-bottom: none;
        padding: 1em 0;
        display: flex;
        flex-flow: column;
    }
    .table-mypage .table-course-myPage .content-table-course td{
        border: none;
        display: flex;
        font-size: .8em;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }
    .table-mypage .table-course-myPage .content-table-course td:before{
        content: attr(data-label);
        float: left;
        width: 30%;
        margin-right: 1em;
        margin-bottom: 1em;
        font-weight: bold;
        text-transform: uppercase;
        min-width: 30%;
        margin-top: 2px;
        font-size: 16px;
    }
    #status-date-label:before{
        font-size: 16px;
    }
    .table-mypage .table-course-myPage .course-workshop{
        display: flex;
        align-items: center;
        flex-direction: row;
        margin-top: 0;
    }
    .table-mypage .table-course-myPage .course-workshop p{
        margin-bottom: 0;
        padding-left: 1em;
    }
    .table-mypage .table-course-myPage .content-table-course td p{
        margin: 0 0 .7em;
    }
    .table-mypage .table-course-myPage .course-name{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .news-for-member{
        padding-right: .5em;
        width: 110% !important;
        margin-left: -19px;
        padding-left: 27px;
        margin-top: 2em;
    }
    .news-for-member2{
        padding-left: .5em;
        width: 100%;
    }
    .display-block-sm{
        display: block !important;
    }
    .box-wrap-sm{
        display: grid !important;
        grid-auto-flow: column;
        grid-template-rows: repeat(2,auto);
        grid-gap: .5em;
    }
    .box-user-inform{
        padding: .5em;
        width: 100%;
        max-width: 100%;
        margin: auto;
    }
    .edit-text-btn{
        text-align: center;
    }
    .padding-course-name-sm{
        padding: .5em;
    }
    .overflow-scroll-sm{
        overflow: scroll;
    }
    .review-list-star .fa{
        font-size: 5.7vw;
    }
    .faq-guide{
        display: block;
        align-items: center;
        padding: 1.5em;
        text-align: left;
        font-size: 12px;
    }
    .title-guide-part{
        font-size: 18px;
    }
    .guide-index{
        margin-top: 1em;
        margin-bottom: 0;
        padding: 0;
    }
    .guide-top-background{
        border-radius: 0;
    }
    .toga-img{
        width: 35px !important;
    }
    .img-icon-guides-note{
        width: 30px !important;
    }
    .img-icon-guides{
        width: 30px;
    }
    .course-guide .qna-icon{
        width: 18% !important;
        margin: auto;
        margin-right: auto !important;
    }
    .sameheight-column .bg-color-content ul{
        padding-inline-start: 1em !important;
    }
    .bg-color-content.height-box-white2 ul{
        padding-inline-start: 1em !important;
    }
    .bg-color-content.height-box-white1 ul{
        padding-inline-start: 1em !important;
    }
    .display-flex-guide{
        display: block;
    }
    .bg-color-title{
        padding: 1em;
    }
    .layout-main {
        padding-top: 60px;
    }
    .work1-knit h4, .work2-knit h4, .work3-knit h4, .work4-knit h4 {
        padding-top: 0;
        margin-top: 1em;
    }
    .work1-knit h3, .work2-knit h3, .work3-knit h3, .work4-knit h3 {
        margin-bottom: .8em;
    }
    .work1-knit {
        margin-bottom: 1em;
    }
    .work-wrap-2 .work1-knit:last-of-type {
        margin-bottom: 0;
    }
    .margin-top-visa{
        margin-top: 0;
        margin-left: 0px;
    }
    .padding-left-visa-sm{
        padding-left: 17px;
    }
    .center-img-sm-embroi{
        align-items: center;
        display: block !important;
        margin: auto !important;
        margin-top: 1.5em !important;
        margin-bottom: 1.5em !important;
    }
    .label-wrap{
        padding-bottom: 0;
    }
    .value-wrap{
        padding-top: 0;
    }
    .work1-knit img, .work2-knit img, .work3-knit img, .work4-knit img, .work1 img, .work2 img, .work3 img, .work4 img {
        width: 230px;
        margin: auto;
        display: block;
        border-radius: 30px;
    }
    img.hamanaka-logo{
        max-height: 90px;
    }
    .no-pad-sm{
        padding: 0;
    }
    .show-sm{
        display: block!important;
    }
    .btn-seecart-float{
        z-index: 9999;
        position: fixed;
        bottom: 13px;
    }
    .ui-growl-message {
        padding: 0 0 0px 0;
        width: 266px;
        float: right;
        line-height: 2.3em;
    }
    .ui-growl {
        position: fixed;
        top: 75px !important;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 340px;

    }
    .label-box{
        margin-top: .5em;
    }
    .section-container {
        padding: 30px 0 40px 0;
    }
    .top-responsive {
        margin-top: 5em;
    }

    .page-container{
        padding: 0 16px;
        margin-top: 0;
        margin-bottom: 0;
    }
    /*    p {
            font-size: 14px;
        }*/
    .less-space{
        margin-top: 0 !important;
    }
    .no-padtb-sm{
        padding: 0 0.5em;
    }
    .no-padlr-sm{
        padding: 0.5em 0;
    }
    .no-pad-top-sm {
        padding-top: 0;
    }
    .no-pad-btm-sm {
        padding-bottom: 0;
    }
    body .ui-button.ui-button-text-icon-right .ui-icon {
        margin-top: -5px;
    }
    .vid-btn-col span.ui-column-title{
        display: none!important;
    }
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]{
        display: flex;
        text-align: justify!important;
        width: 100%!important;
        border-bottom: 1px solid #dddddd;
    }
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:last-child {
        border-bottom: none;
    }
    .btn-col{
        width: 100%;
    }
    .card h1.m-top4-sm{
        margin-top: 4em;
    }
    /*video css*/
    .ui-button.btn-close-circle{
        zoom: 1.1;
    }
    .popup-panel {
        margin: 15% 4%;
    }
    .video-table-teacher{
        width: 100%;
    }
    .video-table .ui-column-title{
        display: none!important;
    }
    /*end of video css*/

    /*topbar sm*/
    .mobile-top-bar {
        display: flex;
        padding: 0;
    }
    .mobile-top-bar .fa {
        font-size: 30px;
        margin-left: 0.5em;
        padding-top: 8px;
        padding-right: 0.5em;
    }
    .jhia-line-new-section {
        width: 60%;
        background: #fa7563;
        position: relative;
        height: 1px;
        display: block;
    }
    .header-logo{
        margin: 0.5em 0.5em .5em 1em;
        text-align: center;
    }
    ul.layout-topbar-actions {
        display: block;
        margin: 0em 0em;
        text-align: left;
        width: 100%;
    }
    ul .topbar-item:first-of-type {
        margin-left: 0;
        margin-top: .5em;
    }
    li.topbar-item {
        display: block;
        margin-bottom: .8em;
        margin-top: .8em;
        font-size: 16px;
    }
    .topbar-mobile {
        display: block;
        overflow: hidden;
        padding-bottom: 0;
    }
    .topbar-pc-show {
        display: none;
    }
    .login-btn {
        margin: auto auto 2em 10px;
    }
    .mobile-menu-list .topbar-btn-menu .ui-button {
        margin: 15px .5em;
    }
    .mobile-menu-list .topbar-btn-menu .ui-button:first-of-type {
        margin-left: auto
    }
    .mobile-menu-list .topbar-btn-menu .ui-button:last-of-type {
        margin-right: auto;
        height: 45px;
    }
    .wrap-topbar-list {
        padding: .5em 1em;
    }
    .icon-cart-link {
        margin: 0 auto;
        margin-left: 13px;
    }
    .cart-num {
        top: 5px;
        right: -9px;
    }
    .icon-cart::before {
        background: url(../../resources/jhia/images/topbar-cart.png);
        width: 27px;
        height: 27px;
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 8px 0px 0px 0px;
    }
    #topbar-menu-index-sm .layout-topbar-actions {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .topbar-item-top {
        display: block;
    }
    .hr-line-menu {
        border-bottom: 1px solid #c1c1c1!important;
        width: 100%;
    }
    .topbar-btn .fa-envelope-o {
        font-size: 23px;
        overflow: visible;
        margin-left: -1px;
        margin-top: -12px!important;
    }
    .ui-button.topbar-btn {
        width: 45px;
        height: 45px;
        background-color: #003884;
        margin-right: 1em;
    }
    /*end of topbar */

    .show-pc {
        display: none!important;
    }
    .section-ttl {
        padding-top: 0;
        margin-bottom: 0em;
    }
    .section-ttl h2 {
        margin-top: 20px;
        margin-bottom: 0px;
        font-size: 20px;
    }
    .top-page .section-ttl h2 {
        margin-top: 0;
    }
    .em-logo {
        position: relative;
        left: 26%;
        width: 50%;
        margin: 4em auto 2em;
    }
    .icon-stitch {
        width: 70%;
        left: 14%;
    }
    .icon-kugen {
        width: 70%;
        left: 14%;
    }
    .icon-shiro {
        width: 70%;
        left: 14%;
    }
    .icon-crochet {
        width: 45%;
        left: 28%;
    }
    .whitebox {
        background: rgba(255,255,255,0.7);
        border-radius: 10px;
        width: 80%;
        margin: 0 auto 4em 10%;
    }
    .whitebox p {
        font-size: 14px;
    }
    .section-ttl span {
        margin: 7px 0 5px;
    }
    .course-txt {
        margin: 0 auto;
        padding: 0.5em 0;
    }
    .step-sec {
        padding: 2em 0 0;
    }
    .icon-course {
        position: relative;
        float: none;
        width: 100%;
        margin: 10px auto;
        left: 0%;
    }
    .sum-section.just-step {
        width: 106%;
        left: -3%;
    }
    .sum-section.just-certif {
        width: 106%;
        left: -3%;
    }
    .sum-section-knitting.just-step {
        width: 106%;
        left: -3%;
    }
    .sum-section-knitting.just-certif {
        width: 106%;
        left: -3%;
    }
    .stepbox {
        margin: 2em auto;
        width: 100%;
    }
    .stepbox.stepbox-triangle:after {
        top: unset;
        transform: rotate(90deg)translateY(-31%);
        bottom: -27px;
        right: 50%;
    }
    /*    .stepbox.stepbox2.stepbox-triangle:after {
            top: 386px;
        }
        .stepbox.stepbox3.stepbox-triangle:after {
            top: 407px;
        }*/
    .stepbox4 {
        margin: 4em auto auto;
    }
    .stepbox.stepbox5 {
        margin-top: -1em;
        margin-bottom: 3em;
        margin-left: auto;
        margin-right: auto;
    }
    .stepbox-knitting {
        margin: 2em auto;
        width: 100%;
    }
    .stepbox-knitting.stepbox-triangle:after {
        top: unset;
        transform: rotate(90deg)translateY(-31%);
        bottom: -27px;
        right: 50%;
    }
    /*    .stepbox.stepbox2.stepbox-triangle:after {
            top: 386px;
        }
        .stepbox.stepbox3.stepbox-triangle:after {
            top: 407px;
        }*/
    .stepbox-knitting.stepbox4 {
        margin: 4em auto auto;
    }
    .stepbox-knitting.stepbox5 {
        margin-top: 4em;
        margin-bottom: 3em;
        margin-left: auto;
        margin-right: auto;
    }
    .step-wrap {
        margin: 1px auto 0em;
    }
    .sticker {
        width: 30%;
        height: 30%;
        display: flex;
        position: relative;
        left: 76%;
        top: -875px;
        float: none;
    }
    img.sticker-step-knitting {
        position: absolute;
        width: 75px;
        height: 75px;
        top: -5%;
        right: -8%;
    }
    img.sticker-step {
        right: -7%;
        width: 75px;
        height: 75px;
        top: -20px;
    }
    .wrap-step-content5-sm, .wrap-step-content4-sm{
        padding-bottom: 1em;
    }
    .wrap-step-content-md {
        padding-bottom: 4em!important;
    }
    .step-wrap .step-btn .ui-button::after {
        right: 10%;
    }
    .step-wrap .step-btn .ui-button {
        max-width: 150px;
    }
    .jhia-line-section {
        width: 85%!important;
        margin: 5px auto 0!important;
    }
    .ttl-w-img {
        margin: 1em auto 0em;
    }
    .vid-pad-sm {
        padding: 0 2em;
    }
    .course-desc{
        padding-left: 2em;
        padding-right: 2em;
    }
    .work-sec .section-ttl h2 {
        margin-top: auto;
    }
    .work-wrap {
        display: block;
        margin: auto;
        padding-top: 0em;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
        width: 100%;
    }
    .work1-wrap {
        width: 100%;
        margin: 1em auto;
    }
    .work1 {
        padding: 0;
    }
    .work1 h3, .work2 h3, .work3 h3, .work4 h3 {
        padding-top: 0em;
    }
    .work-sec2 .work1-wrap {
        width: 100%;
    }
    .x-price {
        width: 50px;
        height: 0;
        bottom: 11px;
        right: 10px;
    }
    .x-price2 {
        width: 50px;
        height: 0px;
        bottom: 10px;
        right: 10px;
    }
    .buy-btn .ui-button {
        margin: 2.5em auto auto;
    }
    body .ui-button.buy-btn.ui-button-text-icon-right .ui-icon {
        margin-top: -5px;
    }
    .arrow-btn-buy {
        left: -8%;
        top: 14px;
    }

    .buy-btn p{
        margin: 5px 98px;
    }
    .buy-img {
        padding: 0;
    }
    .buy-ttl h2 span {
        font-size: 29px;
        margin: 11px 0px 0;
    }
    .buy-desc{
        padding: 0;
    }
    .buy-ttl h2 {
        margin: 0.5em auto 0;
        font-size: 21px;
    }
    .before-off h2, .after-off h2 {
        font-size: 18px;
    }
    .course-con {
        display: block;
        padding: 1em 0 2em;
    }
    .work-wrap-2 {
        width: 97%;
        display: block;
    }
    .buy-con {
        display: block;
        padding: 3.5em 0 4em;
        ;
    }
    .pay-con {
        display: block;
        padding: 4em 0;
    }
    .pay-sec .blue-line {
        margin-bottom: 0;
    }
    .buy-desc p, .pay-desc p {
        font-size: 14px;
        margin: 5px auto;
    }
    .pay-img {
        padding: 0;
    }
    .pay-desc {
        padding: 0;
    }
    .pay-desc ul {
        margin-bottom: 0;
    }
    .work-sec {
        padding: 0 0 1em;
    }
    .price-wrap {
        margin: auto 0%;
    }
    .fa-plus.plus-color {
        line-height: 25px;
    }
    .price-wrap span {
        font-size: 12px;
    }
    .sitemap-list {
        width: calc(100% - 2em);
        margin: auto 1em;
    }
    .sitemap-sec.sitemap-detail {
        margin-top: .5em;
    }
    .sitemap-detail .sitemap-con {
        padding: 1.5em 0 1em;
    }
    .dip-application {
        padding-right: 0;
        padding-left: 0;
        padding-top: 0;
    }
    .dip-application-txt {
        width: 100%;
    }
    .diploma-application {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 4em;
        padding-top: 1em;
    }
    .diploma-fee-ttl {
        padding: 0 1em;
    }
    .price-wrap.discount-price {
        display: flex;
        text-align: center;
    }
    .discount-price .arrow-price {
        margin: 0 1.5em;
        transform: rotate(-45deg);
    }
    .top-cover {
        margin-top: 16%;
    }
    .work1-wrap img.work-sticker1 {
        width: 73px;
        height: 73px;
        right: 7%;
    }
    .other-courses {
        margin-top: 4em;
    }
    .detail-stitch .sec3-index-wrap {
        width: 100%;
        margin-top: 12.5em;
    }
    .item-other-cor {
        padding: 0em 25px 2em;
    }
    .other-course .other-ttl-icon {
        padding: 0;
        margin-bottom: 1em;
    }
    .other-course img.sec3-img {
        margin: 1.5em 0;
    }
    .detail-stitch .sec3-bg-r .sec3-index-wrap {
        margin-top: 2em !important;
        margin-bottom: 0;
    }
    .padding-btm-knitt2{
        /* padding-bottom: 3em;*/
    }
    .sec3-bg-r .item-other-cor {
        padding: 0em 25px 2em;
    }
    .detail-stitch .sec3-bg-r .sec3-index-wrap {
        width: 100%
    }
    .other-course .sec3-bg-r .other-ttl-icon {
        padding: 0
    }
    .sec3-bg-r .item-other-cor:last-of-type {
        padding-bottom: 4em;
    }
    .padding-bot-gmopush {
        padding-bottom: 3em;
    }
    .sec3-index-wrap .ui-button {
        width: 130px;
    }
    .other-course .btn-arrow.ui-button::after {
        right: 9%;
    }
    .lecture-con {
        padding: 0 1em;
    }
    .knit-faq {
        padding: 4em 0 1em;
    }

    /*member*/
    body .ui-menu.ui-menubar > .ui-menu-list > .ui-menuitem > .ui-menuitem-link {
        padding: 10px 31px;
    }
    .btn-wrap {
        display: inline-flex;
        align-items: center;
        margin: 2em auto;
    }
    .top-main-title h1 {
        margin-top: 3em;
    }
    .learning-wrapper{
        margin-bottom: 1em;
    }
    .grey-box {
        background-color: #f7f7f7;
        padding: 0 0.5em 0.5em;
    }
    .work-wrap-knit {
        padding-top: 1em;
        padding-bottom: 1em;
        padding-left: 0em;
        padding-right: 0em;
    }
    .icon-info-wrap {
        margin: 0;
        float: left;
    }
    .icon-info{
        color: #229bd8;
        font-size: 50px;
        float: right;
        line-height: 1em;
    }
    .text-info {
        text-align: left;
        margin: 1em auto 5px;
    }
    .register-btn-margin{
        margin:15px 0px 30px 0px;
    }
    .course-name-text {
        text-align: left;
    }
    .yellow-box-info {
        margin-top: 1em!important;
    }
    .editor-photo{
        margin-right: 0.5em;
    }

    /*footer css*/
    .phone-txt h1{
        font-size: 14px;
        /*margin-top: 1.5em;*/
    }
    .footer-add-wrap {
        float: none;
        width: 103%;
    }
    .footer-add-wrap .phone-txt {
        margin-top: 0em;
    }
    body .ui-button.ui-button-text-icon-right .ui-icon .contact-btn {
        margin-top: -7px;
    }
    .contact-btn {
        padding-right: 25px;
    }
    .footer-line {
        top: 340px;
    }
    .footer-bttm{
        margin-top: 7px;
        padding-bottom: 11px;
    }
    .footer-jhia-new p {
        margin: 5px auto;
        line-height: 1.5em;
    }
    .footer-jhia-new .footer-btm {
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    .footer-add-wrap.num-call h3 {
        font-weight: 400;
        margin: 0 auto;
    }
    body .contact-btn.ui-button {
        max-width: 205px;
        width: 205px;
        float: left;
        padding-left: 25px;
    }
    body .contact-btn.ui-button.ui-button-text-only .ui-button-text {
        padding: 6px 0;
    }
    .contact-btn {
        margin: 25px auto 10px;
    }
    li.linkText {
        vertical-align: middle;
        /*display: block;*/
        margin: 0;
    }
    li.footcommonText{
        /*display: none;*/
    }

    /*new css for beta*/
    .mail-subs .top-main-title h1 {
        margin-top: 2.2em;
    }
    .reg-form h1.page-ttl {
        margin-bottom: 0.5em;
    }
    .reg-form .registered-txt {
        margin: 22px auto 40px;
    }
    .contact-page .login-container {
        margin: 26px auto auto auto;
    }

    /*new org css*/
    .slide-top-right {
        padding: 0 5.5%;
        width: 100%;
        min-width: unset
    }
    .slide-top-left {
        padding-top: 1em;
        padding-right: 5.5%;
        padding-left: 5.5%;
        width: 100%;
    }
    .slide-top-right img.top-img-course {
        /*        max-height: 320px;
                min-height: 320px;
                max-width: 333px;
                min-width: 333px;*/
    }
    .course-index-pad {
        padding: 0;
    }
    .workshop-top-wrap {
        display: block;
        padding-bottom: 0.5em;
    }
    .workshop-top p.available {
        padding: 3px 7px 3px 0;
        display: flex;
        align-items: center;
    }
    .workshop-top p.type {
        padding: 3px 7px 3px 0;
        margin-right: 7px;
    }
    .workshop-top p.level {
        padding: 3px 7px;
        padding-left: 0;
        margin-right: 7px;
    }
    .news-course {
        background-color: #e5f1f8;
        padding: 1em 0 2.5em;
    }
    .misc-course {
        padding: 2em 0 3em;
    }
    .misc-course .jhia-banner:hover a img {
        opacity: 0.5;
    }
    .workshop-top p.course {
        margin: 0;
        width: fit-content;
        margin-bottom: 1em;
    }
    p.news-date {
        margin: 1em 0 0 0;

    }
    .jhia-line-index-section {
        width: 20%;
        right: 40%;
    }
    .content .list-course {
        margin-top: 2em;
    }
    .margin-bottom2-sm1 {
        margin-bottom: 1em;
    }
    .courses .block:nth-child(odd), .courses .block:nth-child(even) {
        padding-right: 0;
        padding-left: 0;
    }
    .courses .block:nth-child(odd):before, .courses .block:first-of-type:before, .courses .block:before, .courses .block:nth-child(3n):before {
        left: 0;
        width: 100%;
    }
    .courses .block:nth-child(even):before {
        width: 100%;
        left: 0;
    }
    .courses .block:nth-child(3n + 4):before {
        left: 0;
        width: 100%;
    }
    .courses .block {
        margin-top: 3em;
    }
    .course-content {
        padding: 1em 0 0.5em;
    }
    .news-left {
        padding-right: 0;
        padding-left: 0;
        padding-top: 0;
        margin-top: 1em;
    }
    .news-right {
        padding-left: 0;
        padding-right: 0;
    }
    .news-course-wrap {
        display: block;
    }
    .workshop-news p.course {
        margin-top: 1em;
        text-align: center;
    }
    .feature-news img {
        float: none;
        margin: auto auto 1em;
        width: 100%;
    }
    .news-more .ui-button {
        width: 140px;
        margin: 1em auto auto;
    }
    .news-more.handmate-more .ui-button {
        width: 140px;
        margin: 1em 0 auto;
    }
    .course-faq, .course-guide {
        display: block;
        padding: 2em 1em;
        margin-top: 0;
        position: relative;
        text-align: center;
        margin-bottom: 3em;
    }
    .course-guide {
        margin-top: 3em;
    }
    .course-guide.guideDetail-faq-link{
        display: flex;
        flex-direction: column;
    }
    .course-guide img {
        width: 15%;
        margin: auto;
    }
    .course-faq h2, .course-guide h2 {
        font-size: 20px;
        text-align: center;
    }
    .course-faq p, .course-guide p {
        margin-bottom: 0;
        text-align: center;
        font-size: 14px;
    }
    .course-guide .arrow {
        width: 15px;
        height: 15px;
        right: 16px;
        top: 50%;
        position: absolute;
    }
    .course-guide:hover .arrow {
        right: 6px;
    }
    .wrap-news-date.detail {
        display: flex;
        margin-top: 45px;
    }
    .wrap-news-date.detail p.news-date {
        margin-left: 1em;
        margin-bottom: 15px;
    }
    .courses .block:nth-child(1) {
        margin-top: 1.5em;
    }
    .courses .block:nth-child(2), .courses .block:nth-child(3) {
        margin-top: 3em;
    }
    .datagrid-empty {
        margin: 2em auto 0;
    }
    .events .datagrid-empty{
        margin: 0 auto;
    }

    /*access page*/
    .access {
        padding-left: 1em;
        padding-right: 1em;
    }
    .access-transport {
        padding-left: 1em;
        padding-right: 1em;
        margin-bottom: 0!important;
    }
    .sm-table-access{
        display: block;
        width: 100%;
        border-collapse: collapse;
    }
    .access-table{
        display: none;
    }
    .sm-table-access, th, td {
        border: 1px solid #e5e5e5;
        /*    padding: 1em 4em; */
        text-align: center;
        letter-spacing: normal;
        font-size: 14px;
        font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
        color: #222222;
    }
    .sm-table-access td{
        width: 10%;
        padding: 1.5em 0;
    }
    .map-access iframe {
        height: 70vw;
    }
    .margin-top-access {
        margin-top: 0.5em;
        margin-bottom: 0em;
    }
    .access-transport .metro-train {
        padding-bottom: 0.5em;
    }
    .access-transport .keio-bus {
        padding-top: 1em;
    }
    .access-transport-wrapper {
        margin-bottom: 1em;
    }
    .access-transport .keio-bus p {
        margin-right: 0;
        margin-bottom: .5em;
    }
    .page-ttl h1 {
        margin-top: .65em;
    }
    .margin-ttl-mypage {
        margin: 0.5em auto!important;
    }
    .phone-div-access p{
        margin-bottom: 0;
    }

    /*topbar member*/
    .text-fill-field .ui-inputfield {
        max-width: unset;
    }

    .ui-inputfield.middle-input {
        width: 100%;
    }
    .course-guide .sm-center-txt{
        text-align: center;
    }

    .listing-tag .courses .block:nth-child(1), .listing-tag .courses .block:nth-child(2), .listing-tag .courses .block:nth-child(3) {
        margin-top: 1.5em;
    }
    .listing-tag .workshop-top p.available {
        margin: 0;
    }
    .listing-tag .workshop-top {
        padding-bottom: 1em;
    }
    .listing-tag .workshop-top p.type {
        margin-right: 10px;
    }
    .list-course .courses .block:nth-child(odd):before {
        width: 100%;
    }
    .list-course .courses .block:nth-child(even):before {
        width: 100%;
        left: 0;
    }

    /*member payment history*/
    th.history-table-width {
        width: 100%;
    }

    /*=============== TermsOfUse CSS ================*/
    .tou-container {
        margin-top: 26px;
        padding: 0;
    }
    /*=============== END TermsOfUse CSS ================*/

    .dashboard-certified-menu{
        margin-bottom: 0;
    }
    /*    .table-mypage .table-course-myPage tr .course-name::before {
            display: none;
        }*/


    .listing-tag .ui-datagrid-column {
        border-bottom: 0;
    }

    .margin-ttl-mypage {
        margin: 1.5em auto !important;
    }

    /*sliding on sm css*/
    .sm-sliding {
        display: flex;
        overflow: auto;
        flex-wrap: nowrap!important;
        scrollbar-width: none;
    }
    .sm-sliding::-webkit-scrollbar {
        width: 0px;
        background: transparent;
        height: 0;
    }
    /*end sliding on sm css*/
    .index-event-item .sm-sliding.accepted-slider {
        padding-right: 5.5%!important;
    }
    .workshop-index-wrap .sm-sliding.accepted-slider {
        padding-right: 5.5%!important;
    }
    .course-faq:hover, .course-guide:hover {
        padding: 1em;
    }
    .course-more {
        margin-bottom: 1.5em;
    }

    .banner-handmade{
        display: grid;
        flex-wrap: wrap;
        padding: 1em;
    }
    .banner-start-handmade .title-handmade {
        color: #000000;
        position: absolute;
        z-index: 1;
        margin-top: 3em;
        width: 100%;
        padding: 3em;
        left: 0;
    }
    .left-banner {
        padding-left: 0;
        padding: 0;
    }
    .left-banner .ui-grid-responsive .ui-grid-row{
        display: flex;
    }
    .ui-panelgrid .ui-grid-responsive .ui-panelgrid-cell.handicraft {
        padding: 0em;
    }
    .ui-panelgrid .ui-grid-responsive .ui-panelgrid-cell.handicraft:nth-child(1) {
        margin-right: .5em;
    }
    .ui-panelgrid .ui-grid-responsive .ui-panelgrid-cell.handicraft:nth-child(2) {
        margin-left: .5em;
    }
    .left-banner .ui-panelgrid .ui-grid-responsive .ui-grid-row{
        margin-bottom: 1em;
    }
    .bg-blue img.logo-white {
        margin: auto;
        display: flex;
        width: 75%;
    }
    .bg-blue {
        background-color: #283A84;
        margin: 1.5em 0;
        padding-bottom: 2em;
    }
    .pc-show{
        display: none;
    }
    .sm-show{
        display: block;
    }
    .news-more .ui-button .ui-button-text::after {
        width: 10px;
        height: 10px;
        box-shadow: -2px 2px 0 rgb(255 255 255);
        transform: rotate(225deg)translateY(64%);
        position: absolute;
        content: "";
        right: 30px;
        top: 20px;
    }
    .name-wrap {
        display: flex;
        margin-top: -0.75em;
    }
    .single-wrap, .year-wrap, .phone-wrap, .phone-wrap .phone, .zip-wrap, .pref-dropdown, .address-wrap, .pass-wrap, .option-wrap {
        margin-top: -0.75em;
    }
}

@media screen and (width: 390px){
    .img-slide-fit {
        left: 8.777% !important;
        max-width: 92% !important;
        min-width: 92% !important;
        transform: translateX(-5%) !important;
    }
}

@media screen and (width: 375px) {
    .img-slide-fit {
        left: 9.5% !important;
        max-width: 92% !important;
        min-width: 92% !important;
        transform: translateX(-5.9%) !important;
    }
}

@media screen and (max-width: 375px) {
    .img-slide-fit {
        left: 9.5% !important;
        max-width: 92% !important;
        min-width: 92% !important;
        transform: translateX(-5.9%) !important;
    }
    .top-responsive {
        margin-top: 4.7em;
    }

    /*topbar on small screen*/
    .wrap-topbar-list {
        padding: .5em 0em;
    }
    .mobile-menu-list .topbar-btn-menu .ui-button:first-of-type {
        margin-right: 0;
    }
    .mobile-menu-list .topbar-btn-menu .ui-button:last-of-type {
        margin-left: 0;
    }
    .margin-auto{
        margin: auto;
    }
    #topbar-menu-index-sm .hr-line-menu {
        border-bottom: 1px solid #c1c1c1!important;
        width: 320px;
    }
    .pc-show{
        display: none;
    }
    .sm-show{
        display: block;
    }
}
@media screen and (max-width: 320px) {
    .img-slide-fit {
        max-width: 90% !important;
        min-width: 89% !important;
        left: 11% !important;
        transform: translateX(-6%) !important;
    }
    .box-wrap-sm{
        white-space: nowrap;
        /*width: calc(100%-4em);*/
    }
    .editor-info{
        font-size: 13px;
    }
    .box-user-inform{
        text-align: center;
    }
    .section-ttl h2 {
        font-size: 17px;
    }
    .jhia-line-section {
        width: 100%;
    }
    .before-off h2, .after-off h2 {
        font-size: 14px;
    }
    .course-txt {
        margin: 15px auto 0;
        padding: 0;
    }
    .image-section-ttl {
        display: block;
    }

    /*topbar*/
    #topbar-menu-index-sm .hr-line-menu, .hr-line-menu {
        width: 265px;
    }

    /*footer*/
    .contact-btn {
        padding-right: 10px;
    }
    body .contact-btn.ui-button {
        padding-left: 12px;
    }
    /*new org css*/
    .slide-top-right img.top-img-course {
        /*        max-height: 300px;
                min-height: 300px;
                max-width: 280px;
                min-width: 275px;*/
    }
    .slide-top-left {
        /*padding-top: 23em;*/
    }
    .course-faq {
        padding: 1em 2em;
        margin-top: 0;
        margin-bottom: 2.5em;
    }
    .course-guide {
        padding: 1em 2em;
        margin-bottom: 2.5em;
    }
    .course-faq h2, .course-guide h2 {
        font-size: 18px;
    }
    .course-guide .arrow {
        width: 15px;
        height: 15px;
        right: 10px;
    }

    .sm-table-access td{
        width: 10%;
        padding: 1.5em 1em;
    }
    .pc-show{
        display: none;
    }
    .sm-show{
        display: block;
    }
}

@media screen and (width: 280px){
    .img-slide-fit {
        max-width: 89.1% !important;
        min-width: 89% !important;
        left: 11% !important;
        transform: translateX(-6%) !important;
    }
}

/*added by adhit*/

.section-ttl-center h2 {
    margin: 0;
    margin-bottom: 0;
    text-align: center!important;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.6em;
}

.text-blue {
    color: blue;
}

.text-yellow {
    color: yellow;
}

.text-red {
    color: red;
}

.tagColorBlue {
    background-color: #0C97DF!important;
    color: #fff;
    padding: 6px 10px 6px 10px;
    border: none!important;
}