@charset "utf-8";
/* ============================================================================
 * 出展者イベント一覧ページ - 今回追加した UI のスタイル
 * ----------------------------------------------------------------------------
 * カード自体の見た目は従来どおり assets/css/exhibitor_event.css が担当します。
 * このファイルには、今回追加した「検索欄・件数表示・空表示・表示アニメーション」
 * と、タブが 4 つになったことによる幅調整だけを書いています。
 *
 * 読み込み順は exhibitor_event.css の後なので、ここでの指定が優先されます。
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 文字の太さ・大きさの土台
 *
 * 本体サイトの共通 CSS（assets/css/style.css の大きな要素セレクタ）が
 * article / ul / li / input / figure など多数の要素に
 * font-size: 17px / font-weight: 500 を掛けています。
 * LINESeedJP には 400 / 700 / 900 しかないため 500 は指定として意味を持たず、
 * 文字も本来より大きく太く出ます。
 * 出展者一覧（/ja/forvisitors/exhibitor_info/）と同じ 14px / 400 に揃えます。
 *
 * ★ 独自の指定を持つ要素（見出し .c-contents-title / タブ .c-contents-links__item /
 *   社名 .event-card__company / イベント名 .event-card__title / 各ラベル .event-card__label
 *   など）はここに入れていません。それぞれの指定をそのまま残すためです。
 *   一律で打ち消すと見出しやタブの大きさまで変わってしまいます。
 * -------------------------------------------------------------------------- */
.event-list,
.event-list__item,
.event-card,
.event-card .text_box,
.event-card__header,
.event-card .is-event_block,
.event-card__info,
.event-card__schedule,
.event-card__time,
.ee-search,
.ee-search__field {
    font-size: 14px;
    font-weight: 400;
}

/* 大きさは独自指定があるが、太さだけ共通リセットに奪われている箇所 */
.event-card .description,
.event-card__schedule__tag,
.ee-search__input,
.ee-count,
.ee-notice,
.ee-error,
.ee-empty {
    font-weight: 400;
}

/* ----------------------------------------------------------------------------
 * コンテンツ幅
 *
 * 本体サイトの共通 CSS は下層ページの枠 .l-1column-contents を 1060px / 左右 40px に
 * しています。出展者一覧（/ja/forvisitors/exhibitor_info/）と同じ
 * 1152px / 左右 16px に揃えます。
 *
 * この指定はページの枠に効きますが、このスタイルシートは出展者イベントページの
 * 中でだけ読み込まれるため、他のページ・ヘッダー・フッターには影響しません。
 * 元に戻したい場合はこのブロックごと削除してください。
 * スマートフォン（768px 以下）は本体サイトの指定のままにしています。
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    .l-1column-contents {
        width: 100%;
        max-width: 1152px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* カード一覧の横幅も、上の枠の内側いっぱいに広げる */
.event-list {
    max-width: 1152px;
}

/* ----------------------------------------------------------------------------
 * フリーワード検索欄
 * -------------------------------------------------------------------------- */
.ee-search {
    max-width: 1152px;
    margin: 0 auto 20px;
}

.ee-search__field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 2px solid rgb(47 103 246 / 30%);
    border-radius: 10px;
    padding: 0 14px;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ee-search__field:focus-within {
    border-color: #2f67f6;
    box-shadow: 0 0 0 3px rgb(47 103 246 / 15%);
}

.ee-search__icon {
    color: #2f67f6;
    font-size: 16px;
    flex-shrink: 0;
}

.ee-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px; /* 16px 未満にすると iOS で拡大されるため下げない */
    line-height: 1.4;
    padding: 14px 10px;
    color: #000;
    font-family: inherit;
}

.ee-search__input::placeholder {
    color: #9aa3b5;
}

/* ブラウザ標準の検索クリアボタンは、独自のクリアボタンと二重になるため隠す */
.ee-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.ee-search__clear {
    flex-shrink: 0;
    border: none;
    background: #e3e9fb;
    color: #2f67f6;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background-color .2s ease;
}

.ee-search__clear:hover {
    background: #2f67f6;
    color: #fff;
}

/* ----------------------------------------------------------------------------
 * 日付タブ（「すべて」が増えて 4 つになったための幅調整）
 * -------------------------------------------------------------------------- */
.c-contents-links__item {
    width: 24.2%;
}

.c-contents-links__item:nth-child(n + 3) {
    margin-top: 0;
}

@media screen and (max-width: 600px) {
    .c-contents-links__item {
        width: 49%;
    }

    .c-contents-links__item:nth-child(n + 3) {
        margin-top: 8px;
    }
}

/* ----------------------------------------------------------------------------
 * 件数表示・お知らせ・空表示
 * -------------------------------------------------------------------------- */
.ee-count {
    max-width: 1152px;
    margin: 18px auto 12px;
    font-size: 14px;
    color: #555;
}

.ee-count__num {
    font-size: 20px;
    font-weight: bold;
    color: #2f67f6;
}

.ee-count__total {
    color: #888;
}

.ee-notice,
.ee-error {
    max-width: 1152px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.ee-notice {
    background: #fff6e0;
    border: 1px solid #f0c674;
    color: #7a5700;
}

.ee-error {
    background: #fdecec;
    border: 1px solid #e6a1a1;
    color: #8c2020;
}

.ee-empty {
    max-width: 1152px;
    margin: 40px auto;
    padding: 40px 20px;
    text-align: center;
    font-size: 15px;
    color: #666;
    background: #f5f7fc;
    border-radius: 10px;
}

/* ----------------------------------------------------------------------------
 * 検索ヒット箇所のハイライト
 *
 * list.js が、検索語に一致した部分を <mark class="ee-hit"> で囲みます。
 * 色を変えたい場合はここだけを変更してください。
 * -------------------------------------------------------------------------- */
.event-card mark.ee-hit {
    background: #ffe9a8;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
    font-weight: inherit;
}

/* ----------------------------------------------------------------------------
 * 表示アニメーション
 *
 * .js-ee-anim は list.js が読み込まれた時にだけ <html> に付きます。
 * JS が読み込めなかった場合はこの指定が効かず、カードはそのまま表示されます。
 * -------------------------------------------------------------------------- */
.js-ee-anim .event-list__item[data-reveal-item] {
    opacity: 0;
}

.js-ee-anim .event-list__item[data-reveal-item].is-shown {
    opacity: 1;
}

/* 動きを抑制する設定のブラウザでは、アニメーションせずに最初から表示する */
@media (prefers-reduced-motion: reduce) {
    .js-ee-anim .event-list__item[data-reveal-item] {
        opacity: 1;
    }
}