@charset "UTF-8";
/**
 * 導入企業一覧ページ専用スタイル
 * 対象: roleplay/templates/page-clients.php （/roleplay/clients/）
 *
 * [feature/client-logos-2rows]
 * このファイルは header.php でテンプレート判定して読み込むため、
 * 一覧ページ以外には一切影響しません。デザイン調整はこのファイル内で完結させてください。
 * ※ トップページ側の2段スライダー（.p-logo-slider__rows / __more）は base.css 側にあります。
 *
 * カード構成: 業種ラベル ＋ ロゴ画像（社名テキストは非表示。alt / title に保持）
 */

.section-header { margin:0 auto 72px; }

.section {
    padding: 90px 0 120px;
}
.section:nth-child(odd) {
    background: #fff;
}

/* ===== 企業ロゴ一覧グリッド ===== */
.p-client-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    width: min(92vw, 1110px);
    margin: 0 auto;
}

.p-client-list__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 20px 16px;
    background: var(--white);
    border: 1px solid var(--color-green-lightE8);
    border-radius: 12px;
    overflow: hidden;
}

/* リンク付きカード: <a> がカード内側の縦並びを引き継ぐ */
.p-client-list__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
/* 全カード共通: ラベル用の余白を先に確保（リンクの有無で高さが変わらない） */
.p-client-list__item {
    padding-bottom: 44px;
}

.p-client-list__item--link {
    position: relative;
    cursor: pointer;
    border-color: var(--color-teal);
    transition: box-shadow .2s, transform .2s, background .2s;
}
.p-client-list__item--link:hover {
    background: var(--white);
    box-shadow: 0 4px 16px rgba(44, 114, 96, .12);
    transform: translateY(-2px);
}

/* 右上の矢印アイコン */
.p-client-list__item--link::after {
    content: "→";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: var(--white);
    background: var(--color-teal);
    border-radius: 50%;
    transition: transform .2s;
}
.p-client-list__item--link:hover::after {
    transform: translateX(2px);
}

/* カード下部のラベル（絶対配置なので高さに影響しない） */
.p-client-list__item--link::before {
    content: "導入事例を見る";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    font-size: 11px;
    font-weight: bold;
    color: var(--color-teal);
    text-align: center;
}

/* トップページのスライダー用クラスを流用しているため、
   一覧ページ側で配置・折り返しの挙動を固定する */
.p-client-list__item .p-logo-slider__industry {
    position: static;
    flex: 0 0 auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.p-client-list__item img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.p-client-list__item:not(.p-client-list__item--link) {
    padding-top: 32px;
    padding-bottom: 32px;
}

.p-client-list__note {
    margin-top: 12px;
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* ===== Responsive: up to 768px ===== */
@media (max-width: 768px) {
    .section-header {
        padding: 0 24px;
    }
    .p-client-list {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }
    .p-client-list__item {
        min-height: 110px;
        padding-bottom: 38px;
        gap: 8px;
    }
    .p-logo-slider__industry {
        font-size: 10px;
    }
    .p-client-list__link {
        gap: 0px;
    }
    .p-client-list__item img {
        max-height: 50px;
    }
}