@charset "utf-8";

/*
 * File    : rwd-strap.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * 1680px
 * 1480px
 * 1200px
 * 1023px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1680px
 * **************************************** */
@media (max-width: 1680px){

}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    /* BUTTON */
    .jt-btn__basic.jt-btn--small .jt-icon { top: 0; }

    /* CATEGORY */
    .jt-category__list > li > a, .jt-category__list > li > span { min-width: 90rem; }
    html.ios .jt-single__meta > *.jt-typo--06:not(:last-child):after { top: 8rem; }

    /* TABS */
    .jt-tabs__head + .jt-tabs__panels { margin-top: 60rem; }
    .jt-tabs__menu a { min-width: 90rem; }

    /* SINGLE LAYOUT */
    .jt-single { margin-top: 140rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 70rem; height: 70rem; margin-top: -35rem; margin-left: -35rem; }

}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){

    /* BUTTON */
    .jt-btn__basic { padding: 10rem 48rem; }

    /* SINGLE LAYOUT */
    .jt-single { margin-top: 120rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* BUTTON */
    .jt-btn__basic { padding: 10rem 38rem; }
    .jt-btn__basic.jt-btn--small .jt-icon { margin-left: 6rem; }
    html.ios .jt-btn__basic.jt-btn--small .jt-icon { top: 0; }

    /* FORM */
    .jt-form__data { margin-top: 12rem; }

    /* CATEGORY */
    .jt-category__list { display: block; margin: 0 -30rem; padding: 0 30rem; overflow: auto visible; font-size: 0; white-space: nowrap; scrollbar-width: none; }
    .jt-category__list > li { display: inline-block; }
    html.ios .jt-category__list > li { padding-bottom: 1px; }
    .jt-category__list > li + li { margin-left: 8rem; }
    .jt-category__list > li > a, .jt-category__list > li > span { min-width: 80rem; } 
    .jt-category__list.swiper-pagination-horizontal li.swiper-pagination-bullet + li.swiper-pagination-bullet { margin-left: 8rem; }
    .jt-category__title { margin-bottom: 20rem; }

    /* TABS */
    .jt-tabs__head + .jt-tabs__panels { margin-top: 48rem; }
    .jt-tabs__menu { display: block; margin: 0 -30rem; padding: 0 30rem; overflow: auto visible; font-size: 0; white-space: nowrap; scrollbar-width: none; }
    .jt-tabs__menu > li { display: inline-block; }
    html.ios .jt-tabs__menu > li { padding-bottom: 1px; }
    .jt-tabs__menu > li + li { margin-left: 8rem; }
    .jt-tabs__menu a { min-width: 80rem; }

    /* TABLE */
    .jt-table { position: relative; overflow-x: auto; margin-left: -30rem; margin-right: -30rem; padding: 0 30rem; }
    .jt-table table { display: inline-table; min-width: 100%; width: auto; }

    .wp-block-table .jt-table table td,
    .wp-block-table .jt-table table th { word-break: keep-all; }
    .wp-block-table:has(.jt-table) { margin-left: 0; margin-right: 0; }
    .wp-block-table:has(.jt-table) .jt-table { margin-left: 0; margin-right: 0; }
    .wp-block-table:has(.jt-table) .jt-table table { width: auto; }
    .wp-block-table:has(.jt-table) .jt-table + figcaption { padding: 0 30rem; }

    /* LIST COMPONENT */
    .jt-board-list__data { gap: 60rem; }

    /* SINGLE LAYOUT */
    .jt-single { margin-top: 100rem; }

    .jt-single__meta { gap: 21rem; }
    .jt-single__meta > *:not(:last-child):after { right: -11rem; top: 7rem; height: 12rem; }
    html.ios .jt-single__meta > *:not(:last-child):after { top: 8rem; }
    .jt-single__meta > *.jt-typo--06:not(:last-child):after { top: 10rem; }
    html.ios .jt-single__meta > *.jt-typo--06:not(:last-child):after { top: 9.5rem; }

    .jt-single__content { padding-bottom: 100rem; }

    .jt-single__post-item { padding: 24rem; gap: 40rem; }

    /* JT POPUP */
    .jt-popup__container { padding-right: 20rem; }
    .jt-popup__inner { padding: 40rem 20rem 40rem 40rem; }
    .jt-popup__inner::-webkit-scrollbar-thumb { border-width: 40rem; }
    .jt-popup__close-container { left: calc(100% + 10rem); }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* BUTTON */
    .jt-btn__basic { padding: 8rem 34rem 7rem; }
    html.ios .jt-btn__basic.jt-btn--small > span { top: -.5rem; }
    .jt-btn__basic.jt-btn--small .jt-icon { width: 14rem; height: 14rem; margin-left: 4rem; }

    /* FORM */
    .jt-form__fieldset { gap: 48rem; }
    .jt-form__data { margin-top: 8rem; }
    .jt-form__control { margin-top: 60rem; }

    .jt-agreement__item ul > li { padding-left: 16rem; }
    .jt-agreement__item ul > li:before { margin-top: -1rem; }
    html.ios .jt-agreement__item ul > li:before { margin-top: -.5rem; }
    .jt-agreement__item ul > li > ul > li:before { width: 5rem; }

    /* CATEGORY */
    .jt-category__list { margin: 0 -20rem; padding: 0 20rem; }
    .jt-category__title { margin-bottom: 12rem; }
    .jt-category__list > li > a, .jt-category__list > li > span { min-width: inherit; padding-bottom: 7rem; }

    /* TABS */
    .jt-tabs__head + .jt-tabs__panels { margin-top: 40rem; }
    .jt-tabs__menu { margin: 0 -20rem; padding: 0 20rem; }
    .jt-tabs__menu a { min-width: inherit; padding-bottom: 7rem; }

    /* TABLE */
    .jt-table { margin-left: -20rem; margin-right: -20rem; padding: 0 20rem; }

    .wp-block-table:has(.jt-table) .jt-table + figcaption { padding: 0 20rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 62rem; height: 62rem; margin-top: -31rem; margin-left: -31rem; }
    .jt-embed-video__overlay-btn:after { margin-top: -5rem; border-top-width: 6rem; border-bottom-width: 6rem; border-left-width: 8rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 48rem; }
    .jt-pagination .jt-pagination__numbers { margin: 0 2rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--prev { margin-right: 4rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--first { margin-right: 0; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: 4rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: 0; }

    /* LIST COMPONENT */
    .jt-board-list > li > a { padding: 20rem 0; }
    .jt-board-list__data { display: block; }
    .jt-board-list__data time { display: block; margin-top: 16rem; }
    .jt-board-list__category { margin-bottom: 6rem; }
    .jt-board-list__title { gap: 4rem; }
    .jt-board-list__title .jt-icon { width: 14rem; height: 14rem; }

    .jt-list-nothing { padding: 100rem 0; }

    /* SINGLE LAYOUT */
    .jt-single { margin-top: 80rem; }

    .jt-single__meta > *:not(:last-child):after { top: 3rem; }
    .jt-single__meta > *.jt-typo--06:not(:last-child):after { top: 9rem; }
    html.ios .jt-single__meta > *:not(:last-child):after { top: 3.5rem; }
    html.ios .jt-single__meta > *.jt-typo--06:not(:last-child):after { top: 8.5rem; }

    .jt-single__header { margin-bottom: 40rem; gap: 12rem; }
    .jt-single__content { padding-bottom: 80rem; }

    .jt-single__post-item { padding: 20rem; gap: 20rem; }

    .jt-single__control { margin-top: 48rem; }
    
    /* CF7 */
    .wpcf7-checkbox .wpcf7-list-item-label:before { top: -1.5rem; }
    .wpcf7-checkbox .wpcf7-list-item-label:after { top: 1.5rem; }

    /* JT POPUP */
    .jt-popup { padding: 0 66rem; }
    .jt-popup__container { padding-right: 15rem; }
    .jt-popup__inner { padding: 30rem 15rem 30rem 30rem; }
    .jt-popup__inner::-webkit-scrollbar-thumb { border-width: 30rem; }
    .jt-popup__close-container { max-height: calc(100vh - 20rem); }
    .jt-popup__close { width: 36rem; height: 36rem; }

    .jt-popup:not(.jt-popup--image) { padding: 60rem 20rem; }
    .jt-popup:not(.jt-popup--image) .jt-popup__close-container { max-height: inherit; height: auto; left: auto; top: auto; right: 0; bottom: calc(100% + 10rem); translate: 0; }

}