@charset "utf-8";

/*
 * File       : sub.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.1
 *
 * Dependency : css/reset.css
 *              css/ke-strap.css
 *
 * SUMMARY:
 * 01) DEVELOPER
 * 02) ABOUT
 * 03) NEWS
 * 04) CASE
 * 05) INQUIRY
 * 06) BOOSTUP
 * 07) MARKETING (hold)
 */



/* **************************************** *
 * DEVELOPER
 * **************************************** */
body.page-template-developer .article { padding-bottom: 0; }
body.page-template-developer .article-header { margin-bottom: 0; }
body.page-template-developer .article-intro { margin-top: 0; }

body.page-template-developer .global-inquiry-banner__obj { background-size: cover; background-position: center center; }
body.page-template-developer .global-inquiry-banner__typo { color: #fff; }

/* CONTAINER */
.developer-section { padding: 160rem 0; }

.developer-column:after { content: ''; display: table; clear: both; }
.developer-column__title { float: left; width: 256rem; padding-right: 44rem; }
.developer-column__name { font-size: 18rem; line-height: 1.66; font-weight: 600; }
.developer-column__content { float: right; width: -webkit-calc(100% - 256rem); width: calc(100% - 256rem); }
.developer-column__content > *:first-child { margin-top: 0; }
.developer-column__content > *:last-child { margin-bottom: 0; }

/* VISUAL */
.developer-visual { padding-top: 48rem; }
.developer-visual__bg { width: 100%; padding-top: 57.8%; margin-top: -192rem; background: no-repeat center center; background-size: cover; }

/* STORY */
.developer-story { background: #f8f8f8; }

.developer-story__list { display: grid; grid-template-columns: 1fr 1fr 1fr; -webkit-column-gap: 36rem; -moz-column-gap: 36rem; column-gap: 36rem; }
.developer-story__list-thumb { border-radius: 20rem; overflow: hidden; }
.developer-story__list-thumb .ke-lazyload { padding-top: 60.92%; }
.developer-story__list-content { margin-top: 31rem; }
.developer-story__list-content h2 { font-size: 16rem; line-height: 1.87; letter-spacing: -0.01em; font-weight: 600; color: #FFB500; }
.developer-story__list-content p { margin-top: 11rem; font-size: 21rem; line-height: 1.52; font-weight: 600; }
.developer-story__list-content .ke-btn__point  { margin-top: 26rem; margin-bottom: -10rem; }

/* NEWS */
.developer-news { overflow: hidden; }

.developer-news__slider { position: relative; }
.developer-news__slider .component-slider { margin-top: 0; margin-bottom: 0; }
.developer-news__slider .component-slider:nth-child(1):before { display: none; }
.developer-news__slider .component-slider .swiper-container { overflow: visible; }
.developer-news__slider .component-slider__image img { display: block; width: 100%; height: auto; }
html.desktop .developer-news__slider:hover .swiper-navigation:not(.swiper-button-disabled) { opacity: 1; visibility: visible; }

/* BLOG */
.developer-blog { background: #f8f8f8; }

.developer-blog__data { display: grid; grid-template-columns: 1fr 1fr; row-gap: 105rem; -webkit-column-gap: 36rem; -moz-column-gap: 36rem; column-gap: 36rem; }
.developer-blog__data-thumb { border-radius: 20rem; overflow: hidden; }
.developer-blog__data-thumb .ke-lazyload { padding-top: 60.92%; }
.developer-blog__data-thumb img { border-radius: 20rem; }
.developer-blog__data-content { margin-top: 31rem; }
.developer-blog__data-title { font-size: 21rem; line-height: 1.52; font-weight: 600; }
.developer-blog__data-action { margin-top: 8rem; margin-bottom: -10rem; font-size: 0; }



/* **************************************** *
 * ABOUT
 * **************************************** */
body.page-template-info-about .article-intro { margin-top: 0; }

.about-message:after { content: ''; display: table; clear: both; }
.about-message + .about-message { margin-top: 120rem; padding-top: 120rem; border-top: 1rem solid #eee; }
.about-message__title { float: left; width: 39%; padding-right: 36rem; font-size: 44rem; font-weight: 600; line-height: 1.18; }
.about-message__content { float: left; width: 61%; }
.about-message__content b { display: block; font-size: 21rem; line-height: 1.61; }
.about-message__content p { margin-top: 30rem; font-size: 16rem; font-weight: 400; line-height: 1.87; letter-spacing: -0.01em; color: #666; }
.about-message__content p > span { display: block; }
.about-message__content p > span > a { color: #666; border-bottom: 1rem solid transparent; -webkit-transition: border .3s; transition: border .3s; }
.about-message__buttons { margin-top: 36rem; font-size: 0; }
.about-message__buttons .ke-btn__basic { margin-right: 10rem; }
.about-message__buttons .ke-btn__basic:last-child { margin-right: 0; }
.about-message__content > *:first-child { margin-top: 0; }

html.desktop .about-message__content p > span > a:hover { border-color: #666;; }

/* VISUAL */
.about-visual { padding-top: 48rem; }

/* BROWSE */
.about-browse__list { white-space: nowrap; overflow: hidden; }
.about-browse__item { display: inline-block; vertical-align: top; width: 512rem; padding: 0 18rem; }

.about-browse__thumb { position: relative; border-radius: 20rem; overflow: hidden; }
.about-browse__thumb .ke-lazyload { padding-top: 71.42%; }
.about-browse__thumb img { border-radius: 20rem; }

.about-browse__title { display: block; margin-top: 22rem; font-size: 14rem; font-weight: 600; line-height: 1.35; white-space: normal; color: #aaa; }

/* INTRO */
.about-intro { padding-top: 160rem; }

.about-intro__logo { width: 258rem; margin-top: 2rem; }
.about-intro__logo .ke-lazyload { padding-top: 13.95%; }

.about-intro__movie { margin-top: 95rem; }

/* PHILOSOPHY */
.about-philosophy { padding: 160rem 0; }

.about-philosophy__title { font-size: 21rem; line-height: 1.52; font-weight: 600; }

.about-philosophy__slogan { margin: 61rem 0; font-size: 0; }
html.safari .about-philosophy__slogan { white-space: nowrap; }
.about-philosophy__slogan > div { display: inline-block; vertical-align: top; margin-right: 15rem; }
.about-philosophy__slogan > div:last-child { margin-right: 0; }
.about-philosophy__slogan b,
.about-philosophy__slogan span { font-size: 58rem; line-height: 1.2; font-weight: 600; }
.about-philosophy__slogan p { margin-top: 18rem; font-size: 21rem; line-height: 1.52; font-weight: 600; }
.about-philosophy__slogan > div:nth-child(2) p { padding-left: 2rem; }
.about-philosophy__slogan-bracket > span:first-child { margin-right: 158rem; }

.about-philosophy__desc { font-size: 16rem; font-weight: 400; line-height: 1.87; letter-spacing: -0.01em; color: #666; }

/* SLOGAN */
.about-slogan { padding: 180rem 0; position: relative; background: #f8f8f8; overflow: hidden; }

.about-slogan__image { width: 983rem; height: 543rem; position: absolute; top: 50%; left: 50%; margin-left: 195rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-size: cover; }

.about-slogan__keyword { width: 570rem; margin-bottom: -18rem; font-size: 0; }
.about-slogan__keyword > * { display: inline-block; vertical-align: middle; margin-bottom: 18rem; }
.about-slogan__keyword > *:nth-child(odd) { margin-right: 19rem; }
.about-slogan__keyword img { display: block; width: 100%; height: auto; }
.about-slogan__keyword-connect { width: 334rem; }
.about-slogan__keyword-solve { width: 211rem; }
.about-slogan__keyword-create { width: 268rem; }
.about-slogan__keyword-ai { width: 193rem; }

.about-slogan__point { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; -webkit-column-gap: 36rem; -moz-column-gap: 36rem; column-gap: 36rem; width: 988rem; margin-top: 100rem; }
.about-slogan__point b { display: block; margin-bottom: 15rem; padding-bottom: 9rem; font-size: 21rem; font-weight: 600; line-height: 1.52; border-bottom: 1rem solid rgba(0,0,0,0.12); }
.about-slogan__point p { font-size: 18rem; font-weight: 400; line-height: 1.66; color: #666; }

/* LOCATION */
.about-location { padding-top: 160rem; }
.about-location__map { height: 560rem; margin-top: 80rem; position: relative; background: #f8f8f8; border-radius: 20rem; overflow: hidden; }
html.mobile .about-location__map:after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }



/* **************************************** *
 * NEWS
 * **************************************** */
body.page-template-info-news .article-body,
body.page-template-info-news-press .article-body,
body.page-template-info-news-about .article-body { min-height: inherit; }



/* **************************************** *
 * CASE
 * **************************************** */
.case-filter { font-size: 0; margin-bottom: 40rem; }

/* LABEL */
.case-filter__label { display: inline-block; margin-bottom: 20rem; padding: 10rem 53rem 10rem 29rem; position: relative; border: 3rem solid #ddd; border-radius: 28rem; cursor: pointer; -webkit-transition: border .3s, background .3s; transition: border .3s, background .3s; }
.case-filter__label > span { display: inline-block; vertical-align: middle; min-width: 132rem; font-size: 0; -webkit-transition: color .3s; transition: color .3s; }
.case-filter__label > span > * { display: inline; vertical-align: middle; font-size: 18rem; font-weight: 600; line-height: 1.66; font-style: normal; }
.case-filter__label > .ke-guide--icon { position: absolute; width: 16rem; right: 25rem; top: -webkit-calc(50% + 1rem); top: calc(50% + 1rem); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform cubic-bezier(0.22, 0.61, 0.36, 1) .3s; transition: -webkit-transform cubic-bezier(0.22, 0.61, 0.36, 1) .3s; transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .3s; transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .3s, -webkit-transform cubic-bezier(0.22, 0.61, 0.36, 1) .3s; }
.case-filter__label > .ke-guide--icon path { stroke: #191919; -webkit-transition: stroke .3s; transition: stroke .3s; }

.case-filter__label.case-filter__label--current { background: rgba(255, 255, 0, 0.05); border-color: #FFE100; }
.case-filter__label.case-filter__label--current > span { color: #FFB500; }
.case-filter__label.case-filter__label--current > .ke-guide--icon path { stroke: #FFB500; }

.case-filter.case-filter--open .case-filter__label > .ke-guide--icon { top: 50%; -webkit-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); }

/* CONTAINER */
.case-filter__content { display: none; margin-bottom: 80rem; background: #f8f8f8; border-radius: 20rem; overflow: hidden; }
.case-filter__content-inner { padding: 51rem 50rem 96rem; position: relative; }

/* DATA */
.case-filter__data { display: grid; grid-template-columns: 1fr 1fr; -webkit-column-gap: 36rem; -moz-column-gap: 36rem; column-gap: 36rem; }
.case-filter__data b { display: block; margin-bottom: 20rem; font-size: 16rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.87; }

.case-filter__list { margin: -4rem; font-size: 0; }
.case-filter__list label { display: inline-block; margin: 4rem; padding: 4rem 15rem; position: relative; font-size: 14rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.85; color: #666; background: #fff; border: 1rem solid #eee; border-radius: 5rem; -webkit-transition: color .3s; transition: color .3s; cursor: pointer; }
.case-filter__list label input { position: absolute; opacity: 0; cursor: pointer; }
.case-filter__list label:after { content: ''; position: absolute; top: -1rem; bottom: -1rem; left: -1rem; right: -1rem; border: 2rem solid #FFE100; border-radius: 5rem; opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; }

html.desktop .case-filter__list label:hover,
.case-filter__list label.case-filter__list--choice { color: #FFB500; }
.case-filter__list label.case-filter__list--choice:after { opacity: 1; }

html.ios .case-filter__list label { padding-top: 5rem; padding-bottom: 3rem; }

/* RESET */
.case-filter__reset { display: inline-block; padding: 5rem 26rem 5rem 0; position: absolute; right: 30rem; bottom: 24rem; -webkit-transition: opacity .3s; transition: opacity .3s; }
.case-filter__reset > span { display: inline-block; position: relative; font-size: 14rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.85; color: #666; }
.case-filter__reset > span:before { content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: 4rem; background: #666; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.case-filter__reset > .ke-guide--icon { position: absolute; width: 24rem; right: 0; top: -webkit-calc(50% - 1rem); top: calc(50% - 1rem); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.case-filter__reset > .ke-guide--icon path { stroke: #888; }

.case-filter__reset.case-filter__reset--disabled { opacity: 0.5; cursor: not-allowed; }
html.desktop .case-filter__reset:not(.case-filter__reset--disabled):hover > span:before { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

html.ios .case-filter__reset > .ke-guide--icon { top: -webkit-calc(50% - 3rem); top: calc(50% - 3rem); }



/* **************************************** *
 * INQUIRY
 * **************************************** */
.inquiry-datalist { display: grid; grid-template-columns: 1fr 1fr 1fr; -webkit-column-gap: 36rem; -moz-column-gap: 36rem; column-gap: 36rem; row-gap: 75rem; }
.inquiry-datalist__image { border-radius: 14.19rem; overflow: hidden; }
.inquiry-datalist__image .ke-lazyload { padding-bottom: 100%; }
.inquiry-datalist__image img { border-radius: 14.19rem; }
.inquiry-datalist__title { margin-top: 26rem; font-size: 21rem; line-height: 1.52; font-weight: 600; }
.inquiry-datalist__action { margin-top: 10rem; font-size: 0; }
.inquiry-datalist__action > .ke-btn__point { margin-right: 24rem; }
.inquiry-datalist__action > .ke-btn__point:last-child { margin-right: 0; }

.inquiry-center { margin-top: 134rem; padding-top: 141rem; border-top: 1rem solid #eee; }
.inquiry-center .inquiry-datalist { max-width: 987rem; grid-template-columns: 1fr 1fr 1fr; }
.inquiry-center .inquiry-datalist__image { border-radius: 10rem; }
.inquiry-center .inquiry-datalist__image .ke-lazyload { padding-bottom: 36.06%; }
.inquiry-center .inquiry-datalist__image img { border-radius: 10rem; }

.inquiry-center .inquiry-datalist.inquiry-datalist--center { display: block; max-width: 1023rem; margin: 0 -18rem; font-size: 0; text-align: center; }
.inquiry-center .inquiry-datalist.inquiry-datalist--center > li { display: inline-block; width: 33.33%; padding: 0 18rem; text-align: left; }



/* **************************************** *
 * BOOSTUP
 * **************************************** */
body.page-template-info-boostup .article { padding-bottom: 0; }
body.page-template-info-boostup .component-resource { margin-top: 200rem; }



/* **************************************** *
 * MARKETING (hold)
 * **************************************** */
/* CLEAR */
.page-template-promotion #header,
.page-template-promotion #footer,
.page-template-promotion .global-sticky-banner { display: none; }

.page-template-promotion .main-container { padding-top: 0; }

/* LAYOUT */
.promotion__wrap { max-width: 600rem; margin: 0 auto; position: relative; }

/* HEADER */
.promotion__head { background: #000; }
.promotion__head-inner { max-width: 1500rem; margin: 0 auto; position: relative; }

.promotion__head-ryan { padding-top: 54.33%; position: relative; background: url(../images/sub/promotion/head-banner.jpg) no-repeat center center; background-size: cover; }

.promotion__logo { width: 145rem; height: 36rem; padding: 8rem 0; position: absolute; left: 0; top: 19rem; }
.promotion__logo img { display: block; width: 100%; height: auto; }

/* CONTENT */
.promotion__content { padding: 40rem 48rem 99rem; color: #fff; background: #191919; }

.promotion__action { margin-top: 60rem; font-size: 0; text-align: center; }
.promotion__btn { display: inline-block; padding: 19rem 32rem; font-size: 18rem; line-height: 1; font-weight: 600; letter-spacing: -0.75rem; color: #000; background: #FFE100; -webkit-box-shadow: 0rem 0rem 5rem rgba(255, 225, 0, 0); box-shadow: 0rem 0rem 5rem rgba(255, 225, 0, 0); border-radius: 36rem; -webkit-transition: -webkit-box-shadow .3s; transition: -webkit-box-shadow .3s; transition: box-shadow .3s; transition: box-shadow .3s, -webkit-box-shadow .3s; }
.promotion__btn > span { padding-right: 25rem; position: relative; }
.promotion__btn > span:after { content: ''; width: 20rem; height: 20rem; margin-top: -10rem; position: absolute; top: 50%; right: 0; background: url(../images/icon/icon-arrow.svg) no-repeat center center; background-size: cover; }
html.desktop .promotion__btn:hover { -webkit-box-shadow: 0rem 0rem 30rem rgba(255, 225, 0, 0.5); box-shadow: 0rem 0rem 30rem rgba(255, 225, 0, 0.5); }

.promotion__section { word-break: break-all; }
.promotion__section + .promotion__section { margin-top: 60rem; }
.promotion__section h1 { font-size: 35rem; line-height: 1.4; font-weight: 600; letter-spacing: -1rem; }
.promotion__section h2 { padding-bottom: 10rem; font-size: 20rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.75rem; border-bottom: 1rem solid #fff; }
.promotion__section p { font-size: 16rem; line-height: 1.7; font-weight: 400; letter-spacing: -0.75rem; }
.promotion__section p b { font-weight: 600; }

.promotion__section.promotion__data p { margin-top: 27rem; }
.promotion__section.promotion__data h1 + p { margin-top: 29rem; }
.promotion__section.promotion__data ul { margin-top: 30rem; }
.promotion__section.promotion__data li { padding-left: 40rem; position: relative; font-size: 16rem; line-height: 1.7; font-weight: 600; }
.promotion__section.promotion__data li span { position: absolute; top: 50%; left: 0; font-weight: 400; color: rgba(255,255,255,0.5); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.promotion__section.promotion__expect ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20rem; margin-top: 20rem; text-align: center; word-break: keep-all; }
.promotion__section.promotion__expect b { display: block; margin-bottom: 11rem; font-size: 16rem; line-height: 1.7; font-weight: 400; letter-spacing: -0.75rem; }
.promotion__section.promotion__expect p { font-size: 14rem; color: rgba(255, 255, 255, 0.6); }

.promotion__section.promotion__program p { font-size: 14rem; line-height: 1.5; font-weight: 400; letter-spacing: -0.75rem; }
.promotion__section.promotion__program table { width: 100%; line-height: 1.5; letter-spacing: -0.75rem; table-layout: fixed; }
.promotion__section.promotion__program table th:nth-child(1) { width: 102rem; }
.promotion__section.promotion__program table th:nth-child(2) { width: auto; }
.promotion__section.promotion__program table tr > *:first-child { padding-right: 18rem; }
.promotion__section.promotion__program table th,
.promotion__section.promotion__program table td { padding: 14rem 0 15rem; }
.promotion__section.promotion__program table th { font-size: 16rem; border-bottom: 1rem solid #fff; }
.promotion__section.promotion__program table td { font-size: 14rem; border-bottom: 1rem solid rgba(255,255,255,0.2); }
.promotion__section.promotion__program table tr:last-child td { border-bottom: none; }
.promotion__section.promotion__program p + p { margin-top: 10rem; }
.promotion__section.promotion__program p > span { display: block; margin-top: 10rem; color: rgba(255,255,255,0.6); }

.promotion__section.promotion__notice h2 { padding-bottom: 0; border-bottom: none; }
.promotion__section.promotion__notice ol { margin-top: 10rem; counter-reset: item; }
.promotion__section.promotion__notice li { counter-increment: item; padding-left: 21rem; position: relative; font-size: 14rem; line-height: 1.7; font-weight: 400; letter-spacing: -0.75rem; }
.promotion__section.promotion__notice li + li { margin-top: 10rem; }
.promotion__section.promotion__notice li:before { content: counter(item)'.'; position: absolute; left: 5rem; }

/* FOOTER */
.promotion__footer { padding: 40rem 0 110rem; position: relative; color: #707070; }
.promotion__footer img { display: block; width: 129rem; height: auto; }
.promotion__footer p { margin-top: 20rem; font-size: 12rem; line-height: 1.5; font-weight: 400; }
.promotion__footer p + p { margin-top: 10rem; }

.promotion__sns { position: absolute; top: 40rem; right: -8rem; font-size: 0; z-index: 2; }
.promotion__sns > li { display: inline-block; margin: 0 8rem; vertical-align: middle; }
.promotion__sns > li .ke-guide--icon { width: 30rem; }
.promotion__sns > li .ke-guide--icon path { -webkit-transition: fill .3s; transition: fill .3s; }
html.desktop .promotion__sns a:hover .ke-guide--icon path { fill: #191919; }