@charset "utf-8";

/*
 * File    : rwd-service.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * 1600px
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1680px
 * **************************************** */
@media (max-width: 1680px){
    

}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    .service-column__content { margin-top: 28rem; }

    .service-accordion__container { gap: 80rem; }
    .service-accordion__control { flex: 1; width: auto; }
    .service-accordion__control > a { padding: 28rem 0 20rem; }
    .service-accordion__list { flex: 1; width: auto; }

    .service-review__container { padding-right: 80rem; gap: 80rem; }
    .service-review__title span:after { width: 226rem; transform: translate(-199rem, 24rem); }

    .service-cta__object { width: 280rem; }

    body.page-template-service-bank .service-banner .article__section-title span:after { width: 36rem; }
    body.page-template-service-bank .service-column--01 .article__section-title span:after { width: 150rem; transform: translate(-377rem, -11rem); }
    body.page-template-service-bank .service-accordion .article__section-title span:after { width: 36rem; }
    body.page-template-service-bank .service-accordion .article__section-title span:before { width: 240rem; transform: translate(290rem, 120rem); }
    body.page-template-service-bank .service-column--02 .article__section-title span:after { width: 130rem; transform: translate(10rem, -2rem); }

    body.page-template-service-note .service-banner .article__section-title span:after { width: 36rem; }
    body.page-template-service-note .service-accordion .article__section-title span:before { width: 280rem; transform: translate(77rem, 119rem); }
    body.page-template-service-note .service-column--02 .article__section-title span:after { width: 36rem; transform: translate(-34rem, -88rem); }
    body.page-template-service-note .service-column--02 .article__section-title span:before { width: 240rem; transform: translate(169rem, 124rem); }

    body.page-template-service-exam .service-banner .article__section-title span:before { width: 196rem; transform: translate(2rem, 130rem); }
    body.page-template-service-exam .service-column--01 .article__section-title span:after { width: 36rem; }
    body.page-template-service-exam .service-accordion .article__section-title span:before { width: 280rem; transform: translate(28rem, 120rem); }
    body.page-template-service-exam .service-accordion .article__section-title span:after { width: 125rem; transform: translate(-30rem, 56rem); }
    body.page-template-service-exam .service-column--02 .article__section-title span:before { width: 196rem; transform: translate(2rem, 52rem); }

    body.page-template-service-textbook .service-banner .article__section-title span:after { width: 194rem; transform: translate(-194rem, 50rem); }
    body.page-template-service-textbook .service-column--02 .article__section-title span:before { width: 396rem; transform: translate(20rem, 118rem); }
    body.page-template-service-textbook .service-column--02 .article__section-title span:after { width: 36rem; transform: translate(14rem, -80rem); }

    body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:before { width: 196rem; transform: translate(18rem, 122rem); }
    body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:after { width: 36rem; }
    body.page-template-service-consulting .service-column--02:nth-child(1 of .service-column--02) .article__section-title span:before { width: 352rem; transform: translate(-3rem, 51rem); }
    body.page-template-service-consulting .service-column--02:nth-child(1 of .service-column--02) .article__section-title span:after { width: 118rem; transform: translate(24rem, 30rem) rotate(-18deg); }
    body.page-template-service-consulting .service-column--02:nth-child(2 of .service-column--02) .article__section-title span:after { width: 140rem; transform: translate(-138rem, 55rem); }

    body.page-template-service-premium .service-banner .article__section-title span:after { width: 186rem; transform: translate(-184rem, 52rem); }
    body.page-template-service-premium .service-column--02 .article__section-title span:before { width: 350rem; transform: translate(90rem, 120rem) rotate(0.5deg); }
    body.page-template-service-premium .service-column--02 .article__section-title span:after { width: 36rem; transform: translate(80rem, -80rem); }
    body.page-template-service-premium .service-accordion .article__section-title span:after { width: 240rem; transform: translate(-238rem, 56rem); }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    .service-column__content { margin-top: 24rem; }
    .service-column__desc { margin-top: 10rem; }
    
    .service-accordion__container { gap: 60rem; }
    .service-accordion__icon { width: 28rem; }
    .service-accordion__control > a { padding: 24rem 0 18rem; }

    .service-accordion--active .service-accordion__title { padding-left: 36rem; }

    .service-review__container { padding-right: 40rem; gap: 60rem; }
    .service-review__content { max-width: 500rem; }
    .service-review__title span:after { width: 220rem; transform: translate(-190rem, 20rem); }
    .service-review__quote { width: 28rem; }
    .service-review__content-desc { margin-top: 28rem; }

    .service-cta__object { width: 260rem; }
    .service-cta__title { margin-bottom: 32rem; }

    body.page-template-service-bank .service-banner .article__section-title span:after { width: 32rem; transform: translate(-10rem, -10rem); }
    body.page-template-service-bank .service-column--01 .article__section-title span:after { transform: translate(-348rem, -12rem); }
    body.page-template-service-bank .service-accordion .article__section-title span:after { width: 32rem; transform: translate(-12rem, -12rem); }
    body.page-template-service-bank .service-accordion .article__section-title span:before { width: 230rem; transform: translate(268rem, 112rem); }
    body.page-template-service-bank .service-column--02 .article__section-title span:after { width: 115rem; }

    body.page-template-service-note .service-banner .article__section-title span:after { width: 32rem; }
    body.page-template-service-note .service-accordion .article__section-title span:before { width: 260rem; transform: translate(70rem, 116rem); }
    body.page-template-service-note .service-column--02 .article__section-title span:after { width: 32rem; transform: translate(-32rem, -78rem); }
    body.page-template-service-note .service-column--02 .article__section-title span:before { width: 220rem; transform: translate(160rem, 118rem); }

    body.page-template-service-exam .service-banner .article__section-title span:before { width: 180rem; transform: translate(2rem, 119rem); }
    body.page-template-service-exam .service-column--01 .article__section-title span:after { width: 32rem; transform: translate(-12rem, -12rem); }
    body.page-template-service-exam .service-accordion .article__section-title span:before { width: 260rem; transform: translate(25rem, 112rem); }
    body.page-template-service-exam .service-accordion .article__section-title span:after { width: 120rem; transform: translate(-32rem, 50rem); }
    body.page-template-service-exam .service-column--02 .article__section-title span:before { width: 180rem; transform: translate(2rem, 50rem); }

    body.page-template-service-textbook .service-banner .article__section-title span:after { width: 180rem; transform: translate(-179rem, 47rem); }
    body.page-template-service-textbook .service-column--02 .article__section-title span:before { width: 370rem; transform: translate(20rem, 110rem); }
    body.page-template-service-textbook .service-column--02 .article__section-title span:after { width: 32rem; transform: translate(12rem, -74rem); }

    body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:before { width: 180rem; transform: translate(16rem, 113rem); }
    body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:after { width: 32rem; transform: translate(-10rem, -12rem); }
    body.page-template-service-consulting .service-column--02:nth-child(1 of .service-column--02) .article__section-title span:before { width: 320rem; transform: translate(-3rem, 47rem); }
    body.page-template-service-consulting .service-column--02:nth-child(1 of .service-column--02) .article__section-title span:after { width: 100rem; transform: translate(18rem, 30rem) rotate(-8deg); }
    body.page-template-service-consulting .service-column--02:nth-child(2 of .service-column--02) .article__section-title span:after { width: 124rem; transform: translate(-126rem, 52rem); }

    body.page-template-service-premium .service-banner .article__section-title span:after { width: 170rem; transform: translate(-168rem, 49rem); }
    body.page-template-service-premium .service-column--02 .article__section-title span:before { width: 320rem; transform: translate(87rem, 114rem) rotate(0.5deg); }
    body.page-template-service-premium .service-column--02 .article__section-title span:after { width: 32rem; transform: translate(80rem, -76rem); }
    body.page-template-service-premium .service-accordion .article__section-title span:after { width: 220rem; transform: translate(-218rem, 52rem); }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    .service-column__container { gap: 60rem 16rem; }
    .service-column__content { margin-top: 20rem; }
    .service-column__desc { margin-top: 8rem; }
    .service-column__desc br { display: none; }

    .service-accordion__container { gap: 40rem; }
    .service-accordion__icon { width: 26rem; }
    .service-accordion__desc { margin-top: 10rem; }
    .service-accordion__desc br { display: none; }
    .service-accordion__control > a { padding: 20rem 0 16rem; }

    .service-accordion--active .service-accordion__title { padding-left: 34rem; }
    
    .service-review__container { flex-direction: column; gap: 60rem; padding-right: 0; }
    .service-review__title br { display: none; }
    .service-review__title span:after { width: 190rem; transform: translate(-170rem, 20rem); }
    .service-review__content { max-width: inherit; margin-left: 36rem; }
    .service-review__quote { width: 25rem; transform: translate(-12rem, 0); }
    .service-review__content-desc { margin-top: 24rem; }
    .service-review__content-source { margin-top: 36rem; }

    .service-cta__object { width: 250rem; }
    .service-cta__title { margin-bottom: 28rem; }

    body.page-template-service-bank .service-banner .article__section-title span:after { width: 28rem; }
    body.page-template-service-bank .service-column--01 .article__section-title span:after { width: 130rem; transform: translate(-324rem, -12rem); }
    body.page-template-service-bank .service-accordion .article__section-title span:after { width: 28rem; transform: translate(-10rem, -10rem); }
    body.page-template-service-bank .service-accordion .article__section-title span:before { width: 210rem; transform: translate(246rem, 102rem); }
    body.page-template-service-bank .service-column--02 .article__section-title span:after { width: 85rem; }

    body.page-template-service-note .service-banner .article__section-title span:after { width: 28rem; }
    body.page-template-service-note .service-accordion .article__section-title span:before { width: 240rem; transform: translate(66rem, 105rem); }
    body.page-template-service-note .service-column--02 .article__section-title span:after { width: 28rem; transform: translate(-30rem, -72rem); }
    body.page-template-service-note .service-column--02 .article__section-title span:before { width: 210rem; transform: translate(144rem, 106rem); }

    body.page-template-service-exam .service-banner .article__section-title span:before { width: 168rem; transform: translate(2rem, 109rem); }
    body.page-template-service-exam .service-column--01 .article__section-title span:after { width: 28rem; transform: translate(-10rem, -10rem); }
    body.page-template-service-exam .service-accordion .article__section-title span:before { width: 240rem; transform: translate(23rem, 103rem); }
    body.page-template-service-exam .service-accordion .article__section-title span:after { width: 110rem; transform: translate(-28rem, 50rem); }
    body.page-template-service-exam .service-column--02 .article__section-title span:before { width: 170rem; transform: translate(0rem, 46rem); }

    body.page-template-service-textbook .service-banner .article__section-title span:after { width: 160rem; transform: translate(-161rem, 43rem); }
    body.page-template-service-textbook .service-column--02 .article__section-title span:before { width: 340rem; transform: translate(18rem, 100rem); }
    body.page-template-service-textbook .service-column--02 .article__section-title span:after { width: 28rem; transform: translate(10rem, -68rem); }

    body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:before { width: 164rem; transform: translate(16rem, 104rem); }
    body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:after { width: 28rem; transform: translate(-10rem, -10rem); }
    body.page-template-service-consulting .service-column--02:nth-child(1 of .service-column--02) .article__section-title span:before { width: 300rem; transform: translate(-3rem, 42rem); }
    body.page-template-service-consulting .service-column--02:nth-child(1 of .service-column--02) .article__section-title span:after { display: none; }
    body.page-template-service-consulting .service-column--02:nth-child(2 of .service-column--02) .article__section-title span:after { width: 116rem; transform: translate(-116rem, 48rem); }

    body.page-template-service-premium .service-banner .article__section-title span:after { width: 156rem; transform: translate(-154rem, 44rem); }
    body.page-template-service-premium .service-column--02 .article__section-title span:before { width: 290rem; transform: translate(80rem, 102rem) rotate(0.5deg); }
    body.page-template-service-premium .service-column--02 .article__section-title span:after { width: 28rem; transform: translate(70rem, -70rem); }
    body.page-template-service-premium .service-accordion .article__section-title span:after { width: 200rem; transform: translate(-200rem, 47rem); }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    .service-visual__container { border-radius: 8rem; padding-top: 177.58%; }
    .service-visual__bg--mobile { display: block; }
    .service-visual__bg--desktop { display: none; }

    .service-banner__image--mobile { display: block; }
    .service-banner__image--desktop { display: none; }
    .service-banner__image .jt-lazyload { padding-top: 68.96%; border-radius: 8rem; }

    .service-column__container { grid-template-columns: 1fr; gap: 32rem 12rem; }
    .service-column__media { border-radius: 8rem; }
    .service-column__content { margin-top: 16rem; }

    .service-column--02 .service-column__container { grid-template-columns: 1fr; }

    .service-accordion__container { flex-direction: column; gap: 20rem; }
    .service-accordion__desc { margin-top: 8rem; }
    .service-accordion__control { order: 2; width: 100%; }
    .service-accordion__control > a { padding: 16rem 0 12rem; }
    .service-accordion__list { width: 100%; }
    .service-accordion__item { border-radius: 8rem; }
    
    .service-review__title span:after { width: 166rem; transform: translate(-148rem, 17rem); }
    .service-review__quote { width: 25rem; transform: translate(-8rem, -2rem); }
    .service-review__content { margin-left: 32rem; }
    .service-review__content-desc { margin-top: 20rem; }
    .service-review__content-desc br { display: none; }
    .service-review__content-source { margin-top: 32rem; gap: 8rem; }
    .service-review__content-profile { width: 38rem; height: 38rem; }

    .service-cta { display: flex; align-items: center; justify-content: center; height: 100svh; }
    .service-cta__bg--desktop { display: none; }
    .service-cta__bg--mobile { display: block; }
    .service-cta__content { margin-top: 20rem; }
    .service-cta__title { margin-bottom: 24rem; }

    body.page-template-service-bank .service-banner .article__section-title span:after { display: none; }
    body.page-template-service-bank .service-column--01 .article__section-title span:after { width: 111rem; transform: translate(-165rem, -62rem); }
    body.page-template-service-bank .service-accordion .article__section-title span:after { width: 20rem; transform: translate(-7rem, -5rem); }
    body.page-template-service-bank .service-accordion .article__section-title span:before { width: 174rem; transform: translate(51rem, 142rem); }
    body.page-template-service-bank .service-column--02 .article__section-title span:after { width: 80rem; transform: translate(-16rem, -4rem) rotate(-34deg); }

    body.page-template-service-note .service-banner .article__section-title span:after { display: none; }
    body.page-template-service-note .service-accordion .article__section-title span:before { width: 210rem; transform: translate(57rem, 93rem); }
    body.page-template-service-note .service-column--02 .article__section-title span:after { width: 24rem; transform: translate(-26rem, -62rem); }
    body.page-template-service-note .service-column--02 .article__section-title span:before { width: 180rem; transform: translate(127rem, 94rem); }

    body.page-template-service-exam .service-banner .article__section-title span:before { width: 148rem; transform: translate(2rem, 96rem); }
    body.page-template-service-exam .service-column--01 .article__section-title span:after { width: 24rem; }
    body.page-template-service-exam .service-accordion .article__section-title span:before { width: 210rem; transform: translate(21rem, 90rem); }
    body.page-template-service-exam .service-accordion .article__section-title span:after { display: none; }
    body.page-template-service-exam .service-column--02 .article__section-title span:before { width: 150rem; transform: translate(0rem, 40rem); }

    body.page-template-service-textbook .service-banner .article__section-title span:after { width: 140rem; transform: translate(-141rem, 39rem); }
    body.page-template-service-textbook .service-column--02 .article__section-title span:before { width: 300rem; transform: translate(14rem, 88rem); }
    body.page-template-service-textbook .service-column--02 .article__section-title span:after { width: 24rem; transform: translate(8rem, -58rem); }

    body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:before { width: 144rem; transform: translate(88rem, 91rem); }
    body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:after { display: none; }
    body.page-template-service-consulting .service-column--02:nth-child(1 of .service-column--02) .article__section-title span:before { width: 260rem; transform: translate(-1rem, 37rem); }
    body.page-template-service-consulting .service-column--02:nth-child(2 of .service-column--02) .article__section-title span:after { width: 106rem; transform: translate(-104rem, 41rem); }

    body.page-template-service-premium .service-banner .article__section-title span:after { width: 136rem; transform: translate(-136rem, 39rem); }
    body.page-template-service-premium .service-column--02 .article__section-title span:before { width: 260rem; transform: translate(-60rem, 143rem) rotate(0.5deg); }
    body.page-template-service-premium .service-column--02 .article__section-title span:after { display: none; }
    body.page-template-service-premium .service-accordion .article__section-title span:after { width: 180rem; transform: translate(-177rem, 40rem); }

}