@charset "UTF-8";

/* 共通部分
-------------------------------------------*/
html {
  margin: 0;
  padding: 0;
  font-size: 15px;
  /* font-size: 10px; */
}
body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;;
}
img{
  width: 100%;
}
iframe{
  width: 100%;
}
.new-day{
  font-size: 0.9em;
  display: block;
}
.new-title{
  font-weight: bolder;
  display: block;
}
.new-event,.new-news{
  width: 35vw;
}
/* header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 2.5em 100vw;
  border-color: transparent transparent #f6f4ee transparent;
  -webkit-background-clip: padding-box; 
  -moz-background-clip: padding; 
  background-clip: padding-box;
} */
/* nav */
.header-flex{
  display: inline-flex;
  width: 30vw;
  align-items: center;
  justify-content: flex-end;
}
.header-flex_mobile{
  display: none;
}
/* .event-contents{
  margin-bottom: 5vh;
} */

/* .header-flex .sns-icon{
  width: 20%;
} */
.top_nav-button{
  background-color: #48B6FF;
  border-radius: 50vh;
  padding: 1vh 2vw;
  text-decoration: none;
  color: #fafafa;
  font-size: 1.2em;
}
.nav_sns-icon{
  width: 20%;
  padding-left: 1vw;
}

.sns-icon a img{
  width: 100%;
}
.header-logo{
  display: flex;
  text-align: center;
  justify-content: space-evenly;
  padding: 2vh 5%;
  width: auto;
  height: 15vh;
}

/* 共通の矢印 */
.arrow{
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1em;
}
.arrow::before,
.arrow::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8vw;
  margin: auto;
  content: "";
  vertical-align: middle;
}
/* eventとnews */
.new-info{
  background-color: #f6f4ee;
  padding: 3vh 0;
  display: flex;
  justify-content: space-evenly;
}
.new-title-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 30vw;
  border-bottom: 3px solid #004496;
}
.new-title-big{
  font-size: 1.6em;
  font-weight: normal;
  color: #313131;
}

.new-contents{
  padding: 1.5vh 0;
}
.new-icon{
  display: block;
  color: #004496;
}
.new-icon:hover{
  color: #d5aa1b;
}
.new-contents a{
  display: block;
  text-decoration: none;
  font-size: 1.2em;
  color: #313131;
  /* padding-bottom: 0.1vh; */
}
.arrow-position::before{
  box-sizing: border-box;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid #f6f4ee;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #004496;
}
.arrow-position::after{
  left: 0.5em;
  width: 0.4em;
  height: 0.4em;
  left: 8.5vw;

  border-top: 2px solid #f6f4ee;
  border-right: 2px solid #f6f4ee;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow-position:hover:before{
  background-color: #d5aa1b;
}
/* about */
.about-box{
  /* padding: 3vh 10vw; */
  background-color: #004496;
  color: #fafafa;
  display: flex;
  position: relative;
  justify-content: space-evenly;
  align-items: center;
  overflow: hidden;
  backface-visibility: hidden;
}
.about-box::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100vw;
  border-color: transparent transparent #cedbe9 transparent;
  backface-visibility: hidden;
  -webkit-background-clip: padding-box; 
  -moz-background-clip: padding; 
  background-clip: padding-box;
}
.about-title{
  padding: 3vh 0;
  width: 40vw;
}
.about-title h1{
  font-weight: normal;
  font-size: 2.0em;
}
.about-title p{
  font-size: 1.2em;
  padding-top: 3vh;
}
.about-contents{
  padding: 10vh 0;
}
.contents-box {
  font-size: 1.2em;
  width: 30vw;
}
.contents-box span{
  background-color: #48b6ff;
  padding: 0.5% 2% 0.5% 3%;
}
.contents-box p{
  margin: 1vh 0 2vh;
}
/* event */
.twitter-timeline{
  width: 100%;
}
/* twitter-timeline-rendered */
.event-info{
  /* padding: 0 10vw; */
  background-color: #cedbe9;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.event-info::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100vw;
  border-color: transparent transparent transparent #f6f4ee;
  backface-visibility: hidden;
  -webkit-background-clip: padding-box; 
  -moz-background-clip: padding; 
  background-clip: padding-box;
}
.event-info h1{
  font-size: 2.0em;
  text-align: center;
  font-weight: normal;
  padding-bottom: 2vh;
}
.event-contents{
  display: flex;
  justify-content: space-evenly;
  padding: 0.5vh 0 2vh;
  align-items: flex-start;
  text-align: left;
}
.event-contents div{
  width: 30vw;
}
.event-contents div h4{
  font-size: 1.6em;
  font-weight: normal;
  /* border-bottom: 3px solid #004496; */
  color: #004496;
  /* margin-bottom: 1.5vh; */
  text-align: left;
}
.event-flex{
  display: flex;
  /* flex-direction: column; */
  border-bottom: 3px solid #004496;
}
.event-flex a{
  margin-left: auto;
  color: #004496;
}
.event-flex a:hover{
  margin-left: auto;
  color: #d5aa1b;
}
.event-day{
  font-size: 1em;
  display: block;
  color: #004496;
}
.event-contents div p{
  padding-bottom: 0.1vh;
  text-align: left;
}
.event-contents div p a{
  text-decoration: none;
  color: #004496;
  font-size: 1.2em;
  display: block;

}

/* event-infoの矢印 */
.arrow2{
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1em;
}
.arrow2::before,
.arrow2::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2vw;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.arrow-event-info::before{
  box-sizing: border-box;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid #f6f4ee;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #004496;
}
.arrow-event-info::after{
  left: 0.5em;
  width: 0.4em;
  height: 0.4em;
  left: 2.5vw;
  border-top: 2px solid #f6f4ee;
  border-right: 2px solid #f6f4ee;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow-event-info:hover:before{
  background-color: #d5aa1b;
}
/* 学生の声 */
.voice-box{
  background-color: #f6f4ee;
  text-align: center;
  padding: 0 10vw 3vh;
  overflow: hidden;
  backface-visibility: hidden;
  position: relative;
}
.voice-box::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100vw;
  border-color: transparent transparent #004496 transparent;
  backface-visibility: hidden;
  -webkit-background-clip: padding-box; 
  -moz-background-clip: padding; 
  background-clip: padding-box;
}
.voice-box h1{
  font-size: 2.0em;
  text-align: center;
  font-weight: normal;
  padding-bottom: 2vh;
}
.enpre-box{
  text-align: center;
}
.btn-box{
  display: inline-block;
  background-color: #004496;
  padding: 1vh 3vw;
  text-decoration: none;
  color: #fafafa;
  border-radius: 50px;
  margin-top: 5vh;
  margin-bottom: 8vh;
}
.btn-box:hover,.btn-box2:hover{
  background-color: #d5aa1b;
}
.btn-box2{
  display: inline-block;
  background-color: #48B6FF;
  padding: 1vh 3vw;
  text-decoration: none;
  color: #fafafa;
  border-radius: 50px;
  margin-top: 3vh;
}
/* slide */

* {
	box-sizing: border-box;
}
.sliderArea {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 25px;
  margin-top: 5vh;
}
.sliderArea.w300 {
	max-width: 500px;
}
.slick-slide {
	margin: 0 5px;
}
.slick-slide img {
	width: 100%;
	height: auto;
}
.slick-prev, .slick-next {
	z-index: 1;
}
.slick-prev:before, .slick-next:before {
	color: #000;
}
.slick-slide {
	transition: all ease-in-out .3s;
	opacity: .2;
}
.slick-active {
	opacity: 1;
}
.slick-current {
	opacity: 1;
}
.thumb {
	margin: 20px 0 0;
}
.thumb .slick-slide {
	cursor: pointer;
}
.thumb .slick-slide:hover {
	opacity: .7;
}

.full-screen .slick-list {
	overflow: visible;
}
.full-screen.slider {
	max-width: 500px;
	margin: 0 auto;
}
.section{
  overflow: hidden;
}

/* アンプレの詳細 */
.about_kwsk{
  background-color: #004496;
  color: #fafafa;
  padding-bottom: 8vh;
}
.about_kwsk h1{
  font-size: 2.0em;
  text-align: center;
  font-weight: normal;
  padding-bottom: 2vh;
}
.about_kwsk div{
    /*位置の設定*/
    width: 100%;
    height: 70vh;
    position: relative;
    /*背景画像の設定*/
    background: url(../image/index_about.png);
    background-size: cover;
    /*透過の設定*/
    z-index: 1;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}
/* .about_kwsk div::after{
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 50vh;
  background-color: #004496;
  opacity: 0.5;
} */
.about_kwsk div p{
  position: absolute;
  color: #fafafa;
  z-index: 4;
  padding: 20vh 10vw;
  height: 40vh;
}

/* SNS */
.sns-info{
  background-color: #cedbe9;
  color: #004496;
  /* padding: 3vh 10vw 10vh; */
  padding: 3vh 0 10vh;

  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
}

.sns-info::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100vw;
  border-color: transparent transparent #f6f4ee transparent;
  backface-visibility: hidden;
  -webkit-background-clip: padding-box; 
  -moz-background-clip: padding; 
  background-clip: padding-box;
}
.sns-info h1{
  font-size: 2.0em;
  text-align: center;
  font-weight: normal;
  padding-bottom: 2vh;
}
.sns-info article{
  display: flex;
  justify-content: space-evenly;
}
.sns-info article div{
  width: 20vw;
}
.sns-info article div h4{
  font-size: 1.6em;
  font-weight: normal;
  border-bottom: 3px solid #004496;
  color: #004496;
  margin-bottom: 1.5vh;
}

/* 入試情報 */
.exam-info{
  background-color: #f6f4ee;
}
.exam-info h1{
  font-size: 1.6em;
  text-align: center;
  font-weight: normal;
  padding-bottom: 2vh;
}
.exam-info article{
  display: flex;
  justify-content: space-evenly;
  padding: 4vh 0;
  text-align: center;
  align-items: center;
}
.exam-info article div{
  width: 30vw;
}
.exam-info div p{
  color: #004496;
  text-align: left;
}
.br-sp{
  display: none;
}
@media screen and (max-width:820px) {
  .exam-info article,.sns-info article,.event-contents,.about-box,.new-info{
    flex-direction: column;
    align-items: center;
    /* padding: 3vh 10vw; */
  }
  .exam-info article div,.sns-info article div,.event-contents div,.contents-box,.about-title,.new-event h4,.new-news h4,.new-event{
    width: 70vw;
  }
  .new-event,.new-news{
    /* padding: 0 10vw; */
    /* margin: 0 auto; */
    width: 60vw;
  }
  .new-event h4,.new-news h4{
    width: 60vw;
  }
  .top_nav-button,.header-flex{
    display: none;
  }
  .header-flex_mobile{
    display: flex;
    justify-content: center;
  }
  .event-contents div{
    margin-bottom: 4vh ;
  }
  .event-contents div p{
    text-align: left;
  }
  .sns-info article div{
    margin: 0 0 5vh;
  }
  .about_kwsk div p{
    position: absolute;
    color: #fafafa;
    z-index: 4;
    padding: 3vh 10vw;
    height: 40vh;
  }
  .new-contents{
    padding: 0 0 4vh;
  }
  .br-sp{
    display: block;
  }
  .new-title-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60vw;
    border-bottom: 3px solid #004496;
  }
}