@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Noto+Sans+JP:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

/* styles
-------------------------------------------------------------- */
body,
button,
input,
select {
	padding: 0;
	margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Yu Gothic", "游ゴシック", Osaka, sans-serif;
    font-style: normal;
    font-weight: 300;
    -webkit-text-size-adjust: 100%;
}
body{
    font-size: 16px;
    background: #fff;
}
button,
input,
select{
    max-width: 100%;
}
th{
    font-weight: normal;
    text-align: left;
}
a{
    color: #000;
    text-decoration: none;
}


/* SP */
@media only screen and (max-width: 767px) {
    body{
        font-size: 15px;
    }
}


/* typography
-------------------------------------------------------------- */
.title,
.content h2{
    width: 700px;
    max-width: 100%;
	text-align: center;
    margin: 0 auto 40px;
}


.subtitle,
.the-content h3 {
	font-size: 16px;
	font-weight: 500;
	text-align: center;
    line-height: 1.75;
    margin-bottom: 70px;
}

/* SP */
@media only screen and (max-width: 767px) {
    .title,
    .the-content h2{
        font-size: 30px;
        margin: 50px 0 10px;
    }
    .subtitle,
    .the-content h3{
        font-size: 16px;
        margin-bottom: 20px;
    }
    .the-content h4{
        font-size: 20px;
        margin-bottom: 6px;
    }

}


/* header
-------------------------------------------------------------- */
.site-title{
    width: 158px;
    z-index: 10;
}



/* PC */
@media only screen and (min-width: 768px) {
header {
    position: fixed;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 82px;
    padding: 0 67px;
    background: #f1c400;
    transform: translateY(-100%);
    transition: .3s;
}
header.scrollin{
    transform: translateY(0%);
}

    .site-title{
        margin-right: 48px;
    }
    .header-menu{
        display: none;
    }
    .menu{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu-item a{
        position: relative;
        display: block;
        padding: 33px 2.6vw;
        line-height: 1;
    }
    .menu-item a:after {
        content: '';
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom: 20%;
        left: 10%;
        /*線の形状*/
        width: 80%;
        height: 2px;
        background:#2d2d96;
        /*アニメーションの指定*/
        transition: all .3s;
        transform: scale(0, 1);/*X方向0、Y方向1*/
        transform-origin: center top;/*上部中央基点*/
    }
    .menu-item a:hover:after {
        transform: scale(1, 1);/*X方向にスケール拡大*/
    }
}


/* header pad */
@media only screen and (max-width: 1280px) and (min-width: 768px) {
    header{
        padding: 0 30px;
        font-size: 14px;
    }
    .site-title {
      margin-right: 20px;
    }
}


/* header SP */
@media only screen and (max-width: 767px) {
header {
    position: fixed;
    z-index: 10000;
    width: 100%;
    transition: .3s;
}
    .site-title{
        background: #f1c400;
        width: 100%;
        padding: 15px 30px;
        z-index: 4;
    }
    header > .site-title{
        transform: translateY(-100%);
        transition: .3s;
    }
    header > .site-title.scrollin{
        transform: translateY(0);
    }
    .site-title img{
        max-width: 196px;
    }
    .header-navbar_menu{
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        transform: translateX(-100%);
        transition: .3s;
        background: #fff;
        z-index: 5;
    }
    .header-navbar_menu.open{
        transform: translateX(0%);
    }
    #menu-global{
        font-size: 18px;
        width: 100%;
        padding: 0 30px;
    }
    #menu-global li{
        position: relative;
        text-align: center;
    }
    #menu-global li:not(:last-child){
        border-bottom: 1px solid #b3b3b3;
    }
    #menu-global li a{
        display: block;
        padding: 18px;
    }
    #menu-global li a:after{
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        transform: rotate(-45deg);
        position: absolute;
        right: 18px;
        top: calc(50% - 3px);
    }

    .header-menu {
        position: absolute;
        right: 0;
        top: 0;
        width: 64px;
        height:48px;
        display: block;
        z-index: 10;
    }
    .navbar{
        position: relative;
        display: block;
        width: 64px;
        height:48px;
    }
    .header-btn{
        display: block;
        width: 64px;
        height:48px;
        background: rgba(0,0,0,.15);
    }
    .header-btn span {
        position: absolute;
        right: 20px;
        top: 17px;
        display:block;
        width: 24px;
        height: 2px;
        background: #fff;
        -webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
        transition: all .6s cubic-bezier(.19,1,.22,1);
    }
    .header-btn span:nth-child(2) {
        top: 24px;
        right: 20px;
    }
    .header-btn span:nth-child(3) {
        top: 31px;
        right: 20px;
    }
    .header-btn.open span, 
    .header-btn.open span:nth-child(3){
        top: 24px;
    }
    .header-btn.open span:nth-child(2) {
        display:none;
    }
.header-btn.open span {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.header-btn.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
    .sp-app_banner{
        text-align: center;
    }
    .sp-app_banner h2{
        font-size: 15px;
        font-weight: bold;
        color: #2d2d96;
        text-align: center;
        margin: 35px auto 10px;
    }
    .sp-app_banner figure,
    .sp-app_banner img{
        display: inline;
        height: 40px;
        width: auto;
    }
    sp-app_banner a:last-child img{
        margin-left: 15px;
    }
    ul.sp-submenu{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        margin-top: 30px;
    }
    .sp-submenu li:first-child{
        border-right: 1px solid #000;
        padding-right: 15px;
        margin-right: 15px;
    }
    .sp-submenu li:last-child{
        width: 100%;
        margin-top: 10px;
    }
}


/* footer
-------------------------------------------------------------- */
footer {
	padding: 100px 0;
    background: #f2f2f2;
}
footer .footer-app{
    position: relative;
    border: 1px solid #2d2d96;
    margin-bottom: 85px;
}
footer .footer-app:after{
    position: absolute;
    left: 0;
    bottom: -12px;
    content: '';
    display: block;
    width: 100%;
    height: 12px;
    background: url(/ja/admissions/keionavi/img/bg-footer.png);
}
.footer-app-shoulder span{
    display: block;
    color: #2d2d96;
    line-height: 34px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.26em;
    text-transform:uppercase;
}
.footer-app-main{
    display: flex;
    flex-wrap: wrap;
}
.footer-app_logo{
    padding: 26px 20px;
    width: 166px;
    flex-basis: 166px;
}
.footer-app_text{
    width: calc(100% - 166px);
    flex-basis:calc(100% - 166px);
    padding-top: 26px;
}
.footer-app_text h2{
    font-size: 24px;
    font-weight: bold;
    color: #2d2d96;
    margin-bottom: 7px;
}
.footer-app_list{
    font-size: 15px;
    font-weight: 500;
}
.footer-app_list li{
    position: relative;
    margin-bottom: 7px;
    padding-left: 1.2em;
    letter-spacing: 0.04em;
}
.footer-app_list li:before{
    content: '■';
    color: #2d2d96;
    position: absolute;
    left: 0;
    top: 0;
}
.footer-app_img{
    width: 38%;
    flex-basis: 38%;
    align-self: flex-end;
}
.footer-copyright{
    text-align: center;
    margin: 0 auto;
}
.footer-logo img{
    display: inline-block;
    max-width: 280px;
    margin-bottom: 45px;
}
ul.footer-menu{
    display: flex;
    justify-content: center;
    margin-bottom: 23px;
    font-size: 12px;
}
.footer-copyright p{
    font-size: 14px;
}

.pagetop{
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 10000;
    width: 88px;
}
.pagetop img{
    display: inline-block;
}

/* PC */
@media only screen and (min-width: 768px) {
.footer-inner{
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
}
footer .footer-app{
    display: flex;
}
.footer-app-shoulder{
    flex-basis: 34px;
    width: 34px;
}
.footer-app-shoulder span{
    transform: translate(0,-20px) rotate(90deg);
    transform-origin: 0% 100%;
}
.footer-app-main{
    flex-basis: calc(62% - 35px);
    border-left: 1px solid #2d2d96;
}
.footer-app_banner{
    display: flex;
    width: 100%;
    flex-basis:100%;
    padding: 15px 0 26px 170px;
}
.footer-app_banner img{
    width: auto;
    height: 40px;
    margin-right: 20px;
}
.footer-menu li:not(:first-child){
    border-left: 1px solid #000;
    margin-left: 15px;
    padding-left: 15px;
}
}


/* SP */
@media only screen and (max-width: 767px) {
    footer{
        padding: 60px 30px 20px;
    }
    .footer-app-shoulder{
        padding-left: 20px;
    }
    .footer-app_img{
        display: none;
    }
.footer-app-main{
    border-top: 1px solid #2d2d96;
}
.footer-app_logo{
    padding: 10px 10px;
    width: 46.8%;
    flex-basis: 46.8%;
}
.footer-app_text{
    order: 3;
    width: 100%;
    flex-basis:100%;
    padding: 0 20px 20px;
}
.footer-app_text h2{
    font-size: 18px;
    margin-bottom: 7px;
}
.footer-app_list{
    font-size: 14px;
}
.footer-app_banner{
    width: 53%;
    flex-basis:53%;
    padding: 20px 20px 20px 0;
}
.footer-app_banner img{
    width: auto;
    height: 40px;
    margin-bottom: 10px;
}
.footer-logo img{
    max-width: 63.2vw;
    margin-bottom: 35px;
}
    ul.footer-menu{
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .footer-menu li{
        margin-bottom: 10px;
    }
.footer-menu li:nth-child(2){
    border-left: 1px solid #000;
    margin-left: 15px;
    padding-left: 15px;
}
.footer-menu li:last-child{
    display: block;
    width: 100%;
}
.pagetop{
    right: 15px;
    bottom: 15px;
    width: 58px;
}
}


/* Posts/Articles
-------------------------------------------------------------- */

article section{
    margin: 100px auto 130px;
}

article .the-content a {
	text-decoration: none;
    opacity: 1;
    transition: all .2s;
}
article .the-content p {
    line-height: 1.75;
}
article .the-content img {
	max-width: 100%;
	height: auto;
}

/* PC */
@media only screen and (min-width: 768px) {
body .main-fluid{
}
article .the-content a:hover,
input[type="submit"]:hover{
    opacity: .7;
}
}

/* SP */
@media only screen and (max-width: 767px) {
article section{
    margin: 30px auto 80px;
}
}



/* Misc & mixens
-------------------------------------------------------------- */
/* PC */
@media only screen and (min-width: 768px) {
    .sp{
        display: none;
    }
}

/* SP */
@media only screen and (max-width: 767px) {
    .pc{
        display: none;
    }
}


.en{
    font-family: 'Montserrat', sans-serif;
}
.text-center{
    text-align: center;
}
.container{
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* SP */
@media only screen and (max-width: 767px) {
.container{
    margin: 0 25px;
    width: calc(100% - 50px);
}
}


.arrow{
    background: url(/ja/admissions/keionavi/img/icon-arrow.svg)no-repeat left center;
    background-size: 1.125em auto;
    padding-left: 26px;
    font-size: 16px;
    font-weight: 500;
}

/* PC */
@media only screen and (min-width: 768px) {
}
/* SP */
@media only screen and (max-width: 767px) {
}



.btn{
    position: relative;
    display: inline-block;
    line-height: 60px;
    border-radius: 30px;
    border:1px solid #000;
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    min-width: 275px;
    overflow: hidden;
    z-index: 2;
}
.btn:before{
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 0;
    height: 100%;
    background: #f1c400;
    border-radius: 30px;
    transition: .3s;
    z-index: -1;
}
.btn span{
    display: block;
    width: 100%;
    height: 100%;
    background:  url(/ja/admissions/keionavi/img/icon-arrow2.svg) no-repeat right 20px center;
    background-size: 14px auto;
    padding: 0 36px;
}
.btn:hover,
article .the-content a.btn:hover{
    opacity: 1;
}
.btn:hover:before{
    width: 100%;
}
.btn-w{
    background: #fff;
}
.btn.btn-w:hover{
    background: #f2d041;
}

/* SP */
@media only screen and (max-width: 767px) {

.btn{
    width: 66.4%;
    font-size: 15px;
}
.btn + .btn{
    margin-left: 24px;
}
}



.slick-list,
.main-fluid .slick-list,
.slick-slider{
    padding: 0;
    margin: 0;
}
.slick-slide,
.main-fluid .slick-slide{
    height: auto;
}
ul.slick-dots {
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    margin: 50px auto 0;
}
.slick-dots li button{
    box-shadow: none;
    background: #e9eaea;
    border: none;
    appearance:none;
    text-indent: -9999px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    margin: 0 9px;
}
.slick-dots li button[aria-selected="true"] {
    background: #040000;
}

.slick-prev{
    position: absolute;
    left: calc(50% - 330px);
    top: calc(50% - 20px);
    z-index: 1000;
    color: transparent;
}
.slick-next{
    position: absolute;
    left: auto;
    right: calc(50% - 320px);
    top: calc(50% - 20px);
    z-index: 1000;
    color: transparent;
}
.slide-arrow{
    width: 13px;
    height: 13px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}
.icon-prev{
    transform: rotate(135deg);
    position: absolute;
    left: calc(50% - 300px);
    top: calc(50% - 15px);
    z-index: 1000;
    pointer-events: none;
}
.icon-next{
    transform: rotate(-45deg);
    position: absolute;
    left: auto;
    right: calc(50% - 300px);
    top: calc(50% - 15px);
    z-index: 1000;
    pointer-events: none;
}

/* SP */
@media only screen and (max-width: 767px) {
    .slick-prev{
    left: 0px;
    top: calc(50% - 20px);
}
    .icon-prev{
    left: 10px;
}
.slick-next{
    right: 0px;
    top: calc(50% - 20px);
}
    .icon-next{
    right: 10px;
}
}

/* youtube */
.iframeset {
  position: relative;
  width: 100%;
  padding-top:56.25%;
  overflow:hidden;
}
.iframeset iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
a[class*="lightcase-icon-"].lightcase-icon-close {
  top: 97px;
}


/* fade animation */
.fadein{
    opacity: 0;
    transform: translateY(50px);
    transition: all 2s;
}
.fadein.fadein2{
    transition: all 2s .3s;
    transform: translateY(50px);
}
.fadein.fadein3{
    transition: all 2s .6s;
    transform: translateY(50px);
}
.fadein.scrollin{
    transform: translateY(0);
    opacity: 1;
}


/* home
-------------------------------------------------------------- */
/* mv */
.page-header{
    position: relative;
    width: 100%;
    background: #f1c400;
}
.page-header_title{
    position: relative;
    text-align: center;
    margin: 0 auto 30px;
    padding-top: 70px;
    z-index: 10;
}
.page-header_title img{
    display: inline;
    width: 693px;
}
.page-header h3{
    position: relative;
    text-align: center;
    padding-bottom: 70px;
    font-size: 20px;
    letter-spacing: .2em;
    z-index: 11;
}

.page-header_mv{
    position: relative;
}
.page-header_mvImg{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.cube {
  position: absolute;
  top: 20%;
  left: 5vw;
  width: 10px;
  height: 10px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  transform-origin: top left;
  transform: scale(0) rotate(0deg) translate(-50%, -50%);
  animation: cube 12s ease-in forwards infinite;
}
  
  .cube:nth-child(2n) {
    border-color: rgba(255,255,255,.3);
  }
  .cube:nth-child(2) {
    animation-delay: 2s;
    left: 30vw;
    top: 70%;
  }
  .cube:nth-child(3) {
    animation-delay: 4s;
    left: 75vw;
    top: 50%;
  }
  .cube:nth-child(4) {
    animation-delay: 6s;
    left: 98vw;
    top: 40%;
  }
  .cube:nth-child(5) {
    animation-delay: -4s;
    left: 15vw;
    top: 70%;
  }
  .cube:nth-child(6) {
    animation-delay: -2s;
    left: 35vw;
    top: 5%;
  }
  .cube:nth-child(8) {
    animation-delay: -3s;
    left: 82vw;
    top: 85%;
  }


.circle {
  position: absolute;
    left: 2vw;
    top: 80%;
  width: 10px;
  height: 10px;
  border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  transform-origin: top left;
  transform: scale(0) translate(-50%, -50%);
  animation: cube 12s ease-in forwards infinite;
}
  
  .circle:nth-child(2n) {
    border-color: rgba(255,255,255,.3);
  }
  .circle:nth-child(9) {
    animation-delay: 4s;
    left: 62vw;
    top: 30%;
  }
  .circle:nth-child(10) {
    animation-delay: 6s;
  top: 20%;
  left: 12vw;
  }
  .circle:nth-child(11) {
    animation-delay: -4s;
    left: 90vw;
    top: 10%;
  }
  .circle:nth-child(12) {
    animation-delay: 2s;
    left: 93vw;
    top: 85%;
  }

@keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);   
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%); 
    opacity: 0;
  }
}


.icon-scroll{
    position: absolute;
    left: 123px;
    bottom: -55px;
    width: 13px;
    height: 115px;
}
#menu-global2{
    background: #f2f2f2;
}

/* PC */
@media only screen and (min-width: 768px) {
}
/* header pad */
@media only screen and (max-width: 1280px) and (min-width: 768px) {
    .icon-scroll{
        left: 60px;
    }
}

/* SP */
@media only screen and (max-width: 767px) {
.page-header_title img{
    width:calc(100% - 60px);
}
.page-header h3{
    font-size: 12px;
}
}


/* voices */
.voices-container h3{
    position: relative;
    margin: -14px calc(6% + 37px) 0 6%;
    background-color: #2d2d96;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 21px 28px;
    height: 96px;
}
.voices-container h3:after{
    content: '';
    display: block;
    width: 37px;
    height: 100%;
    border-top: 96px solid #2d2d96;
    border-right: 37px solid transparent;
    position: absolute;
    right: -37px;
    top: 0;
}
.voices-slide{
    position: relative;
}


/* PC */
@media only screen and (min-width: 768px) {
#voices{
    background: url(/ja/admissions/keionavi/img/bg-voices.svg) no-repeat right 5px top 10px;
    background-size: auto 127px;
}
.voices-container{
    margin-bottom: 220px;
}
.voices-container img{
    width: 100%;
}
    .voices-slide .icon-prev{
        left:30px;
    }
    .voices-slide .slick-prev{
        left:20px;
    }
    .voices-slide .icon-next{
        right:30px;
    }
    .voices-slide .slick-next{
        right:20px;
    }
}

/* SP */
@media only screen and (max-width: 767px) {
.voices-container h3{
    margin: -14px calc(6% + 37px) 0 6%;
    font-size: 12px;
    padding: 11px 14px;
    height: 58px;
}
    .voices-btnset{
        text-align: center;
        margin-top: 20px;
    }
}



/* life */
#life{
    position: relative;
    background: url(/ja/admissions/keionavi/img/bg-life2.svg) no-repeat center top 80px,url(/ja/admissions/keionavi/img/bg-life.svg) no-repeat left 5px top 10px;
    background-size: 80vw auto,auto 160px;
    padding-bottom: 250px;
    overflow-x: hidden;
}
#life h2 + h3{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
}

.life-slide{
    position: relative;
}
.life-container{
    position: relative;
    overflow: visible;
}
.life-container .slick-list{
    overflow: visible;
}
.life-item{
    position: relative;
}
.life-item:not(.slick-current):after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00000069;
}
.life-item img{
    width: 100%;
}
.life-text h3{
    font-weight: 500;
    font-size: 10px;
}



/* PC */
@media only screen and (min-width: 768px) {
.life-container{
    margin-top: 130px;
}
.life-item {
    position: relative;
    margin: 0 3px;
    width: 275px;
    height: 200px;
    height: auto;
  transform: scale(1);
  transition: transform .3s;
}
.life-item.slick-center{
  opacity: 1;
    height: auto;
  transform: scale(1.8);
    z-index: 999;
}
.life-text{
    font-size: 10px;
    margin-top: 5px;
}
.life-item:not(.slick-center) .life-text{
    display: none;
}
.life-text > *{
}
}

/* SP */
@media only screen and (max-width: 767px) {
#life{
    background: url(/ja/admissions/keionavi/img/bg-life2.svg) no-repeat center top 50px;
    background-size: 1300px auto;
    padding-bottom: 40px;
    overflow-x: hidden;
}
    .life-item{
        width: 100vw;
        padding: 0 8vw;
    }

    .life-text{
        margin-top: 10px;
    }
    .life-text h3{
        font-size: 15px;
    }
    
    .life-slide .slide-arrow{
        border-right: 3px solid #2d2d96;
        border-bottom: 3px solid #2d2d96;
    }
}



/* campus */
#campus h2 + h3{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
}

.campus-container{
    position: relative;
    z-index: 10;
}
.campus-container div.place{
    display: none;
    width: 20px;
    height: 20px;
    background: url(/ja/admissions/keionavi/img/icon-campus-hover.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
}
.campus-item figure{
    position: relative;
    z-index: 1;
}
.campus-item dl{
    position: relative;
    z-index: 2;
}
.campus-item dt{
    position: relative;
    background: #2d2d96;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    padding: 16px 20px;
}
.campus-item dt:before{
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    display: block;
    width: 15px;
    height: 1px;
    background: #fff;
    line-height: 1;
    transition: .3s;
}
.campus-item dt:after{
    content: '';
    position: absolute;
    top: calc(50% - 7px);
    right: 32px;
    display: block;
    width: 1px;
    height: 15px;
    background: #fff;
    line-height: 1;
    transition: .3s;
}
.campus-item dt.open:before,
.campus-item dt.open:after{
    content: '';
    transform: rotate(45deg);
}
.campus-item dd{
    display: none;
    width: 100%;
    background: #fff;
    box-shadow: 0 5px 4px #0000000f;
    padding: 20px;
}
ul.campus-list{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}
.campus-list li{
    margin-bottom: 6px;
}
.campus-item h4{
    font-size: 14px;
    font-weight: 500;
    color: #2d2d96;
    border-bottom: 1px solid #2d2d96;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
ul.campus-list2{
    font-weight: bold;
    margin-bottom: 20px;
}
ul.campus-list2 small{
    font-size: 12px;
    display: block;
    font-weight: normal;
    margin-bottom: 5px;
}

.campus-lapse{
    position: relative;
    z-index: 1;
    background: url(/ja/admissions/keionavi/img/bg-campus2.svg) no-repeat left center;
    background-size: auto 100%;
    margin-top: 70px;
    padding: 30px 0;
}
.campus-lapse-container .iframeset{
    width: 53%;
    padding-top: 29.8125%;
}
.campus-lapse_text{
    margin-left: 30px;
}
.campus-lapse_text h4{
    font-size: 28px;
    font-weight: 500;
    padding-bottom: 15px;
    line-height: 1;
    border-bottom: 1px solid #000;
    margin-bottom: 20px; 
}
.campus-lapse_text p{
    font-size: 15px;
    line-height: 2;
}
.campus-lapse_text p + p{
    margin-top: 30px;
}

/* PC */
@media only screen and (min-width: 768px) {
#campus{
    padding-bottom: 80px;
    background: url(/ja/admissions/keionavi/img/bg-campus.svg) no-repeat right 5px top 10px;
    background-size:auto 160px;
}
    .campus-container{
    position: relative;
    background: url(/ja/admissions/keionavi/img/img-campus-map.svg) no-repeat center center;
    background-size: 455px auto;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.campus-container .open0.open{
    display: block;
    left: calc(50% + 125px);
    top: calc(50% - 66px);
}
.campus-container .open1.open{
    display: block;
    left: calc(50% + 135px);
    top: calc(50% - 88px);
}
.campus-container .open2.open{
    display: block;
    left: calc(50% + 3px);
    top: calc(50% + 72px);
}
.campus-container .open3.open{
    display: block;
    left: calc(50% + 76px);
    top: calc(50% - 24px);
}
.campus-container .open4.open{
    display: block;
    left: calc(50% + 92px);
    top: calc(50% - 37px);
}
.campus-container .open5.open{
    display: block;
    position: absolute;
    left: calc(50% + 105px);
    top: calc(50% - 84px);
}
.campus-item {
    width: 28%;
}
.campus-item:not(:first-child) {
    margin-left: 30px;
}
.campus-item:nth-child(4){
    margin-left: auto;
}
.campus-item:nth-child(n + 4){
    margin-top: 390px;
}
.campus-item figure{
    margin: 0 20px -20px;
}
.campus-item dl{
    margin-left: 30px;
}
.campus-item dd{
    position: absolute;
    top: 50px;
    left: 0;
}
    
.campus-lapse-container{
    display: flex;
    align-items: center;
}
}

/* SP */
@media only screen and (max-width: 767px) {
    .campus-item{
        margin: 0 30px 17px;
    }
.campus-item figure{
    margin: 0 0 -20px;
}
.campus-item dl{
    margin: 0 20px;
}
    .container.campus-lapse-container{
        margin: 0;
        width: 100%;
    }
    .campus-lapse{
        background: none;
        margin-top: 70px;
        padding: 0;
    }
    .popup{
        background: url(/ja/admissions/keionavi/img/bg-campus2-sp.svg) no-repeat left top;
        background-size: 50vw auto;
        padding: 15px 30px;
        margin-bottom: 15px;
    }
    .campus-lapse figure{
        margin-left: 30px;
    }
.campus-lapse_text{
    margin: 0 30px 0 60px;
}
.campus-lapse_text h4{
    font-size: 18px;
    padding-bottom: 8px;
    margin-bottom: 18px;
    line-height: 1.66;
}
    .campus-lapse_text p{
        line-height: 1.66;
    }
.campus-lapse_text p + p{
    margin-top: 20px;
}
}


/* academics */
#academics h2 + h3{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
}

.academics-container{
    max-width: 1100px;
    margin: 0 auto;
}

.academics-tag h4{
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid #000;
    padding: 0 0 5px 20px;
    margin-bottom: 15px;
    background: url(/ja/admissions/keionavi/img/icon-search.svg) no-repeat left top 1px;
    background-size: 13px auto;
    line-height: 1;
}
.academics-tag_list,
.academics-item_tag{
    display: flex;
    flex-wrap: wrap;
}
.academics-tag_item a,
.academics-item_tag a,
.faculties-item_tag li{
    display: inline-block;
    background-color: #ebebeb;
    border-radius: 3px;
    line-height: 1;
    padding: 7px 10px;
    margin: 0 10px 10px 0;
    font-size: 13px;
    font-weight: 500;
}

.academics-item h4{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 15px;
}
.academics-item_tag a{
    font-size: 11px;
    padding: 4px 7px;
    margin: 0 6px 6px 0;
}

.academics-btnset{
    text-align: center;
    margin-top: 35px;
}


/* PC */
@media only screen and (min-width: 768px) {
#academics{
    background: url(/ja/admissions/keionavi/img/bg-academics.svg) no-repeat left 5px top 10px;
    background-size:auto 126px;
    padding-bottom: 80px;
}
.academics-content{
    display: flex;
    flex-wrap: wrap;
}
.academics-item{
    margin: 40px 0 0 0;
    width: calc(calc(100% - 72px) / 3);
}
.academics-item:not(:nth-child(3n)){
    margin-right: 36px;
}
.academics-item:nth-child(-n+3){
    margin-top: 30px;
}
}

/* SP */
@media only screen and (max-width: 767px) {
    #academics h2{
        padding: 0 0 20px 10px;
        margin: 0;
    }
    .academics-tag{
        margin: 0 30px;
    }
    .academics-item{
        margin-top: 20px;
        display: flex;
    }
    .academics-item figure{
        width: 50%;
    }
    .academics-item_text{
        width: 50%;
        padding: 0 15px;
    }
.academics-item h4{
    font-size: 15px;
    margin: 10px 0;
}
}


/* faculties */
#faculties{
    background: url(/ja/admissions/keionavi/img/bg-faculties.svg);
    background-size: 340px auto;
    padding: 70px 0;
}

.faculties-item dl{
    box-shadow: 0px 5px 4px #0000000c;
    background: #fff;
    margin-bottom: 20px;
}
.faculties-item dt{
    position: relative;
    border-left: 5px solid #62b0e3;
    padding: 23px 15px;
    font-size: 18px;
    font-weight: bold;
}
.faculties-item dt.open{
    background: #62b0e3;
    color: #fff;
}
.faculties-item:nth-child(2) dt{
    border-left: 5px solid #35b597;
}
.faculties-item:nth-child(2) dt.open{
    background: #35b597;
}
.faculties-item:nth-child(3) dt{
    border-left: 5px solid #ba8dbe;
}
.faculties-item:nth-child(3) dt.open{
    background: #ba8dbe;
}
.faculties-item:nth-child(4) dt{
    border-left: 5px solid #ec6d81;
}
.faculties-item:nth-child(4) dt.open{
    background: #ec6d81;
}
.faculties-item:nth-child(5) dt{
    border-left: 5px solid #f3994f;
}
.faculties-item:nth-child(5) dt.open{
    background: #f3994f;
}
.faculties-item:nth-child(6) dt{
    border-left: 5px solid #f7ab00;
}
.faculties-item:nth-child(6) dt.open{
    background: #f7ab00;
}
.faculties-item:nth-child(7) dt{
    border-left: 5px solid #d68bb9;
}
.faculties-item:nth-child(7) dt.open{
    background: #d68bb9;
}
.faculties-item:nth-child(8) dt{
    border-left: 5px solid #88abda;
}
.faculties-item:nth-child(8) dt.open{
    background: #88abda;
}
.faculties-item:nth-child(9) dt{
    border-left: 5px solid #8d93c8;
}
.faculties-item:nth-child(9) dt.open{
    background: #8d93c8;
}
.faculties-item:nth-child(10) dt{
    border-left: 5px solid #8cc66d;
}
.faculties-item:nth-child(10) dt.open{
    background: #8cc66d;
}

.faculties-item dt:before{
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    display: block;
    width: 15px;
    height: 1px;
    background: #000;
    line-height: 1;
    transition: .3s;
}
.faculties-item dt:after{
    content: '';
    position: absolute;
    top: calc(50% - 7px);
    right: 32px;
    display: block;
    width: 1px;
    height: 15px;
    background: #000;
    line-height: 1;
    transition: .3s;
}
.faculties-item dt.open:before,
.faculties-item dt.open:after{
    content: '';
    transform: rotate(45deg);
    background: #fff;
}
.faculties-item dd{
    display: none;
}
.faculties-item h3{
    padding: 20px 20px 5px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
}
.faculties-item h3 + p{
    font-size: 14px;
    font-weight: 500;
    padding: 0 20px 20px;
}
.faculties-item p + p{
    padding: 0 20px 10px;
}
ul.faculties-item_tag{
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px 20px;
}
.faculties-item_tag li{
    font-size: 14px;
}

.faculties-btnset{
    text-align: center;
}

/* PC */
@media only screen and (min-width: 768px) {
#faculties h2{
    width: 240px;
}
ul.faculties-list{
    display: flex;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}
.faculties-item{
    width: calc(calc(100% - 44px) / 3);
}
.faculties-item:not(:nth-child(3n)){
    margin-right: 22px;
}
}

/* SP */
@media only screen and (max-width: 767px) {
#faculties h2{
    width: 148px;
}
    ul.faculties-list{
        margin: 0 30px;
    }
    .faculties-item dl{
        margin-bottom: 10px;
    }
    .faculties-btnset{
        margin-top: 30px;
}
}




/* admissions */
.admissions-container{
}
.admissions-item dl{
    position: relative;
    box-shadow: 0px 5px 4px #0000000c;
    
}
.admissions-item dt{
    position: relative;
    border-left: 5px solid #f1c400;
    background: #fff;
    padding: 20px 15px;
    font-size: 18px;
    font-weight: bold;
}
.admissions-item dt.open{
    border-left: 5px solid #2d2d96;
    background: #2d2d96;
    color: #fff;
}

.admissions-item dt:before{
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    display: block;
    width: 15px;
    height: 1px;
    background: #000;
    line-height: 1;
    transition: .3s;
}
.admissions-item dt:after{
    content: '';
    position: absolute;
    top: calc(50% - 7px);
    right: 32px;
    display: block;
    width: 1px;
    height: 15px;
    background: #000;
    line-height: 1;
    transition: .3s;
}
.admissions-item dt.open:before,
.admissions-item dt.open:after{
    content: '';
    transform: rotate(45deg);
    background: #fff;
}
.admissions-item dd{
    display: none;
    background: #ffffffd0;
    width: 100%;
    padding: 20px;
}
.admissions-item h3{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}
.admissions-item h3:not(:first-child){
    margin-top: 15px;
}
.admissions-item a.arrow{
    display: inline-block;
    margin-bottom: 5px;
    background-position: top 3px left;
}

.admissions-content_inner{
    display: flex;
}
.admissions-content_item{
    background: url(/ja/admissions/keionavi/img/bg-admissions2.svg) no-repeat left center;
    background-size: 50% auto;
}
.admissions-content_item:nth-child(2n){
    background: url(/ja/admissions/keionavi/img/bg-admissions3.svg) no-repeat right center;
    background-size: 50% auto;
}
.admissions-content_inner a{
    display: block;
    width: 60.8%;
    margin: 30px 0;
}
.admissions-content_item:nth-child(2n) a{
    order: 2;
}
.admissions-content_text{
    margin-left: 30px;
}
.admissions-content_item:nth-child(2n) .admissions-content_text{
    order: 1;
    margin-left: 0;
    margin-right: 30px;
    text-align: right;
}
.admissions-content_text h3{
    font-size: 28px;
    font-weight: bold;
    padding-bottom: 15px;
    line-height: 1;
    border-bottom: 1px solid #000;
    margin-bottom: 20px; 
}
.admissions-content_text p{
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.04em;
}

/* PC */
@media only screen and (min-width: 768px) {
#admissions{
    background: url(/ja/admissions/keionavi/img/bg-admissions.svg) no-repeat right 5px top 10px;
    background-size: auto 126px;
}
ul.admissions-list{
    position: relative;
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto 50px;
    z-index: 100;
}
.admissions-item{
    width: calc(calc(100% - 84px) / 4);
    margin-bottom: 20px;
}
.admissions-item dd{
    position: absolute;
    left: 0;
    top: 67px;
}
.admissions-content_inner{
    align-items: center;
    max-width: 876px;
    margin: 0 auto;
}
}

/* SP */
@media only screen and (max-width: 767px) {
.admissions-item{
    margin-bottom: 10px;
}
    ul.admissions-list{
        margin: 0 30px;
    }
.admissions-content_item,
.admissions-content_item:nth-child(2n){
    background: none;
}
    .admissions-content_inner{
        flex-wrap: wrap;
    }

    .admissions-content_inner a{
    display: block;
    width: 100%;
    margin: 0;
        padding: 20px 30px 20px 60px;
    order: 2;
}
.admissions-content_item a{
    background: url(/ja/admissions/keionavi/img/bg-admissions2-sp.svg) no-repeat left center;
    background-size: 50% auto;
}
.admissions-content_item:nth-child(2n) a{
    background: url(/ja/admissions/keionavi/img/bg-admissions3-sp.svg) no-repeat left center;
    background-size: 50% auto;
}
    .admissions-content_text,
    .admissions-content_item:nth-child(2n) .admissions-content_text{
    margin: 0 30px 0 60px;
    order: 1;
    text-align: left;
}
.admissions-content_text h3{
    font-size: 18px;
    padding-bottom: 5px;
    margin-bottom: 10px; 
    margin-top: 40px;
}
.admissions-content_text p{
    line-height: 1.6;
    margin-bottom: 15px;
}
}