@charset "shift-jis";

/* ----- .mv ----- */
.mv{
  background: #1c236d;
  padding-bottom: 70px;
}
.mv .inner{
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.mv .img_large{ background: url(/open_campus/img/mv01.jpg)right center/contain no-repeat;}
.mv .img_small{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mv .textbox{
  width: 85%;
  background: url(/open_campus/img/bg_mv.svg)right bottom/cover no-repeat;
  text-align: center;
  padding: 35px 70px 20px 20px;
  color: #fff;
}
.mv .textbox .catch{
  font-size: 2rem;
  text-align: left;
  line-height: 1;
  padding: 0;
  margin-bottom: 20px;
}
.mv .textbox p{
  text-align: left;
  font-size: 18px;
}
.mv h1{
  color: #fff;
  font-size: 1.8rem;
  font-weight: normal;
  text-align: left;
  line-height: 1;
  padding: 10px 70px 10px 0;
  position: relative;
}
.mv h1 .logo{ display: block;}
.mv h1 .txt{
  margin-top: 20px;
  display: block;
}

@media screen and (min-width: 800px) {
  .mv .textbox{ width: 68%;}
}
@media screen and (min-width: 600px) {
  .mv .img_small > img{ width: calc(100% / 6);}
}
@media screen and (max-width: 599px) {
  .mv{ padding-bottom: 45px;}
  .mv .img_large{ background-position: right top;}
  .mv .img_small{ border-bottom: 10px solid rgb(28 35 109 / .7);}
  .mv .img_small > img{ width: calc(100% / 3);}
  .mv .textbox{
    width: 100%;
    background: url(/open_campus/img/bg_mv02.svg)right top/cover no-repeat;
    padding-right: 20px;
  }
  .mv .textbox .catch {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  .mv h1{
    font-size: 1.5rem;
    padding-right: 30px;
  }
  .mv .textbox p{ font-size: 14px;}
}


/* ----- .conts ----- */
.conts .ttl{
  font-size: 1.5em;
  line-height: 1.6;
  margin-bottom: 10px;
}
.conts .btn{
  background: rgb(28 35 109 / .8);
  color: #fff;
  padding: 5px 1em 5px 4em;
}
.conts .btn::after{
  content: "";
  display: inline-block;
  width: 3em;
  height: .5em;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: skewX(50deg);
  margin-left: 10px;
}

@media screen and (min-width: 600px) {
  .conts{
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 0;
  }
  .conts::before{
    content: "";
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 140px;
    top: 45px;
    z-index: -1;
  }
  .conts.img_large::before{
    height: 85%;
  }
  .conts.img_large::before{
    top: 120px;
  }
  .conts .link{ width: 45.5%;}
  .conts .txt{
    width: 50%;
    margin-top: 80px;
  }
  .conts.img_large .txt{
    margin-top: 160px;
  }
  .conts .btn{
    display: inline-block;
    position: absolute;
    bottom: 0;
    z-index: 2;
    margin-left: -80px;
  }
  .conts + .ttl_solid,
  .conts + .conts{ margin-top: 180px;}
  .conts .exp_txt {
    padding-bottom: 5em;
  }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
  .conts.img_large::before{
    top: 70px;
    height: 95%;
  }
  .conts.img_large .txt{ margin-top: 110px;}
}
@media screen and (max-width: 599px) {
  .conts .link{
    display: block;
    width: calc(100% - 24px);
    margin: 0 auto;
    text-align: center;
  }
  .conts.img_large .link{ width: 80%;}
  .conts .txt{
    width: calc(100% + 4%);
    margin-left: -2%;
    padding: 75px 30px 30px;
    margin-top: -45px;
  }
  .conts .ttl{
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 1em;
  }
  .conts .btn{
    width: 225px;
    margin: 60px auto 0;
    display: block;
  }
  .conts + .ttl_solid,
  .conts + .conts{ margin-top: 50px;}
}


/* ----- .conts ----- */
.box_border{
  border: 1px solid #1c236d;
  padding: 35px 0;
}
#campus .box_border,
.box_border.yellow{ border-color: #D7BA41;}
#textbook .box_border,
.box_border.green{ border-color: #8A9F55;}
#live .box_border,
.box_border.blue{ border-color: #44A1C5;}

.box_border .main_ttl{
  font-size: 26px;
  color: #1c236d;
  margin-bottom: 1em;
}
#campus .box_border .main_ttl,
.box_border.yellow .main_ttl{ color: #D7BA41;}
#textbook .box_border .main_ttl,
.box_border.green .main_ttl{ color: #8A9F55;}
#live .box_border .main_ttl,
.box_border.blue .main_ttl{ color: #44A1C5;}

.box_border .conts{
  width: 94%;
  margin: 0 auto;
}

@media screen and (max-width: 599px) {
  .box_border .main_ttl{ font-size: 18px;}
  .box_border .conts .txt{ padding: 0 30px;}
}


/* ----- #campus ----- */
@media screen and (min-width: 600px) {
  #campus .inner{ padding-bottom: 150px;}
  
  #campus .conts::before{ background: rgb(215 186 65 / .15);}
  
  #campus .conts + .ttl_solid{ margin-top: 180px;}
}
@media screen and (max-width: 599px) {
  #campus .txt{ background: rgb(215 186 65 / .15);}
}


/* ----- #textbook ----- */
#textbook{
  background: rgb(138 159 85 / .08);
  padding-top: 90px;
  padding-bottom: 90px;
}
#textbook .inner{
  background: #fff;
  padding: 60px;
}

.list_textbook li{ margin: 30px 0;}
.list_textbook h3{
  text-align: left;
  margin-left: 17px;
}

@media screen and (min-width: 600px) {
  .list_textbook{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .list_textbook li{ width: 48.5%;}
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  #textbook .inner {
    background: #fff;
    padding: 60px 25px;
  }
}
@media screen and (max-width: 599px) {
  #textbook{
    padding-top: 50px;
    padding-bottom: 50px;
  }
  #textbook .inner{ padding: 30px 12px;}
}


/* ----- #live ----- */
#live .ttl_solid{ color: #D7BA41;}
#live .ttl_solid::after{ border-top-color: #D7BA41;}
@media screen and (min-width: 600px) {
  #live .conts::before{
    background: rgb(69 161 196 / .15);
  }
  
  .orientation{ margin-top: 100px;}
  .orientation .conts::before{ content: none;}
}
@media screen and (max-width: 599px) {
  #live .inner > p{
    width: calc(100% - 24px);
    margin: 0 auto;
  }
  #live .txt{
    background: rgb(69 161 196 / .15);
  }
  
  .orientation{ margin-top: 50px;}
  #live .orientation .txt{ background: none;}
}

/* .co-mmit */
.conts.co-mmit{
  background: rgba(215, 186, 65, .08);
  padding: 48px;
  max-width: initial;
}
.conts.co-mmit::before{ content: none;}
.conts.co-mmit .ttl{
  text-align: left;
  margin-bottom: 1em;
}
.conts.co-mmit .ttl::before{
  content: "";
  padding: 60px;
  background: url(/open_campus/img/live/logo_co-mmit.png) right top/contain no-repeat;
  position: absolute;
  top: 25px;
  right: 48px;
}
.conts.co-mmit .btn{
  margin-left: 0;
  display: block;
  text-align: center;
  padding: 20px 35px;
  border-radius: 3px;
  background: #1c236d;
  position: relative;
}
.conts.co-mmit .btn::after{
  border: 0;
  background: url(/images/common/arrow.svg) center/contain no-repeat;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (min-width: 600px){
  .conts.co-mmit{ align-items: flex-start;}
  .conts.co-mmit .txt{
    width: auto;
    margin-top: 0;
    margin-left: 48px;
  }
}
@media screen and (max-width: 900px) and (min-width: 600px){
  .conts.co-mmit .ttl::before{
    top: 10px;
    right: 10px;
  }
}
@media screen and (max-width: 599px){
  .conts.co-mmit{ padding: 20px;}
  .conts.co-mmit > img{
    display: block;
    margin: 0 auto;
  }
  #live .co-mmit .txt{
    width: 100%;
    background: none;
    padding: 0;
    margin-top: 2em;
    margin-left: auto;
    position: relative;
  }
  .conts.co-mmit .ttl::before {
    padding: 45px;
    top: -18px;
    right: -12px;
  }
  .conts.co-mmit .btn{
    width: auto;
    padding: 10px 30px;
  }
}


/* ----- #teacher ----- */
@media screen and (min-width: 600px) {
  .list_teacher{
    position: relative;
    z-index: 0;
  }
  .list_teacher::before{
    content: "";
    width: 100vw;
    height: 100%;
    background: rgb(28 35 109 / .08);
    position: absolute;
    left: 60px;
    top: 60px;
    z-index: -1;
  }
}
@media screen and (max-width: 599px) {
  #teacher{
    background: rgb(28 35 109 / .08);
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
  #teacher .inner {
    background: #fff;
    padding: 30px 12px;
  }
}

/* ----- .consul ----- */
.consul .btn{
  width: fit-content;
  margin-left: 0;
  display: block;
  text-align: center;
  padding: 20px 45px;
  border-radius: 3px;
  background: #1c236d;
  position: relative;
}
.consul .btn::after{
  border: 0;
  background: url(/images/common/arrow.svg) center/contain no-repeat;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 599px){
  .consul .btn{
    width: auto;
    padding: 10px 30px;
    margin-top: 0;
  }
}