@charset "utf-8";

/*
 * File    : rwd-strap.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    /* FEATURE */
    .jt-feature > li { gap: 60rem; }

    /* BOARD */
    .jt-board { padding-bottom: 120rem; }
    .jt-board__flex > li > a { gap: 140rem; }
    .jt-board__flex-thumb { width: 35%; }

    .jt-board__highlight-thumb { width: 40%; }
    .jt-board__highlight .swiper-control { right: 670rem; }

    /* SEARCH */
    .jt-search__field { width: 520rem; }

    /* SINGLE */
    body.single:not(.single-solution) .main-container { padding-top: 200rem;  padding-bottom: 120rem; }
    .jt-single__control { margin-top: 100rem; }
    .jt-single__nav { left: -20rem; transform: translate(-100%, 0) }
    .jt-single__nav-inner { width: 250rem; padding: 24rem; }
    .jt-single__nav-head { padding-bottom: 20rem; margin-bottom: 20rem; }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    /* BUTTON */
    .jt-btn__basic { padding: 10rem 34rem; }

    /* FORM */
    .jt-form { gap: 50rem; }
    .jt-form__fieldset { gap: 36rem; }
    .jt-form__entry--harf { width: calc(50% - 18rem); }
    .jt-form__except-divider { margin-bottom: 50rem; }

    /* FEATURE */
    .jt-feature > li { gap: 40rem; }
    .jt-feature__icon .jt-icon { width: 50rem; }

    .jt-feature.jt-feature--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* CTA */
    .jt-cta__control { margin-top: 28rem; }

    /* PROGRESS */
    .jt-progress__item { gap: 30rem; }

    /* BOARD */
    .jt-board { padding-bottom: 100rem; }
    .jt-board__head { padding: 40rem 0; }

    .jt-board__flex > li > a { gap: 100rem; }
    .jt-board__flex-meta { margin-bottom: 16rem; }

    .jt-board__grid > li > a { padding: 30rem; gap: 30rem; }
    .jt-board__grid-content:nth-child(2) { margin-bottom: 30rem; }

    .jt-board__highlight { margin-bottom: 40rem; }
    .jt-board__highlight a { padding: 40rem; gap: 80rem; }
    .jt-board__highlight-content { padding-bottom: 100rem; }
    .jt-board__highlight-desc { margin-top: 40rem; }
    .jt-board__highlight .swiper-control { left: 40rem; right: 536rem; bottom: 40rem; }

    .jt-board__nothing { height: 500rem; }

    /* CATEGORY */
    .jt-category { padding: 30rem 0; }

    /* SEARCH */
    .jt-search__field { width: 400rem; }

    /* SINGLE */
    body.single:not(.single-solution) .main-container { padding-top: 180rem; padding-bottom: 100rem; }
    .jt-single__control { margin-top: 80rem; }
    .jt-single__nav { display: none; }
    .jt-single__form { padding: 60rem 40rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* BUTTON */
    .jt-btn__basic { padding: 10rem 30rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 60rem; height: 60rem; margin-left: -30rem; margin-top: -30rem; }

    /* FORM */
    .jt-form { gap: 40rem; }
    .jt-form__fieldset { gap: 32rem 24rem; }
    .jt-form__entry--harf { width: calc(50% - 12rem); }
    .jt-form__label { margin-bottom: 10rem; }
    .jt-form__except-divider { margin-bottom: 40rem; }

    .jt-agreement .jt-checkbox label, 
    .jt-agreement .jt-radiobox label { padding-left: 30rem; }
    .jt-agreement .jt-checkbox label > span:before, .jt-agreement .jt-radiobox label > span:before { width: 22rem; height: 22rem; }
    .jt-agreement .jt-checkbox label > span:after { width: 6rem; height: 12rem; left: 8rem; }
    .jt-agreement .jt-radiobox label > span:after { width: 10rem; height: 10rem; left: 6rem; top: 8rem; }

    .choices__inner { padding: 15rem 40rem 15rem 17rem; }
    .choices[data-type*=select-one] .choices__inner { padding-bottom: 15rem; }
    .choices__list[aria-expanded] .choices__item { padding: 15rem 17rem; }
    html.mobile .jt-choices__wrap > select { height: 56rem; line-height: 56rem; padding: 0 40rem 0 17rem; }

    /* FEATURE */
    .jt-feature { gap: 16rem; grid-template-columns: 1fr; }
    .jt-feature > li { padding: 30rem; gap: 30rem; }
    .jt-feature__icon .jt-icon { width: 40rem; }
    .jt-feature__content-control { margin-top: 30rem; }

    .jt-feature.jt-feature--secondary { grid-template-columns: 1fr; }
    .jt-feature.jt-feature--secondary > li { gap: 20rem; }

    /* CTA */
    .jt-cta { height: 400rem; }
    .jt-cta__content { margin: 0 30rem; }
    .jt-cta__title br { display: none; }
    .jt-cta__desc br { display: none; }
    .jt-cta__control { margin-top: 24rem; }

    /* PROGRESS */
    .jt-progress { margin: 0 -30rem; padding: 0 30rem; overflow: auto; scrollbar-width: none; }
    .jt-progress::-webkit-scrollbar { display: none; }
    .jt-progress__item { flex: none; width: 280rem; gap: 24rem; }

    /* BOARD */
    .jt-board { padding-bottom: 80rem; }
    .jt-board__head { padding: 30rem 0; }

    .jt-board__flex > li > a { gap: 60rem; padding: 30rem 0; }
    .jt-board__flex > li:has(.jt-board__flex-outlink) .jt-board__flex-content { padding-bottom: 50rem; }
    .jt-board__flex-meta { margin-bottom: 12rem; }
    .jt-board__flex-info { flex-direction: column; gap: 4rem; margin-top: 16rem; }
    .jt-board__flex-info > * + *:before { display: none; }
    .jt-board__flex-tags { margin-top: 40rem; }
    
    .jt-board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40rem 16rem; }
    .jt-board__grid > li > a { padding: 20rem; gap: 20rem; }
    .jt-board__grid-content:nth-child(2) { margin-bottom: 20rem; }
    .jt-board__grid-info { margin-top: 16rem; }

    .jt-board__highlight a { flex-direction: column; padding: 30rem; gap: 30rem; }
    .jt-board__highlight-thumb { order: 1; width: 100%; }
    .jt-board__highlight-content { order: 2; padding-bottom: 80rem; }
    .jt-board__highlight-info { margin-top: 16rem; }
    .jt-board__highlight-desc { margin-top: 30rem; }
    .jt-board__highlight .swiper-control { left: 30rem; right: 30rem; bottom: 30rem; }

    .jt-board__nothing { height: 420rem; }

    /* CATEGORY */
    .jt-category { padding: 30rem 0; }
    .jt-category ul { flex-wrap: nowrap; margin: 0 -30rem; padding: 0 30rem; overflow: auto; scrollbar-width: none; }
    .jt-category ul::-webkit-scrollbar { display: none; }
    .jt-category li { flex: none; }

    /* SEARCH */
    .jt-search__field { width: 320rem; }
    .jt-search__reset { width: 24rem; height: 24rem; }

    /* SINGLE */
    body.single:not(.single-solution) .main-container { padding-top: 140rem; padding-bottom: 80rem; }
    .jt-single__category { margin-bottom: 30rem; }
    .jt-single__control { margin-top: 60rem; }
    .jt-single__form { padding: 50rem 30rem; }
    .jt-single__explain { padding: 30rem; }
    .jt-single__explain-label { margin-bottom: 20rem; }
    .jt-single__explain-logo { height: 60rem; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* BUTTON */
    .jt-btn__basic { border-width: 1px; padding: 11rem 27rem; gap: 6rem; }
    .jt-btn__basic .jt-icon { width: 20rem; }

    /* FORM */
    .jt-form__entry--harf { width: 100%; }
    .jt-form__label { margin-bottom: 6rem; }
    .jt-form__explain { margin-top: 6rem; }
    .jt-form__valid { margin-top: 6rem; }
    .jt-form__except-divider { margin-bottom: 32rem; }
    
    .jt-checkbox label > span:before, .jt-radiobox label > span:before { top: 4rem; }
    .jt-checkbox label > span:after { top: 6rem; }
    .jt-radiobox label > span:after { top: 9rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 48rem; height: 48rem; margin-left: -24rem; margin-top: -24rem; }

    /* SWIPER */
    .swiper-navigation .swiper-button { width: 36rem; height: 36rem; }
    .swiper-navigation .swiper-button .jt-icon { width: 12rem; }

    /* FEATURE */
    .jt-feature { gap: 10rem; }
    .jt-feature > li { padding: 20rem; gap: 20rem; }
    .jt-feature__content-title { margin-bottom: 6rem; }
    .jt-feature__content-control { margin-top: 20rem; }

    .jt-feature.jt-feature--secondary > li { gap: 10rem; }

    /* CTA */
    .jt-cta { height: 360rem; }
    .jt-cta__content { margin: 0 20rem; }

    /* PROGRESS */
    .jt-progress { gap: 10rem; margin: 0 -20rem; padding: 0 20rem; }
    .jt-progress__item { width: 240rem; gap: 20rem; }

    /* BOARD */
    .jt-board { padding-bottom: 60rem; }
    .jt-board__head { padding: 20rem 0; }

    .jt-board__flex > li > a { flex-direction: column; gap: 20rem; padding: 20rem 0; }
    .jt-board__flex > li:has(.jt-board__flex-outlink) .jt-board__flex-content { padding-bottom: 40rem; }
    .jt-board__flex-thumb { order: 1; width: 100%; }
    .jt-board__flex-content { order: 2; }
    .jt-board__flex-meta { margin-bottom: 8rem; }
    .jt-board__flex-info { margin-top: 12rem; }
    .jt-board__flex-tags { margin-top: 20rem; }

    .jt-board__grid { grid-template-columns: 1fr; gap: 20rem 10rem; }
    .jt-board__grid-info { margin-top: 12rem; }
    .jt-board__grid-outlink .jt-icon { width: 16rem; }

    .jt-board__highlight a { padding: 20rem; gap: 20rem; }
    .jt-board__highlight-info { margin-top: 12rem; }
    .jt-board__highlight-desc { margin-top: 20rem; }
    .jt-board__highlight .swiper-control { left: 20rem; right: 20rem; bottom: 20rem; }

    .jt-board__nothing { height: 360rem; gap: 8rem; }
    .jt-board__control { margin-top: 40rem; }

    /* CATEGORY */
    .jt-category { padding: 20rem 0; }
    .jt-category ul { margin: 0 -20rem; padding: 0 20rem; }

    /* SEARCH */
    .jt-search__field { width: 220rem; }
    .jt-search__input { height: 42rem; }
    .jt-search__reset { width: 20rem; height: 20rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 40rem; }

    /* SINGLE */
    body.single:not(.single-solution) .main-container { padding-top: 100rem; padding-bottom: 60rem; }
    .jt-single .jt-breadcrumb__separator span { width: 6rem; height: 12rem; }
    .jt-single__header { padding-bottom: 40rem; margin-bottom: 40rem; }
    .jt-single__category { margin-bottom: 20rem; }
    .jt-single__meta { margin-top: 12rem; }
    .jt-single__tags { margin-top: 40rem; }
    .jt-single__control { margin-top: 40rem; }
    .jt-single__form { padding: 40rem 20rem; margin-top: 40rem; }
    .jt-single__form-title { margin-bottom: 32rem; }
    .jt-single__explain { padding: 20rem; margin-top: 40rem; }
    .jt-single__explain-label { margin-bottom: 16rem; }
    .jt-single__explain-title { margin-bottom: 4rem; }

}