@charset "utf-8";

/*
 * File    : sub-etc.css
 * Author  : STUDIO-JT (JSH)
 *
 * SEARCH
 * FAQ
 * HOVER
 */



/* **************************************** *
 * SEARCH
 * **************************************** */
/* Form */
.global-search-form { position: relative; }

.global-search-form__field { position: relative; }
.global-search-form__field:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3rem; background: var(--color-black); }
.global-search-form__input { display: block; width: 100%; height: 80rem; margin: 0; padding: 0 148rem 0 48rem; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing-01); text-overflow: ellipsis; border: none; border-radius: 0; outline: none; opacity: 1; box-sizing: border-box; transition: border .3s; }
.global-search-form__label { position: absolute; top: 50%; left: 48rem; transform: translate(0, -50%); font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-gray-500); transition: opacity .15s; cursor: text; }

.global-search-form__icon { position: absolute; top: 50%; left: 0; width: 28rem; height: 28rem; transform: translate(0, -50%); }

.global-search-form__submit { display: block; margin: 0; padding: 0; position: absolute; right: 0; top: 50%; padding: 7rem 19rem; border-radius: 18rem; color: var(--color-black); border: 1px solid var(--color-black); background: none; cursor: pointer; transform: translate(0, -50%); transition: background .3s, color .3s; }

.global-search-form__reset { display: block; width: 24rem; height: 24rem; margin: 0; padding: 0; position: absolute; right: 104rem; top: 50%; background: none; border: none; cursor: pointer; transform: translate(0, -50%); opacity: 0; transition: opacity .15s, background-color .3s; }
.global-search-form__reset:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-black); border-radius: 50%; transition: background-color .3s; }
.global-search-form__reset .jt-icon { display: block; width: 12rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.global-search-form__reset .jt-icon path { fill: var(--color-white); }

.global-search-form.global-search-form--active .global-search-form__label { opacity: 0; visibility: hidden; }
.global-search-form.global-search-form--active .global-search-form__reset { opacity: 1; visibility: visible; }

/* Modal */
.global-search-modal { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .5); z-index: 9999; overflow: hidden; }
.global-search-modal__inner { padding: 80rem 0; position: relative; background: var(--color-white); }

.global-search-modal__close { width: 60rem; height: 60rem; margin: 0; padding: 0; position: absolute; top: 0; right: 0; background: transparent; border: none; border-radius: 0; opacity: 1; cursor: pointer; transition: background-color .3s; }
.global-search-modal__close .jt-accent-icon { width: 28rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform .3s; }

/* Page */
.results-entries { margin-top: 60rem; }
.results-entries__title { text-align: center; }

.results-entries__search { font-size: 0; margin-bottom: 60rem; justify-content: center; align-items: flex-start; text-align: center; color: var(--color-primary); }
.results-entries__search b { color: var(--color-gray-500); }
.results-entries__search b > span { color: var(--color-black); overflow-wrap: anywhere; }
.results-entries__search sup { position: relative; margin-left: 8rem; top: -10rem; }

.results-entries__filter { display: flex; justify-content: center; align-items: center; margin-bottom: 40rem; }

.results-entries__list .jt-board-list__title { color: var(--color-gray-500); }
.results-entries__list .jt-board-list__title > span { color: var(--color-black); }



/* **************************************** *
 * FAQ
 * **************************************** */
body.page-template-faq .article__header { padding-bottom: 0; }
body.page-template-faq .article__header:after { display: none; }



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

    /* SEARCH */
    .global-search-form__submit:hover { color: var(--color-white); background: var(--color-black); }

    .global-search-form__reset:hover:before { background: var(--color-primary); }
    .global-search-form__reset:hover .jt-icon path { fill: var(--color-black); }

    .global-search-modal__close:hover { background: var(--color-primary); }
    .global-search-modal__close:hover .jt-accent-icon { transform: translate(-50%, -50%) rotate(90deg); }

}