/* =========================================================
   components.css
   共通コンポーネント
   ========================================================= */


/* =========================================================
   Section
   ========================================================= */

.section-title {

    margin: 0;

    padding-left: .5rem;

    border-left: 5px solid var(--color-main);

    font-size: 1.3rem;

    font-weight: 700;

    line-height: 1.3;

}


/* =========================================================
   Section Layout
   ========================================================= */

.section-header {

    margin-bottom: 8px;

}

.section-body {

    margin-bottom: 40px;

}


/* =========================================================
   Card
   ========================================================= */

.site-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    background: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: 10px;

    padding: 1.25rem;

    box-shadow: 0 2px 8px rgba(0,0,0,.06);

    transition:
        border-color .2s,
        box-shadow .2s,
        transform .2s;

}

.site-card:hover {

    border-color: var(--color-main);

    box-shadow: 0 6px 18px rgba(0,0,0,.08);

}