@charset "utf-8";
/*共通設定*/
/*終わり*/  


/*<section class="interview">*/
.interview-grid {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
    gap: 16px;
    justify-items: center;
}

.interview-con {
    width: 100%;
    border: solid 1px #E7DCC2;
    box-shadow: 0 8px 24px rgba(34,57,90,0.04);
    background-color: #fff;
}

.interview-thumb-wrap {
    width: 100%;
}

.interview-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interview-txt-wrap {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.interview-name {
    color: #859A1F;
    font-size: 14px;
}

.interview .btn-wrap {
    text-align: center;
}
/*終わり*/


/*<section class="youtube">*/
.youtube-grid {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    justify-items: center;
}

.youtube-con {
    width: 100%;
    height: 200px;
    transition: 0.2s;
}

.youtube-con:hover {
    cursor: pointer;
    opacity: 0.8;
}

.youtube-con iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.youtube .btn-wrap {
    text-align: center;
}
/*終わり*/


/*<section class="contact">*/
.contact {
    background-image: url(../img/common/voice_contact_pc_bg.jpg);
}
/*終わり*/


/*タブレット*/
@media (max-width: 1024px) {  
/*共通設定*/
/*終わり*/  


/*<section class="youtube">*/
    .youtube-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
/*終わり*/
}
  
  
/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
/*終わり*/  


/*<section class="contact">*/
    .contact {
        background-image: url(../img/common/voice_contact_sp_bg.jpg);
    }
/*終わり*/

}