/* ======================================================
   public_base.css
   ------------------------------------------------------
   役割：
     フクオカギルド公開一覧ページの共通骨格。

   対象：
     ・ページ全体
     ・上部ナビ
     ・トップへ戻る
     ・カテゴリ選択
     ・基本 / 詳細 表示切替
     ・検索フォーム
     ・並び替え
     ・件数表示
     ・PC / スマホ表示切替

   注意：
     ・カード固有CSSは public_cards.css
     ・PCテーブル固有CSSは public_tables.css
     ・色・背景画像は public_theme.css
====================================================== */


/* ======================================================
   ① 基本設定
====================================================== */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;

    background: #f8fafc;
    color: #101828;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;
}


/* ======================================================
   ② 公開ページ本体
====================================================== */

.fg-public-main {
    width: 100%;
}


/* ======================================================
   ③ ページヘッダー基本形
   ------------------------------------------------------
   背景色・背景画像などのデザインは
   public_theme.css 側で上書きする。
====================================================== */

.fg-public-page-header {
    box-sizing: border-box;
}

.fg-public-page-header h1 {
    margin-top: 0;
}

.fg-public-page-header p {
    margin-bottom: 0;
}


/* ======================================================
   ④ 上部ナビ + 表示切替
====================================================== */

.fg-public-nav-with-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin: 18px 0 16px;
}

.fg-public-nav-with-tabs-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}


/* ======================================================
   ⑤ 共通ページナビ
   ------------------------------------------------------
   トップへ戻る + カテゴリ選択。
====================================================== */

.fg-public-page-nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;

    gap: 10px;

    width: 100%;
    margin: 0;
}


/* ======================================================
   ⑥ トップへ戻る
====================================================== */

.fg-public-back-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    height: 44px;

    padding: 0 16px;

    border: 1px solid #cfd8e3;
    border-radius: 999px;

    background: #ffffff;
    color: #111827;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06);

    white-space: nowrap;
}

.fg-public-back-home::before {
    content: "←";

    margin-right: 6px;
}

.fg-public-back-home:hover {
    background: #f3f4f6;
}


/* ======================================================
   ⑦ カテゴリ選択
====================================================== */

.fg-public-page-jump {
    display: flex;
    flex-direction: column;

    gap: 5px;

    min-width: 0;
    width: 100%;
}

.fg-public-page-jump-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    color: #374151;
}

.fg-public-page-jump-select {
    width: 100%;

    min-height: 44px;
    height: 44px;

    padding:
        0
        42px
        0
        14px;

    border: 1px solid #cfd8e3;
    border-radius: 999px;

    background-color: #ffffff;
    color: #111827;

    font-size: 14px;
    font-weight: 700;
    line-height: 44px;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06);

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #374151 50%
        ),
        linear-gradient(
            135deg,
            #374151 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 22px) 19px,
        calc(100% - 16px) 19px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;
}

.fg-public-page-jump-select:focus {
    outline: 2px solid #bfdbfe;
    border-color: #2563eb;
}

.fg-public-page-jump-button {
    min-height: 44px;
    height: 44px;

    padding: 0 16px;

    border: 1px solid #111827;
    border-radius: 999px;

    background: #111827;
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}


/* ======================================================
   ⑧ 基本 / 詳細 表示切替
====================================================== */

.fg-public-table-view-tabs {
    display: inline-flex;

    padding: 3px;

    background: #eef2f6;

    border: 1px solid #d8dee8;
    border-radius: 10px;
}

.fg-public-table-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 7px 14px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #344054;

    text-decoration: none;

    font-size: .86rem;
    font-weight: 700;
}

.fg-public-table-view-link:hover {
    background: rgba(255, 255, 255, .7);
}

.fg-public-table-view-link.is-active {
    background: #2563eb;
    color: #ffffff;

    box-shadow:
        0 2px 5px rgba(37, 99, 235, .22);
}


/* PC用ヘッダータブ */

.fg-public-header-tabs {
    display: none;
}


/* ======================================================
   ⑨ 検索・並び替え・件数エリア
====================================================== */

.fg-public-compact-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin: 0 0 16px;
    padding: 0;

    background: transparent;
    border: 0;
}

.fg-public-compact-tools-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    min-width: 0;
    flex: 1;
}

.fg-public-compact-tools-sub {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    white-space: nowrap;
}


/* ======================================================
   ⑩ 検索フォーム
====================================================== */

.fg-public-search-form {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 340px;
    flex: 0 1 520px;

    margin: 0;
}

.fg-public-search-input {
    min-width: 0;
    flex: 1;

    height: 42px;

    padding: 0 14px;

    border: 1px solid #cfd7e3;
    border-radius: 10px;

    background: #ffffff;
    color: #101828;

    font: inherit;
    font-size: .88rem;
}

.fg-public-search-input:focus {
    outline:
        3px solid rgba(37, 99, 235, .13);

    border-color: #2563eb;
}

.fg-public-search-button {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 42px;

    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: #172033;
    color: #ffffff;

    font: inherit;
    font-size: .86rem;
    font-weight: 700;

    cursor: pointer;
}

.fg-public-search-button:hover {
    background: #27364a;
}

.fg-public-search-clear {
    flex: 0 0 auto;

    color: #475467;

    font-size: .84rem;
    font-weight: 650;

    text-decoration: none;
}

.fg-public-search-clear:hover {
    text-decoration: underline;
}


/* ======================================================
   ⑪ 並び替え
====================================================== */

.fg-public-sort-nav {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0;

    padding: 3px;

    background: #f1f5f9;

    border: 1px solid #d8dee8;
    border-radius: 10px;
}

.fg-public-sort-nav::before {
    content: "並び替え";

    margin:
        0
        8px
        0
        6px;

    color: #667085;

    font-size: .75rem;
    font-weight: 700;
}

.fg-public-sort-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 6px 11px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #344054;

    font-size: .81rem;
    font-weight: 650;

    text-decoration: none;

    white-space: nowrap;
}

.fg-public-sort-link:hover {
    background: #ffffff;
}

.fg-public-sort-link.is-active {
    background: #ffffff;
    color: #172033;

    box-shadow:
        0 1px 4px rgba(16, 24, 40, .12);
}


/* ======================================================
   ⑫ 件数表示
====================================================== */

.fg-public-result-count {
    margin: 0;

    padding: 7px 10px;

    background: transparent;
    color: #667085;

    border: 0;

    font-size: .82rem;
    font-weight: 700;

    white-space: nowrap;
}


/* ======================================================
   ⑬ PC / スマホ表示切替
====================================================== */

.fg-public-pc-list {
    display: block;
}

.fg-public-mobile-list {
    display: none;
}


/* ======================================================
   ⑭ PC
====================================================== */

@media (min-width: 769px) {

    .fg-public-nav-with-tabs {
        display: flex;
        align-items: end;

        gap: 12px;
    }

    .fg-public-nav-with-tabs-main {
        flex: 0 0 auto;
    }

    .fg-public-page-nav {
        grid-template-columns:
            auto
            360px;

        justify-content: start;
    }

    .fg-public-page-jump {
        width: 360px;
    }

    .fg-public-header-tabs {
        display: flex;
        flex: 0 0 auto;

        margin: 0;
    }

}


/* ======================================================
   ⑮ スマホ / タブレット
====================================================== */

@media (max-width: 768px) {

    .fg-public-nav-with-tabs {
        display: block;
    }

    .fg-public-header-tabs {
        display: none;
    }

    .fg-public-pc-list {
        display: none;
    }

    .fg-public-mobile-list {
        display: block;
    }

    .fg-public-compact-tools {
        display: block;

        margin:
            14px
            0
            12px;
    }

    .fg-public-compact-tools-main {
        display: block;
    }

    .fg-public-search-form {
        min-width: 0;
        width: 100%;

        margin:
            14px
            0
            12px;
    }

    .fg-public-sort-nav {
        display: flex;

        margin:
            10px
            0
            12px;
    }

    .fg-public-compact-tools-sub {
        justify-content: flex-start;

        margin-top: 8px;
    }

}


/* ======================================================
   ⑯ 狭いスマホ
====================================================== */

@media (max-width: 420px) {

    .fg-public-page-nav {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .fg-public-back-home {
        width: fit-content;
    }

}