@charset "utf-8";

/*
 * File       : sub-brand.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) LAYOUT
 * 02) COMPONENT
 * 03) BRANDSYSTEM
 * 04) COLORSYSTEM
 * 05) ASSETS
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
body.page-template-brand .article__visual { background-size: 100% 100%; }
body.page-template-brand .article__title { text-align: center; }



/* **************************************** *
 * COMPONENT
 * **************************************** */
.brand-section + .brand-section { margin-top: 160rem; }

.brand-section h2 { margin-bottom: 16rem; }
.brand-section h3 { margin-top: 40rem; margin-bottom: 16rem; }
.brand-section .brand-section__picture + h3 { margin-top: 60rem; }
.brand-section h4 { margin-bottom: 16rem; }

.brand-section__picture { margin-top: 16rem; margin-bottom: 40rem; position: relative; }
.brand-section__picture .jt-lazyload { border-radius: 20rem; }

.brand-section > *:last-child { margin-bottom: 0; }



/* **************************************** *
 * BRANDSYSTEM
 * **************************************** */
.brand-system__example { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40rem 20rem; margin-top: 16rem; }
.brand-system__example .brand-section__picture { margin-top: 0; margin-bottom: 0; }
.brand-system__example p { margin-top: 16rem; }
.brand-system__example .jt-icon { width: 22rem; height: 22rem; position: absolute; left: 11rem; bottom: 11rem; }
.brand-system__example .jt-icon:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: var(--color-primary); border-radius: 50%; }
.brand-system__example .jt-icon svg { position: relative; }
.brand-system__example .brand-system__example--reverse .jt-icon:before { background: #fff; }
.brand-system__example .brand-system__example--reverse .jt-icon path { fill: #252525; }



/* **************************************** *
 * COLORSYSTEM
 * **************************************** */
.brand-colorsystem__palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40rem 20rem; }
.brand-colorsystem__palette > li:first-child { grid-column: 1 / span 4; }
.brand-colorsystem__palette__preview { display: block; width: 100%; height: 100rem; border: 1rem solid var(--color-base-line); border-radius: 8rem; }
.brand-colorsystem__palette b { display: block; margin-top: 8rem; }
.brand-colorsystem__palette p { margin-top: 8rem; }



/* **************************************** *
 * ASSETS
 * **************************************** */
.brand-assets__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28rem; margin-top: 40rem; }
.brand-assets__list > li { padding: 39rem; background: var(--color-base-bg); border: 1rem solid var(--color-base-line); border-radius: 20rem; }
.brand-assets__list .brand-section__picture { margin-top: 32rem; margin-bottom: 24rem; }
.brand-assets__list .brand-section__picture .jt-lazyload { border-radius: 8rem; }
.brand-assets__link { display: flex; margin: 0 -8rem -8rem; }
.brand-assets__link .jt-btn__underline { padding-left: 8rem; padding-right: 8rem; }
.brand-assets__link .jt-btn__underline[target="_blank"] > span { padding-right: 0; }

.brand-assets__download { margin-top: 40rem; }
.brand-assets__download .jt-btn__basic { display: block; text-align: center; }
.brand-assets__download .jt-btn__basic .jt-btn__basic-icon { margin-right: 0; margin-left: 4rem; position: relative; top: -2rem; }