.event-info, .course-info{
    margin: 0;
    padding: 2vw 0;}

/*ワークショップイベント*/
.event-info-banner{
    width:100%;
    margin: 1vw 0;}
.event-info-banner img{
    width: 95%;
    height: 20vw;
    object-fit: cover;}

/*教室*/
.course-info__card{
    display: flex;
    gap:3%;
    width: 95%;
    margin: 1vw 1vw 3vw;
    padding: 1.5vw;
    background-color: #fff;
    border-radius: 2vw;}
.course-info__image{
    width:45%;}
.course-info__image img{
    width:100%;
    height:22vw;
    object-fit: cover;}
.course-info__overview{
    width:50%;}
.course-info__title{
    font-size:1.8vw;
    font-weight:bold;
    margin:1vw 0 2vw;}
.course-info__text{
    font-size:1.3vw;
    line-height: 1.5;}
.course-info-modal_teacher{
    display: block;
    width:100%;
    padding: 0.5vw 1vw;
    margin: 2vw 0 1vw;
    text-decoration: none;
    color:#000;
    border:1px solid #000;
    border-radius: 0.5vw;
    cursor: pointer;}
.course-info-modal_detail{
    display: block;
    width: 25vw;
    padding: 1vw 2vw;
    text-decoration: none;
    background-color: #7F0303;
    color: white;
    border-radius: 5vw;
    margin: 2vw auto;
    text-align: center;
    cursor: pointer;}
.course-info-modal_detail:hover {
    opacity:0.7;} 

/*モーダルウィンドウ*/
.modal-popup_teacher,.modal-popup_detail{
    position: fixed;
    top: 50%;    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: rgba(255,255,255,100%);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index:100;}
.modal-popup_teacher:before,.modal-popup_detail:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;}
.modal-popup_teacher.active,.modal-popup_detail.active{
    opacity: 1;
    visibility: visible;}
.modal-popup_teacher .modal-body,.modal-popup_detail .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;}
.modal-popup_teacher .modal-close,.modal-popup_detail .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #000;
    cursor: pointer;}
.modal-popup_teacher .modal-content,.modal-popup_detail .modal-content{
    text-align: left;}

/*--講師--*/
.modal-popup_teacher{
    width: 70vw;
    padding: 3vw 1vw;}
.modal-popup_teacher .modal-close{
    top: -2vw;    right: -2vw;}
.modal-popup_teacher .modal-content{
    display:flex;
    gap:2%;}
.profile-image{
    width:10vw;}
.profile-image img{
    width:100%;
    height:10vw;
    object-fit: cover;
    border-radius: 10vw;}
.profile-detail {
    padding:0 2vw;}
.profile-detail__name{
    font-size:1.8vw;
    margin-bottom:1vw;
    font-weight:bold;}
.profile-detail__text{
    font-size:1.3vw;
    line-height:1.5;}
    
/*--教室詳細--*/
.modal-popup_detail{
    width: 80vw;
    padding:4vw 0;}
.modal-popup_detail .modal-body{
    vertical-align: baseline;}
.modal-popup_detail .modal-close{
    top: -3vw;    right: -3vw;}
.modal-popup_detail .modal-content{
    display:flex;
    gap:2%;}
.slick-dots li.slick-active button:before{
    color: black;}
.course-detail_text {
    padding:0 2vw;}
.course-detail__title{
    font-size:1.8vw;
    margin-bottom:1vw;
    font-weight:bold;}
.course-detail__datetime{
    font-size: 1.3vw;
    margin: 0.5vw 0 1vw;
    padding: 0.5vw 1vw;
    border: 1px solid #bbb;}
.course-detail__text{
    font-size:1.3vw;
    line-height:1.5;}
.course-detail__btn{
    display: block;
    width: 25vw;
    padding: 1vw 2vw;
    text-decoration: none;
    background-color: #7F0303;
    color: white;
    border-radius: 5vw;
    margin: 2vw auto;
    text-align: center;
    cursor: pointer;}
.course-detail__btn:hover {
    opacity:0.7;} 
 
@media screen and (max-width:700px){
.event-info-banner {
    display: block;
    text-align: center;
    width: 95%;
    margin: 1vw auto 5vw;}
.event-info-banner img {
    width: 100%;
    height: 30vw;
    object-fit: cover;}
.course-info__card {
    flex-direction: column;
    gap: 1vw;
    margin: 5vw auto;
    padding: 3vw;}
.course-info__image,.course-info__overview {
    width: 100%;}
.course-info__image img{
    height:45vw;}
.course-info__title {
    font-size: 5vw;}
.course-info__text {
    font-size: 3vw;
    line-height: 5vw;}
.course-info-modal_teacher {
    padding: 1vw 2vw;
    margin: 3vw 0 6vw;}
.course-info-modal_detail {
    width: 75%;
    padding: 2vw;}
.modal-popup_teacher,.modal-popup_detail{
    width: 95vw;
    height: 65vh;
    background: rgba(255, 255, 255, 85%);}
.modal-popup_teacher .modal-close {
    top: -12vw;
    right: -2vw;}
.modal-popup_teacher .modal-content{
    flex-direction: column;
    gap: 5vw;}
.profile-image {
    width: 50%;
    margin:auto;}
.profile-image img {
    height: 40vw;
    border-radius: 50vw;}
.profile-detail__name {
    font-size: 5vw;}
.profile-detail__text {
    font-size: 3vw;}
.modal-popup_detail .modal-content{
    display: block;
    margin-top:5vw;}
.slick-prev:before, .slick-next:before,.slick-dots{
    display: none;}
.course-detail_images {
    width: 100%;}
.course-detail_images img{
    width:100%;
    height:50vw;
    object-fit: cover;}
.slick-slide img{
    width: 95%!important;
    height: 50vw;
    object-fit: cover;}
.slick-dots li button:before{
	font-size:3vw!important;}
.slick-dotted.slick-slider {
    margin-bottom: 12vw;}
.course-detail__title{
    font-size:5vw;}
.course-detail__datetime{
    font-size:3.5vw;
    padding:1.5vw 3vw;}
.course-detail__text{
    font-size:3vw;
    line-height:5vw;}
.course-detail__btn{
    width:75%;
    padding:2vw 5vw;
    margin:5vw auto;}
.pc{display: none;}
}
@media screen and (min-width:701px){
.course-detail_images{
    width:40vw;}
.course-detail_images img{
    width:100%;
    height:25vw;
    object-fit: cover;}
.slick-slide img{
    width: 40vw!important;
    height: 25vw;
    object-fit: cover;}
.slick-dots li button:before{
	font-size:1.5vw!important;}
.smp{display: none;}
}