@charset "utf-8";

/* --------------------------------------------------------- */
/* /campuslife/club.css */
/* --------------------------------------------------------- */

#title{width:58.909%;}
.txt{font-size:15px;line-height:186%;}

/* club --------------------------- */
#club{}
#club h2{margin-bottom:2%;padding-bottom:0.5em;font-size:24px;line-height:150%;border-bottom:2px solid #ad1e23;margin-bottom:40px;}
#club .block{margin-bottom:60px;}

#club .list{display:flex;flex-wrap:wrap;}
#club .list li{width:31.111%;margin-left:3.3335%;margin-bottom:40px;}
#club .list li:nth-child(3n+1){margin-left:0;}

#club .list li a{display:block;text-decoration: none;}
#club .list li .img{margin-bottom:12px;}
#club .list li .name{background:url(../../img/campuslife/club/icon1.png) no-repeat left center;padding-left:42px;font-weight:700;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;line-height:120%;min-height:30px;}
#club .list li .name.sp{display:none;}
#club .list li .name small{font-size:12px;font-weight:400;}


/* popup ------------------------------ */
#popupWrapper{position:relative;}
#popupWrapper.scriptOn{position:fixed;left:0;width:100%;top:-100%;height:100%;margin-top:0%;z-index:20;}
#popupWrapper.opened{top:0%;}

#popupWrapper.scriptOn #popupMain{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;}

.popupContents{position:relative;margin:0 auto;z-index:1;}

.popupBg{position:fixed;left:0;width:100%;top:0;height:0%;background-color:rgba(51,51,51,0.8);z-index:1;}
#popupWrapper.opened #popupMain .popupBg{height:100%;}

.ps-scrollbar-y-rail{z-index:2;}
.popupContents .popupBg{opacity:0;}
#popupWrapper.scriptOn .perfectScroll{position:absolute;left:0;width:100%;top:0;height:100%;z-index:2;overflow:hidden;}

.popup{width:100%;max-width:900px;margin:100px auto;background:#fff;position:relative;z-index:2;}
#popupWrapper.scriptOn .popup{display:none;}

.program-popup{padding:30px;padding-bottom:98px;text-align:center;}
.program-popup .img1{}
.program-popup .title{position:relative;background:#ad1e23;color:#fff;text-align:center;padding:6px 0 11px;max-width:700px;margin-left:auto;margin-right:auto;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:-45px;margin-bottom:35px;z-index:1;height:80px;display:flex;flex-direction:column;justify-content:center;}
.program-popup .title h3{font-size:28px;font-weight:700;text-align:center;}
.program-popup .title h3 small{font-size:20px;}
.program-popup .title .en{font-size:16px;font-weight:700;text-align:center;}
.program-popup .txt{text-align:center;max-width:700px;margin-left:auto;margin-right:auto;}
.program-popup .img2{margin-top:35px;display:flex;justify-content:center;}
.program-popup .img2 > div{margin-left:5px;margin-right:5px;}



body.popupOpen{position:fixed;width:100%;}
#popupMain .ps-container>.ps-scrollbar-y-rail{opacity:0.2;}

/* 以下はポップアップの内容に合わせて追記・修正してください。 */
.popup .close{position:absolute;width:110px;height:110px;color:#fff;right:-1px;bottom:-1px;z-index:9;background:#ad1e23;clip-path:polygon(100% 0,100% 100%,0 100%);cursor:pointer;}
.popup .close:before{position:absolute;right:15px;bottom:25px;content:"Close";font-family:"Noto Serif JP",serif;}

.popup{}
/* ---------------------------------------------------------- */



@media screen and (max-width: 1240px){

.txt{font-size:1.21vw;}
#club h2{font-size:1.936vw;border-width:0.162vw;}


/* popup ------------------------------ */
.popup{width:72.581%;margin:8.065% auto;}

/* 以下はポップアップの内容に合わせて追記・修正してください。 */
.popup{}
/* ---------------------------------------------------------- */

}



@media screen and (max-width: 750px){

#title{width:62.647%;}
.txt{font-size:3.2vw;line-height:175%;}

/* club --------------------------- */
#club h2{padding-bottom:2.942%;font-size:4.267vw;line-height:100%;border-width:0.267vw;margin-bottom:20px;}
#club .block{margin-bottom:40px;}

#club .list{display:flex;flex-wrap:wrap;}
#club .list li{width:47.794%;margin-left:4.412%;margin-bottom:20px;}
#club .list li:nth-child(3n+1){margin-left:4.412%;}
#club .list li:nth-child(2n+1){margin-left:0;}
#club .list li .img{margin-bottom:10px;}
#club .list li .name{background-size:20px;padding-left:25px;font-size:3.2vw;min-height:20px;}
#club .list li .name small{font-size:2.667vw;font-weight:700;}
#club .list li .name.sp{display:flex;}
#club .list li .name.pc{display:none;}


/* popup ------------------------------ */
.popup{width:90.666%;max-width:640px;height:auto;margin:24vw auto;}

/* 以下はポップアップの内容に合わせて追記・修正してください。 */
.popup .close{margin-top:40px;font-size:4vw;max-width:26.667vw;padding:10px;}

.popup{}
.program-popup{padding:10px;padding-bottom:80px;}
.program-popup .title{max-width:72vw;height:12vw;margin-top:-6.66vw;margin-bottom:5.6vw;padding-top:3px;padding-bottom:6px;}
.program-popup .title h3{font-size:3.733vw;}
.program-popup .title h3 small{font-size:2.933vw;}
.program-popup .title .en{font-size:2.4vw;}
.program-popup .txt{padding-left:10px;padding-right:10px;}
.program-popup .img2{margin-top:25px;max-width:61.333vw;display:block;margin-left:auto;margin-right:auto;}
.program-popup .img2 > div{width:auto;margin-left:0;margin-right:0;margin-bottom:4px;}
.program-popup .img2 > div:last-child{margin-bottom:0;}


.popup .close{width:70px;height:70px;}
.popup .close:before{right:8px;bottom:12px;font-size:3.2vw;}
/* ---------------------------------------------------------- */


}