@charset "utf-8";

/*
 * File    : sub-solutions.css
 * Author  : STUDIO-JT (KMS)
 *
 * MAIN
 * SINGLE
 * HOVER
 */



/* **************************************** *
 * MAIN
 * **************************************** */
/* COLLECTION */
.solution-collection { margin-top: 120rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 80rem 60rem; }

.solution-collection__link { display: block; color: inherit; }

.solution-collection__thumb { background: var(--color-gray-100); }
.solution-collection__thumb .jt-lazyload { padding-top: 62.68%; }
.solution-collection__thumb .jt-lazyload img { top: 50%; transform: translateY(-50%); }

.solution-collection__content { padding-top: 35rem; }
.solution-collection__title > span { border-bottom: 2rem solid transparent; transition: border .3s; }
.solution-collection__desc { margin-top: 10rem; }



/* **************************************** *
 * SINGLE
 * **************************************** */
/* LAYOUT */
body:is(.single-by-industry, .single-by-applications) .main-container { padding-bottom: 0; }

body:is(.single-by-industry, .single-by-applications) .article-visual__bg:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.4) 100%); }
body:is(.single-by-industry, .single-by-applications) .article-visual__content { flex-direction: column; align-items: start; gap: 60rem; }

/* PARTICULAR */
.solution-particular { display: grid; grid-template-columns: 2.2fr 1fr; gap: 120rem; margin-top: 120rem; }

.solution-particular__reference-list > li + li { margin-top: -2px; }
.solution-particular__reference-list a { display: block; padding: 14rem 18rem; border: 2px solid var(--color-black); color: inherit; transition: background-color .3s; }
.solution-particular__reference-list b { display: flex; align-items: center; gap: 10rem; }
.solution-particular__reference-list b > .jt-accent-icon { flex-shrink: 0; width: 18rem; }
.solution-particular__reference-list p { margin-top: 8rem; }

/* RELATED */
.solution-related { display: flex; flex-direction: column; gap: 120rem; margin-top: 120rem; }

.solution-related__title { margin-bottom: 20rem; }

/* BANNER */
.solution-banner { margin-top: 120rem; padding: 120rem 0 140rem; background: linear-gradient(180deg, #B7CEE3 0%, #FFF 100%); }
.solution-banner__inner { display: flex; flex-direction: column; align-items: center; gap: 50rem; text-align: center; }

.solution-banner a { display: inline-block; padding: 15rem 80rem 17rem; color: var(--color-white); background: var(--color-black); transition: background-color .3s; }



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

    /* MAIN */
    .solution-collection__link:hover .solution-collection__title > span { border-bottom-color: var(--color-black); }

    /* SINGLE */
    .solution-particular__reference-list a:hover { background: var(--color-primary); }
    .solution-particular__reference-list a:hover .jt-accent-icon path:not([fill="black"]) { fill: var(--color-white); }

    .solution-banner a:hover { background: var(--color-primary); }

}