/*==========================================
  共通
==========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*==========================================
  SNS Grid
==========================================*/

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:24px;
    max-width:1100px;
    margin:30px auto;
}

/*==========================================
  カード共通
==========================================*/

.card{
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    padding:20px;
}

.card h3{
    margin-bottom:15px;
    padding-bottom:8px;
    border-bottom:2px solid #003333;
    color:#003333;
    font-size:1.3rem;
}

/*==========================================
  Facebook
==========================================*/

.fb-wrap{
    width:100%;
    overflow:hidden;
}

.fb-page,
.fb-page span,
.fb-page iframe{
    max-width:100% !important;
}

/*==========================================
  YouTube
==========================================*/

.youtube-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
}

.youtube-wrap iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

/*==========================================
  Instagram
==========================================*/

.instagram-media{
    margin:auto !important;
}

.fb-wrap{
    width:100%;
    overflow:hidden;
}

.fb-page,
.fb-page span,
.fb-page iframe{
    display:block;
    max-width:100% !important;
}

/*==========================================
  スマホ
==========================================*/

@media (max-width:768px){

    .grid{
        grid-template-columns:1fr;
        margin:0;
        gap:15px;
    }

    .card{
        padding:10px;
    }

    main{
        padding:15px;
    }

}