@import url('https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&display=swap');

/*共通パーツ*/
.fitimg{
  height: auto;
  position: relative;
  overflow: hidden;
}
.fitimg::after{
  content: "";
  display: block;
  padding-top: 58%;
}
.fitimg img{
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease-out;
}

.top-area > .inner{
  padding: 10rem 0;
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
}
.top-area .h5title{
  margin-bottom: 5rem;
}

@media only screen and (max-width: 768px){
  .top-area > .inner{
    width: 95%;
    padding: 5rem 0;
  }
  .top-area .h5title{
    margin-bottom: 2rem;
  }
}

ul{
  list-style: none;
}
ul.dot{
  margin: 2rem auto;
  line-height: 1.6;
}
ul.dot.bold{
  font-weight: bold;
}
ul.dot > li{
  list-style: none;
  padding-left: 2rem;
  margin-bottom: 0.7rem;
  position: relative;
}
ul.dot > li::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #06015c;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 0.5em;
}


.h5-title{
  font-weight: bold;
  font-size: 130%;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.h5-title span{
  font-size: 90%;
  padding: 0.2rem;
  line-height: 1;
  background-color: #06015c;
  color: #fff;
}


/*HEADER*/
.headerfixed{
  background-color: transparent;
}
.header{
  background-color: rgba(0,0,0,0.6);
}
.header02{
  background-color: transparent;
  transition: all .2s ease-out;
}
@media only screen and (min-width: 1119px){
  body.top-fixed .header{
    background-color: rgba(0,0,0,0.8);
  }
  /*body.top-fixed .right.nav{
    background-color: rgba(255,255,255,0.9);
  }
  body.top-fixed .header02{
    filter: invert(100%);
  }*/
}
@media only screen and (max-width: 1200px){
  .header{
    background-color: transparent;
  }
}

/*MV*/
.top-mv{
  padding-left: 5rem;
}
.top-mv .mv-inner{
  position: relative;
}
.top-mv .mv-image{
  border-radius: 0 0 0 20px;
}
.top-mv .mv-image::after{
  padding-top: 95vh;
}
.top-mv .mv-copy{
  position: absolute;
  left: 5rem;
  bottom: 4%;
  color: #fff;
}
.top-mv .mv-copy .txt-jp{
  font-size: 180%;
  font-weight: bold;
  letter-spacing: 0.4em;
  margin-bottom: 4%;
}
.top-mv .mv-copy .txt-en{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 470%;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.top-mv .mv-copy .txt-en span{
  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 400;
  color: #49a2ee;
  line-height: 0;
  padding: 0 2%;
  display: inline-block;
  margin-left: -4rem;
  mix-blend-mode: hard-light;
}
.top-mv .mv-copy .txt-en span.day{
  font-size: 280%;
}
.top-mv .mv-copy .txt-en span.me{
  font-size: 250%;
  vertical-align: -webkit-baseline-middle;
  transform: rotate(-10deg);
}

/*動画*/
.mv-movie{
  width: 30%;
  max-width: 180px;
  padding: 1.7rem;
  position: absolute;
  top: 18%;
  right: 2%;
  cursor: pointer;
}
.mv-movie::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../lib/cmn-img/top_new/movie-deco.svg") center/contain no-repeat;
  animation: 25s 0s rotate linear infinite;
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.mv-movie::after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 30px solid #fff;
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.mv-movie .fitimg{
  border-radius: 100px;
}
.mv-movie .fitimg::after{
  padding-top: 100%;
}

@media only screen and (max-width: 768px){
  .top-mv{
    padding-left: 5%;
  }
  .top-mv .mv-image::after{
    padding-top: 65vh;
  }
  .top-mv .mv-copy{
    left: 6%;
  }
  .top-mv .mv-copy .txt-jp{
    font-size: 4vw;
  }
  .top-mv .mv-copy .txt-en{
    font-size: 8.5vw;
  }
  
  /*動画*/
  .mv-movie{
    top: 50%;
    padding: 1.1rem;
  }
}


/*学生寮について*/
.top-about{
}
.top-about > .inner{
  width: 100%;
}
.top-about .accordion:last-child{
  border-bottom: 1px solid #06015c;
}

.accordion{
  border-top: 1px solid #06015c;
  padding: 0 0 2%;
  
  scroll-margin-top: 145px;
}
.accordion .ac-toggle{
  display: flex;
  align-items: center;
  gap: 0 5rem;
  cursor: pointer;
  position: relative;
  cursor: pointer;
  transition: all .2s ease-out;
}
.accordion .ac-toggle:hover{
  color: #49a2ee;
}
.accordion .ac-toggle .ph{
  width: 30%;
  border-radius: 0 0 10px;
}
.accordion .ac-toggle .in-block{
  padding: 1rem 0;
  flex: 1;
}
.accordion .ac-toggle .in-block .h3title{
  border-left: none;
  padding-left: 0;
  margin-bottom: 1.3rem;
}
.accordion .ac-toggle .in-block .h3title .h3jptitle{
  font-size: 180%;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.accordion .ac-toggle .in-block .h3title .h3entitle{
  display: block;
}
.accordion .ac-toggle .in-block .txt{
  font-size: 140%;
  font-weight: bold;
}
@media only screen and (max-width: 768px){
  .accordion .ac-toggle{
    gap: 0 1.5rem;
  }
  .accordion .ac-toggle .ph::after{
    padding-top: 90%;
  }
  .accordion .ac-toggle .in-block .h3title{
    margin-bottom: 0.5rem;
  }
  .accordion .ac-toggle .in-block .h3title .h3jptitle{
    font-size: 105%;
    letter-spacing: 0;
    line-height: 1;
  }
  .accordion .ac-toggle .in-block .h3title .h3entitle{
    font-size: 40%;
  }
  .accordion .ac-toggle .in-block .txt{
    font-size: 80%;
  }
}


.accordion .ac-content{
  padding: 4% 3%;
  line-height: 2;
}
.accordion .ac-content .in-box{
  margin-top: 3.5rem;
}
.accordion .ac-content .h3title.center{
  border-left: none;
  padding-left: 0;
}
.accordion .ac-content .h3title .h3jptitle{
  font-size: 180%;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.accordion .ac-content .intro{
  font-size: 120%;
  margin: 1rem auto 2rem;
}

.dormitory-area{
  display: flex;
  gap: 1rem;
  text-align: center;
}
.dormitory-area > div .md{
  color: #fff;
  font-size: 110%;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
}
.dormitory-area .dormitory-list .fitimg::after{
  padding-top: 90%;
}
.dormitory-area .dormitory-list .d-name{
  margin-top: 1.3rem;
  font-size: 105%;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0;
}
.dormitory-area .dormitory-list .d-name span{
  display: block;
  color: red;
  font-size: 75%;
  margin-top: 0.3rem;
}
.dormitory-area .dormitory-list .tag{
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 5px;
  color: #00038a;
  font-size: 75%;
  line-height: 1;
  letter-spacing: -0.05em;
}
.dormitory-area .dormitory-list .button{
  width: 80%;
  margin-top: 1.5rem !important;
}
.dormitory-area .dormitory-list .button::after{
  display: none;
}
.dormitory-area .dormitory-list .button a{
  width: 100%;
  font-size: 80%;
  padding: 0.7rem 0;
}
/*関西大学運営寮*/
.dormitory-area .original{
  width: 79.5%;
}
.dormitory-area .original .md{
  background-color: #00038a;
}
.dormitory-area .original .dormitory-list{
  display: flex;
  gap: 1rem 0.4rem;
}
.dormitory-area .original .dormitory-list > li{
  width: calc(100%/4 - 0.4rem*4/5);
}
/*提携国際学生寮*/
.dormitory-area .partner{
  flex: 1;
}
.dormitory-area .partner .md{
  background-color: #00cae5;
}

@media only screen and (max-width: 768px){
  .accordion .ac-content{
    padding: 6% 4%;
  }
  .dormitory-area{
    flex-direction: column;
    flex-wrap: wrap;
  }
  .dormitory-area > div{
    width: 100% !important;
    margin-bottom: 3rem;
  }
  .dormitory-area > div ul{
    flex-wrap: wrap;
  }
  /*関西大学運営寮*/
  .dormitory-area .original{
  }
  .dormitory-area .original .dormitory-list{
    gap: 3rem 0.4rem;
    
  }
  .dormitory-area .original .dormitory-list > li{
    width: calc(100%/2 - 0.4rem/2);
  }
}


.accordion .ac-content .movie-box{
  max-width: 950px;
  margin: 0 auto;
}
.accordion .ac-content video{ width: 100%;}

.accordion .ac-content .button{
  display: block;
  max-width: 300px;
  margin: 4rem auto 0;
}

/*身に付くスキル*/
.ra-skill{
  max-width: 600px;
  margin: 1.5rem auto 6.5vh;
  display: flex;
  gap: 1px;
}

/*レジデント・アシスタントの声*/
.ra-voice{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0 2rem;
  margin: 1.5rem auto;
}
.ra-voice .txt-box{
  flex: 1;
}
.ra-voice .txt-box .h5-title{
  font-size: 150%;
  margin-bottom: 1rem;
}
.ra-voice .ph{
  width: 30%;
  text-align: center;
}
@media only screen and (max-width: 768px){
  .ra-voice{
    flex-direction: column;
  }
  .ra-voice > *{
    width: 100%;
  }
}

/*活動内容について*/
.activities-box{
  margin-top: 2rem;
}
.activities-box > ul{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.activities-box > ul > li{
  background-color: #f0f0f0;
  padding: 4% 3%;
  width: calc(100%/2 - 1rem/2);
}
.activities-box > ul > li ul.dot{
  margin-bottom: 0;
}

@media only screen and (max-width: 768px){
  .activities-box > ul{
    flex-direction: column;
  }
  .activities-box > ul > li{
    width: 100%;
  }
}


/*開閉アイコン*/
.ac-icon{
  width: 55px;
  height: 55px;
  background-image: linear-gradient( -135deg, rgb(50,111,225) 0%, rgb(86,184,220) 100%);
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  border-radius: 100px;
}
@media only screen and (max-width: 768px){
  .ac-icon{
    width: 25px;
    height: 25px;
  }
}
.ac-icon:after,
.ac-icon:before{
  content: "";
  display: inline-block;
  transition: all .4s ease;
  box-sizing: border-box;
  position: absolute;
  width: 45%;
  height: 1px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #fff;
}
.ac-icon:after{ transform:rotate(0deg);}
.ac-icon:before{ transform:rotate(90deg);}
/*＋、－切り替え*/
.open .ac-icon:after{ opacity:0;}
.open .ac-icon:before{ transform:rotate(180deg);}



/*NEWS*/
.news .dormbox{
  box-shadow: none;
  border-top: none;
  border-radius: 0;
}
@media only screen and (max-width: 768px){
  .news .dormbox{
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}





/*アクセスマップ*/
.top-accessMap{
  width: 95%;
  margin: 4rem auto 10rem;
  background-color: #ededee;
  border-radius: 20px;
}
.top-accessMap .wrap{
  max-width: 1000px;
  margin: 0 auto;
  padding: 10rem 0;
}
.top-accessMap .img-map{
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
}
/*.top-accessMap .img-map img{
  max-width: inherit;
  position: absolute;
  top: -2%;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  height: 104.9%;
  object-fit: cover;
  transition: all 1s ease-out;
}
.top-accessMap .img-map::after{
  content: "";
  display: block;
  padding-top: 125%;
}*/

@media only screen and (max-width: 768px){
  .top-accessMap .h5title .h5jptitle{
    letter-spacing: 0.05em;
  }
  .top-accessMap .h5title .h5entitle{
    letter-spacing: 0.01em;
  }
}




/* モーダルの背景 */
.modal {
  display: none; /* 初期非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
  z-index: 20000;
}

/* モーダル表示時 */
.modal.active {
  display: flex;
}

/* モーダル内の動画 */
.modal video {
  max-width: 90%;
  max-height: 90%;
}
@media only screen and (max-width: 768px){
  .modal video {
    max-width: 100%;
    max-height: 100%;
  }
}

/* 画像 */
.thumbnail {
  cursor: pointer;
  max-width: 300px;
  border: 2px solid #ccc;
}

/* 閉じるボタン */
.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}