@charset "utf-8";

/*
 * File    : sub-service.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * SERVICE
 * BANK
 * NOTE
 * EXAM
 * TEXTBOOK
 * CONSULTING
 * PREMIUM
 * HOVER
 */



/* **************************************** *
 * SERVICE
 * **************************************** */
/* LAYOUT */
.main-container:has(.service-cta) { padding-bottom: 0; }

/* VISUAL */
.service-visual__container { position: relative; padding-top: 37.5%; border-radius: 16rem; overflow: hidden; }
.service-visual__bg { position: absolute; inset: 0; }
.service-visual__bg--mobile { display: none; }
.service-visual__picture { position: absolute; inset: 0; background: no-repeat center center / cover; }

/* BANNER */
.service-banner__image--mobile { display: none; }
.service-banner__image .jt-lazyload { padding-top: 37.5%; border-radius: 16rem; overflow: hidden; }
.service-banner__image .jt-lazyload img { height: 100%; object-fit: cover; }

/* COLUMN */
.service-column__container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80rem 20rem; }
.service-column__media { position: relative; aspect-ratio: 1 / 1; border-radius: 16rem; overflow: hidden; }
.service-column__media .jt-lazyload { height: 100%; }
.service-column__media .jt-lazyload img { height: 100%; object-fit: cover; }
.service-column__content { text-align: center; margin-top: 32rem; }
.service-column__desc { margin-top: 12rem; color: var(--color-gray-800); }

.service-column--02 .service-column__container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-column--02 .service-column__media { aspect-ratio: 1 / 0.7594; }

/* ACCORDION */
.service-accordion__container { display: flex; justify-content: space-between; align-items: center; gap: 100rem; }
.service-accordion__control { width: 520rem }
.service-accordion__control > a { display: block; padding: 32rem 0 24rem; box-shadow: 0 1px 0 0 var(--color-gray-400); }
.service-accordion__control > a:first-child { padding-top: 0; }
.service-accordion__title { position: relative; display: flex; align-items: center;color: var(--color-gray-600); transition: color .3s, padding .3s; }
.service-accordion__icon { position: absolute; left: 0; width: 32rem; transform: scale(0); transition: transform .3s; }
.service-accordion__icon svg { display: block; width: 100%; height: auto; }
.service-accordion__desc { color: var(--color-gray-800); margin-top: 12rem; display: none; }
.service-accordion__list { position: relative; width: 790rem; aspect-ratio: 1 / 0.9113; }
.service-accordion__item { position: absolute; inset: 0; border-radius: 16rem; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.service-accordion__item .jt-lazyload { height: 100%; }
.service-accordion__item .jt-lazyload img { height: 100%; object-fit: cover; }

.service-accordion--active.service-accordion__item { opacity: 1; visibility: visible; }
.service-accordion--active .service-accordion__title { color: var(--color-black); padding-left: 44rem }
.service-accordion--active .service-accordion__icon { transform: scale(1); }

/* REVIEW */
.service-review { background: var(--color-gray-100); }
.service-review__title span { position: relative; z-index: 1; }
.service-review__title span:after { content: ''; position: absolute; width: 231rem; aspect-ratio: 1 / 0.3476; background: url(../images/icon/icon-point-10.svg) no-repeat center center / 100%; transform: translate(-199rem, 24rem); z-index: -1; }
.service-review__container { display: flex; gap: 100rem; justify-content: space-between; padding-right: 105rem; }
.service-review__content { position: relative; max-width: 550rem; }
.service-review__content-desc { color: var(--color-gray-800); margin-top: 32rem; }
.service-review__content-desc p + p { margin-top: 12rem; }
.service-review__content-source { display: flex; align-items: center; gap: 10rem; margin-top: 40rem; }
.service-review__content-profile { position: relative; width: 44rem; height: 44rem; border-radius: 99rem; overflow: hidden; }
.service-review__content-profile .jt-lazyload { height: 100%; }
.service-review__content-profile .jt-lazyload__color-preview { background: var(--color-gray-300) }
.service-review__content-info { color: var(--color-gray-800); }
.service-review__quote { position: absolute; top: 0; right: 100%; width: 31rem; transform: translate(-18rem, 0); }
.service-review__quote svg { display: block; width: 100%; }

/* CTA */
.service-cta__bg { position: absolute; inset: 0; background: no-repeat center center / cover; }
.service-cta__bg--mobile { display: none; }
.service-cta__object { max-width: 300rem; margin: 0 auto;}
.service-cta__object .jt-lazyload { padding-top: 107.83% }
.service-cta__content { text-align: center; }
.service-cta__title { margin-bottom: 36rem; }



/* **************************************** *
 * BANK
 * **************************************** */
body.page-template-service-bank .service-banner .article__section-title span:after { width: 43rem; aspect-ratio: 1 / 1.0697; background-image: url(../images/icon/icon-point-01.svg); transform: translate(-15rem, -9rem); }
body.page-template-service-bank .service-column--01 .article__section-title span:after { width: 164rem; aspect-ratio: 1 / 0.0487; background-image: url(../images/icon/icon-point-07.svg); transform: translate(-399rem, -8rem); }
body.page-template-service-bank .service-accordion .article__section-title span:before { width: 250rem; aspect-ratio: 1 / 0.1185; background-image: url(../images/icon/icon-point-08.svg); transform: translate(301rem, 123rem); }
body.page-template-service-bank .service-accordion .article__section-title span:after { width: 43rem; aspect-ratio: 1 / 1.0697; background-image: url(../images/icon/icon-point-01.svg); transform: translate(-14rem, -12rem); }
body.page-template-service-bank .service-column--02 .article__section-title span:after { width: 145rem; aspect-ratio: 1 / 0.9517; background-image: url(../images/icon/icon-point-09.svg); transform: translate(-6rem, -2rem); }



/* **************************************** *
 * NOTE
 * **************************************** */
body.page-template-service-note .service-banner .article__section-title span:after { width: 43rem; aspect-ratio: 1 / 1.0697; background-image: url(../images/icon/icon-point-01.svg); transform: translate(-14rem, -16rem); }
body.page-template-service-note .service-accordion .article__section-title span:before { width: 290rem; aspect-ratio: 1 / 0.1185; background-image: url(../images/icon/icon-point-08.svg); transform: translate(82rem, 124rem); }
body.page-template-service-note .service-column--02 .article__section-title span:before { width: 251rem; aspect-ratio: 1 / 0.04; background-image: url(../images/icon/icon-point-05.svg); transform: translate(173rem, 127rem); }
body.page-template-service-note .service-column--02 .article__section-title span:after { width: 43rem; aspect-ratio: 1 / 1.0697; background-image: url(../images/icon/icon-point-01.svg); transform: translate(-37rem, -90rem); }



/* **************************************** *
 * EXAM
 * **************************************** */
body.page-template-service-exam .service-banner .article__section-title span:before { width: 208rem; aspect-ratio: 1 / 0.04; background-image: url(../images/icon/icon-point-05.svg); transform: translate(-4rem, 136rem); }
body.page-template-service-exam .service-column--01 .article__section-title span:after { width: 43rem; aspect-ratio: 1 / 1.0697; background-image: url(../images/icon/icon-point-01.svg); transform: translate(-15rem, -14rem); }
body.page-template-service-exam .service-accordion .article__section-title span:before { width: 290rem; aspect-ratio: 1 / 0.0868; background-image: url(../images/icon/icon-point-15.svg); transform: translate(27rem, 126rem); }
body.page-template-service-exam .service-accordion .article__section-title span:after { width: 137rem; aspect-ratio: 1 / 1.0583; background-image: url(../images/icon/icon-point-16.svg); transform: translate(-46rem, 50rem); }
body.page-template-service-exam .service-column--02 .article__section-title span:before { width: 210rem; aspect-ratio: 1 / 0.1185; background-image: url(../images/icon/icon-point-08.svg); transform: translate(-5rem, 54rem); }



/* **************************************** *
 * TEXTBOOK
 * **************************************** */
body.page-template-service-textbook .service-banner .article__section-title span:after { width: 202rem; aspect-ratio: 1 / 0.1185; background-image: url(../images/icon/icon-point-08.svg); transform: translate(-200rem, 51rem); }
body.page-template-service-textbook .service-column--02 .article__section-title span:before { width: 406rem; aspect-ratio: 1 / 0.0583; background-image: url(../images/icon/icon-point-17.svg); transform: translate(22rem, 124rem); }
body.page-template-service-textbook .service-column--02 .article__section-title span:after { width: 43rem; aspect-ratio: 1 / 1.0697; background-image: url(../images/icon/icon-point-01.svg); transform: translate(14rem, -87rem); }



/* **************************************** *
 * CONSULTING
 * **************************************** */
body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:before { width: 206rem; aspect-ratio: 1 / 0.1185; background-image: url(../images/icon/icon-point-08.svg); transform: translate(15rem, 126rem); }
body.page-template-service-consulting .service-banner:nth-child(1 of .service-banner) .article__section-title span:after { width: 43rem; aspect-ratio: 1 / 1.0697; background-image: url(../images/icon/icon-point-01.svg); transform: translate(-14rem, -14rem); }
body.page-template-service-consulting .service-column--02:nth-child(1 of .service-column--02) .article__section-title span:before { width: 362rem; aspect-ratio: 1 / 0.0583; background-image: url(../images/icon/icon-point-17.svg); transform: translate(-4rem, 51rem); }
body.page-template-service-consulting .service-column--02:nth-child(1 of .service-column--02) .article__section-title span:after { width: 128rem; aspect-ratio: 1 / 1.2637; background-image: url(../images/icon/icon-point-14.svg); transform: translate(0rem, 20rem) rotate(-18deg); }
body.page-template-service-consulting .service-column--02:nth-child(2 of .service-column--02) .article__section-title span:after { width: 152rem; aspect-ratio: 1 / 0.0487; background-image: url(../images/icon/icon-point-07.svg); transform: translate(-147rem, 60rem); }



/* **************************************** *
 * PREMIUM
 * **************************************** */
body.page-template-service-premium .service-banner .article__section-title span:after { width: 200rem; aspect-ratio: 1 / 0.1185; background-image: url(../images/icon/icon-point-08.svg); transform: translate(-193rem, 51rem); }
body.page-template-service-premium .service-column--02 .article__section-title span:before { width: 372rem; aspect-ratio: 1 / 0.0583; background-image: url(../images/icon/icon-point-17.svg); transform: translate(87rem, 125rem) rotate(0.5deg); }
body.page-template-service-premium .service-column--02 .article__section-title span:after { width: 43rem; aspect-ratio: 1 / 1.0697; background-image: url(../images/icon/icon-point-01.svg); transform: translate(85rem, -87rem); }
body.page-template-service-premium .service-accordion .article__section-title span:after { width: 260rem; aspect-ratio: 1 / 0.04; background-image: url(../images/icon/icon-point-05.svg); transform: translate(-250rem, 60rem); }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* SERVICE */
    .service-accordion__control > a:hover .service-accordion__title { color: var(--color-black); }

}