@charset "utf-8";

/*
 * File       : block.css
 * Author     : STUDIO-JT (KMS, NICO)
 * Guideline  : JTstyle.2.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) ALIGN
 * 02) CUSTOM COLOR PALETTE
 * 03) HEADING AND TEXT
 * 04) LINK
 * 05) BUTTON
 * 06) LIST
 * 07) IMAGE
 * 08) GALLERY
 * 09) BLOCKQUOTE
 * 10) EMBED
 * 11) TABLE
 * 12) SEPARATOR
 * 13) OVERWRITE
 */



/* **************************************** *
 * ALIGN
 * **************************************** */
.ke-blocks h1,
.ke-blocks h2,
.ke-blocks h3,
.ke-blocks h4,
.ke-blocks h5,
.ke-blocks h6,
.ke-blocks p,
.ke-blocks ul:not(.blocks-gallery-grid), 
.ke-blocks ol:not(.blocks-gallery-grid),
.ke-blocks .wp-block-quote, 
.ke-blocks .wp-block-buttons,
.ke-blocks .wp-block-embed { max-width: 732rem; margin-left: auto; margin-right: auto; }

.ke-blocks .wp-block-table,
.ke-blocks .wp-block-separator,
.ke-blocks .wp-block-gallery { max-width: 988rem; margin-left: auto; margin-right: auto; }

.ke-blocks .alignfull { max-width: inherit; margin-left: auto; margin-right: auto; }
.ke-blocks ul.alignfull,
.ke-blocks ol.alignfull,
.ke-blocks .alignfull ul,
.ke-blocks .alignfull ol,
.ke-blocks .alignwide ul,
.ke-blocks .alignwide ol { max-width: inherit; }



/* **************************************** *
 * CUSTOM COLOR PALETTE
 * !important required to work correctly (TODO dry this code)
 * **************************************** */
.ke-blocks .has-type-01-color,
.ke-blocks p.has-type-01-color { color: #001EFF }
.ke-blocks .has-type-02-color,
.ke-blocks p.has-type-02-color { color: #FFE100; }
.ke-blocks .has-type-03-color,
.ke-blocks p.has-type-03-color { color: #FFF6B3; }
.ke-blocks .has-type-04-color,
.ke-blocks p.has-type-04-color { color: #666666; }
.ke-blocks .has-type-05-color,
.ke-blocks p.has-type-05-color { color: #EEEEEE; }
.ke-blocks .has-type-06-color,
.ke-blocks p.has-type-06-color { color: #191919; }

.ke-blocks .has-type-01-background-color,
.ke-blocks a.wp-block-button__link.has-type-01-background-color,
.ke-blocks button.wp-block-button__link.has-type-01-background-color { background-color: #001EFF !important; border-color: #001EFF; }
.ke-blocks .has-type-02-background-color,
.ke-blocks a.wp-block-button__link.has-type-02-background-color,
.ke-blocks button.wp-block-button__link.has-type-02-background-color { background-color: #FFE100 !important; border-color: #FFE100; }
.ke-blocks .has-type-03-background-color,
.ke-blocks a.wp-block-button__link.has-type-03-background-color,
.ke-blocks button.wp-block-button__link.has-type-03-background-color { background-color: #FFF6B3 !important; border-color: #FFF6B3; }
.ke-blocks .has-type-04-background-color,
.ke-blocks a.wp-block-button__link.has-type-04-background-color,
.ke-blocks button.wp-block-button__link.has-type-04-background-color { background-color: #666666 !important; border-color: #666666; }
.ke-blocks .has-type-05-background-color,
.ke-blocks a.wp-block-button__link.has-type-05-background-color,
.ke-blocks button.wp-block-button__link.has-type-05-background-color { background-color: #EEEEEE !important; border-color: #EEEEEE; }
.ke-blocks .has-type-06-background-color,
.ke-blocks a.wp-block-button__link.has-type-06-background-color,
.ke-blocks button.wp-block-button__link.has-type-06-background-color { background-color: #191919 !important; border-color: #191919; }



/* **************************************** *
 * HEADING AND TEXT
 * **************************************** */
/* HEADING */
.ke-blocks h1,
.ke-blocks h2,
.ke-blocks h3,
.ke-blocks h4,
.ke-blocks h5,
.ke-blocks h6 { margin-top: 80rem; margin-bottom: 24rem; font-weight: 600; line-height: 1.35; clear: both; }

.ke-blocks h1 { font-size: 44rem; }
.ke-blocks h2 { font-size: 32rem; }
.ke-blocks h3 { font-size: 28rem; }
.ke-blocks h4 { font-size: 24rem; }
.ke-blocks h5 { font-size: 20rem; }
.ke-blocks h6 { font-size: 18rem; }

.ke-blocks h1:first-child,
.ke-blocks h2:first-child,
.ke-blocks h3:first-child,
.ke-blocks h4:first-child,
.ke-blocks h5:first-child,
.ke-blocks h6:first-child { margin-top: 0; }

.ke-blocks h1:last-child,
.ke-blocks h2:last-child,
.ke-blocks h3:last-child,
.ke-blocks h4:last-child,
.ke-blocks h5:last-child,
.ke-blocks h6:last-child { margin-bottom: 0; }

/* TEXT */
.ke-blocks p { margin-bottom: 20rem; font-size: 16rem; font-weight: 400; line-height: 1.87; color: #666; word-break: keep-all; }

.ke-blocks h1 + p,
.ke-blocks h2 + p,
.ke-blocks h3 + p,
.ke-blocks h4 + p,
.ke-blocks h5 + p,
.ke-blocks h6 + p { margin-top: 0; }
 
.ke-blocks strong { font-weight: 600; color: #444; }
.ke-blocks em { font-style: italic; }
.ke-blocks mark { color: #666; background: #FFF6B3; }
.ke-blocks sup { vertical-align: super; }
.ke-blocks sub { vertical-align: sub; }
.ke-blocks .has-drop-cap:not(:focus):first-letter { margin: 3rem 10rem 0 0; font-size: 44rem; line-height: 1; font-weight: 400; }



/* **************************************** *
 * LINK
 * **************************************** */
.ke-blocks a { word-break: break-all; }
.ke-blocks p a,
.ke-blocks ul a,
.ke-blocks ol a { display: inline-block; position: relative; }

html.desktop .ke-blocks p a:hover,
html.desktop .ke-blocks ul a:hover,
html.desktop .ke-blocks li a:hover { text-decoration: underline; }

.ke-blocks p a:not(.wp-block-button__link),
.ke-blocks ul a:not(.wp-block-button__link),
.ke-blocks ol a:not(.wp-block-button__link) { color: #FFB500; }
.ke-blocks p a:not(.wp-block-button__link)[target="_blank"],
.ke-blocks ul a:not(.wp-block-button__link)[target="_blank"],
.ke-blocks ol a:not(.wp-block-button__link)[target="_blank"] { padding-right: 14rem; }
.ke-blocks p a:not(.wp-block-button__link)[target="_blank"]:after,
.ke-blocks ul a:not(.wp-block-button__link)[target="_blank"]:after,
.ke-blocks ol a:not(.wp-block-button__link)[target="_blank"]:after { content: ''; width: 12rem; height: 11rem; position: absolute; right: 0; top: 7rem; background: url(../images/icon/icon-outlink.svg) no-repeat center center; background-size: contain; }



/* **************************************** *
 * BUTTON
 * **************************************** */
.ke-blocks .wp-block-buttons { margin-top: 76rem; margin-bottom: 76rem; font-size: 0; }
.ke-blocks .wp-block-buttons .wp-block-button { margin: 4rem 5rem; }
.ke-blocks .wp-block-button__link { min-width: 160rem; padding: 15rem 28rem 15rem; font-size: 14rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: #fff; border: 2rem solid; border-radius: 24rem; -webkit-transition: border .3s, background .3s; transition: border .3s, background .3s; }
.ke-blocks .wp-block-button__link { background-color: #191919; border-color: #191919; } /* no jt-block to avoid custom override */
.ke-blocks .is-style-outline > .wp-block-button__link { color: #191919; } /* no jt-block to avoid custom override */

html.desktop .ke-blocks .wp-block-button__link:hover { color: #191919; background: #FFE100; border-color: #FFE100; }



/* **************************************** *
 * LIST
 * **************************************** */
.ke-blocks ul:not(.blocks-gallery-grid),
.ke-blocks ol:not(.blocks-gallery-grid) { margin-bottom: 20rem; }
.ke-blocks li:not(.blocks-gallery-item) { margin-bottom: 6rem; position: relative; font-size: 16rem; font-weight: 400; line-height: 1.87; color: #666; }
.ke-blocks li:not(.blocks-gallery-item):last-child { margin-bottom: 0; }

.ke-blocks ul:not(.blocks-gallery-grid) li { padding-left: 16rem; }
.ke-blocks ul:not(.blocks-gallery-grid) li:before { content: ''; display: block; width: 4rem; height: 4rem; position: absolute; top: 13rem; left: 0; background: #666; border-radius: 50%; }

.ke-blocks ol:not(.blocks-gallery-grid) { counter-reset: item; }
.ke-blocks ol:not(.blocks-gallery-grid) li { padding-left: 20rem; }
.ke-blocks ol:not(.blocks-gallery-grid) li:nth-child(n+10) { padding-left: 30rem; }
.ke-blocks ol:not(.blocks-gallery-grid) li:before { content: counter(item)'.'; counter-increment: item; position: absolute; left: 0; }

.ke-blocks li:not(.blocks-gallery-item) ul,
.ke-blocks li:not(.blocks-gallery-item) ol { margin: 10rem 0; }



/* **************************************** *
 * IMAGE
 * **************************************** */
.ke-blocks img { display: block; max-width: 100%; height: auto; }
.ke-blocks .wp-block-image { max-width: 1680rem; margin: 100rem auto; }
.ke-blocks .wp-block-image a { display: block; }
.ke-blocks .wp-block-image img { max-width: 100%; margin: 0 auto; border-radius: 20rem; }
.ke-blocks .wp-block-image figcaption { max-width: 1024rem; margin: 15rem auto 0; font-size: 14rem; line-height: 1.85; font-weight: 400; color: #666; }

/*
.ke-blocks .wp-block-image.alignfull img,
.ke-blocks .wp-block-image.alignwide img { max-width: inherit; }
*/



/* **************************************** *
 * GALLERY
 * **************************************** */
.ke-blocks .wp-block-gallery { margin-top: 100rem; margin-bottom: -webkit-calc(100rem - var(--gallery-block--gutter-size)); margin-bottom: calc(100rem - var(--gallery-block--gutter-size)); }
.ke-blocks .wp-block-gallery .wp-block-image { max-width: inherit; margin: 0; }
.ke-blocks .wp-block-gallery .wp-block-image a { color: #fff; }

.ke-blocks .wp-block-gallery.has-nested-images > figcaption { font-size: 14rem; line-height: 1.85; font-weight: 400; color: #666; }
.ke-blocks .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { margin: 0; padding: 12rem 15rem 6rem; font-size: 14rem; border-radius: 0 0 20rem 20rem; }



/* **************************************** *
 * BLOCKQUOTE
 * **************************************** */
.ke-blocks .wp-block-quote { margin-top: 100rem; margin-bottom: 100rem; padding: 31rem 0 0; position: relative; font-style: normal; border: 0; }
.ke-blocks .wp-block-quote:before { content: ''; display: block; width: 22rem; height: 16rem; position: absolute; top: 0; left: 0; background: url(../images/blocks/quote.svg) no-repeat center center; background-size: contain; }
.ke-blocks .wp-block-quote p { margin: 0; font-size: 20rem; line-height: 1.6; font-weight: 600; font-style: normal; color: #444; }
.ke-blocks .wp-block-quote cite { display: inline-block; margin-top: 8rem; font-size: 16rem; font-weight: 400; line-height: 1.87; color: #666; }

.ke-blocks blockquote.wp-block-quote.is-style-large { padding-top: 0; padding-left: 22rem; border-left: 3rem solid #191919; }
.ke-blocks blockquote.wp-block-quote.is-style-large:before { display: none; }


 
/* **************************************** *
 * EMBED
 * **************************************** */
.ke-blocks .wp-block-embed { margin-top: 100rem; margin-bottom: 100rem; }



/* **************************************** *
 * TABLE
 * **************************************** */
.ke-blocks table { position: relative; border-top: 2rem solid #191919; }
.ke-blocks table caption { position: absolute; clip: rect(1rem, 1rem, 1rem, 1rem); -webkit-clip-path: inset(0rem 0rem 99.9% 99.9%); clip-path: inset(0rem 0rem 99.9% 99.9%); overflow: hidden; height: 1rem; width: 1rem; padding: 0; border: 0; }
.ke-blocks table tr { width: 100%; } 
.ke-blocks table th.has-text-align-left,
.ke-blocks table td.has-text-align-left { text-align: left; } 
.ke-blocks table th.has-text-align-center,
.ke-blocks table td.has-text-align-center { text-align: center; } 
.ke-blocks table th.has-text-align-right,
.ke-blocks table td.has-text-align-right { text-align: right; }
.ke-blocks table th:first-child,
.ke-blocks table td:first-child { border-left: none; }
.ke-blocks .wp-block-table thead td,
.ke-blocks .wp-block-table thead th { font-weight: 600; }

.ke-blocks .wp-block-table { margin-top: 38rem; margin-bottom: 80rem; }
.ke-blocks .wp-block-table table { border-collapse: separate; }
.ke-blocks .wp-block-table td,
.ke-blocks .wp-block-table th { padding: 20rem 28rem 18rem; font-size: 16rem; font-weight: 400; line-height: 1.87; color: #666; border: none; border-left: 1rem solid #ddd; border-bottom: 1rem solid #ddd; }
.ke-blocks .wp-block-table figcaption { margin: 15rem 0 0; font-size: 14rem; line-height: 1.85; font-weight: 400; color: #666; }

.ke-blocks .wp-block-table.is-style-stripes { border-bottom: none; }
.ke-blocks .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: #f8f8f8; }



/* **************************************** *
 * SEPARATOR
 * **************************************** */
.ke-blocks .wp-block-separator { margin-top: 100rem; margin-bottom: 100rem; border-bottom-width: 2rem; border-color: #ddd; opacity: 1; }
.ke-blocks .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100rem; }
.ke-blocks .wp-block-separator.is-style-wide { border-bottom-width: 1rem; }
.ke-blocks .wp-block-separator.is-style-dots:before { color: #191919; }



/* **************************************** *
 * OVERWRITE
 * **************************************** */
.ke-blocks > *:first-child { margin-top: 0; }
.ke-blocks > *:last-child { margin-bottom: 0; }