@charset "UTF-8";

/*---------------------------
　　TOPページ全体設定
---------------------------*/

.top img {
  width: 100%;
  opacity: 1;
}

.top h1 {
  font-size: 3rem !important;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}


/*---------------------------
　　TOP動画
---------------------------*/

#video_wrap {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}

#video_wrap video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*---------------------------
　　TOP動画に重ねたメッセージ画像
---------------------------*/

#video_wrap .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100% !important;
	max-width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(255,255,255,.3);
}

#video_wrap .down {
	transition: all 1s;
	opacity: 1;
}

#video_wrap.on .inner > div {
	text-align: center;
}

#video_wrap .inner img {
	transition: .5s ease 5s;
	opacity: 0;
	transform: scale(1.3);
  background: none;
}

#video_wrap.on .inner img {
	opacity: 1;
	transform: scale(1);
}

#video_wrap.on .inner .txt {
	display: inline-block;
	max-width: 450px;
	margin: 0 auto;
}

#video_wrap .inner .arrow {
	display: block;
	margin: 2rem auto 2rem;
	width: 3vmin;
}

#video_wrap .inner .txt_jiseki {
	display: inline-block;
	width: auto;
	height: 130px;
	margin-left: 1em;
	opacity: 0.9;
}

/*---------------------------
　　お知らせ
---------------------------*/

#info ul {
  max-width: 60em;
  margin: 0 auto 4em auto;
  padding: 2em 2.5em;
  background-color: #eaf4e7;
}

#info ul:nth-child(n+2) { margin-top: 2em; }
#info ul li p { font-size: 1.4rem; }
#info ul li:nth-child(n+2) { margin-top: 0.5em; }

#info ul li .info_ttl {
  margin-bottom: 1em;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #007733;
}

#info ul li .ttl {
  font-size: 1.8rem;
  font-weight: bold;
  color: #007733;
}

#info ul li .ttl a {
  text-decoration: underline;
  color: #007733;
}

#info ul li .sub_ttl {
  font-size: 1.6rem;
  font-weight: bold;
}

/* 緊急用
---------------------------*/

#info ul.emergency { background-color: #f9ebeb; }
#info ul.emergency li .info_ttl { color: #f45a40; }
#info ul.emergency li .ttl { color: #f45a40; }
#info ul.emergency li .ttl a { color: #f45a40; }


/*---------------------------
　　バナーリンク
---------------------------*/

#bnr_wrap {
  width: 68.75em;
  text-align: center;
  margin: 4em auto 0 auto;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

#bnr_wrap li { margin: 0 auto; }

#bnr_wrap li a {
  display: block;
  width: 31.25em;
  height: 8.125em;
}

#bnr_wrap li a span { display: none; }
#bnr_wrap li.strength8 a { background:url(../images/top/top_bnr01.jpg) no-repeat; }
#bnr_wrap li.strength8.waka a { background:url(../images/top/top_bnr01_waka.jpg) no-repeat; }
#bnr_wrap li.results a { background:url(../images/top/top_bnr02.jpg) no-repeat; }
#bnr_wrap li.school a {display: none;}

#bnr_wrap	.flexbox.waka li {margin-right: 2%;}

/*---------------------------
　　紹介MOVIE
---------------------------*/

#movie_wrap {
  width: 100%;
  margin: 0 auto;
  padding: 4em 0 0 0;
  background: url(../images/top/bc_sky.jpg) no-repeat bottom;
  background-size: cover;
}

#movie_wrap .inner {
  max-width: 68.75em;
  margin: 0 auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#movie_wrap h1 { position: relative; }

#movie_wrap h1 span {
  display: block;
  font-size: 70%;
  color: #8bcf57;
}

#movie_wrap p {
  margin-top: 1em;
  font-size: 1.4rem;
  text-align: center;
}

#movie_wrap ul {
  max-width: 45em;
  margin-left: 1em;
  letter-spacing: -0.4em;
  justify-content: space-between;
  flex-wrap: wrap;
}

#movie_wrap ul:after {
  content: "";
  display: block;
  width: 32%;
  height: 0;
}

#movie_wrap ul li {
  width: 32%;
  margin-bottom: 1em;
  border: #FFF 8px solid;
}

#movie_wrap ul li a { opacity: 1; }

#movie_wrap ul.last_blank:after {
  content: '';
  width: 32%;
}

#movie_wrap h1:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 2em;
  height: 2em;
  display: inline-block;
  border-left: #000 1px solid;
  -webkit-transform: rotate(-25deg) translateY(-50%);
  transform: rotate(-25deg) translateY(-50%);
  transform-origin: 50%;
}

#movie_wrap h1:after {
  position: absolute;
  content: '';
  top: 50%;
  right: 2em;
  height: 2em;
  display: inline-block;
  border-left: #000 1px solid;
  -webkit-transform: rotate(25deg) translateY(-50%);
  transform: rotate(25deg) translateY(-50%);
  transform-origin: 50%;
}


/*---------------------------
　　ローテーション
---------------------------*/

#slider_wrap { padding: 4em 0; }
.slick-slide { vertical-align: bottom; margin-bottom: -0.4em;}
.slick-slide img { width: 35vw; }

.slick-arrow {
  position: absolute;
  bottom: 0;
  z-index: 0;
  border: none;
  cursor: pointer;
}

.slick-prev::before {
	position: absolute;
	content: '';
	bottom: 0;
	width: 0.625em;
  height: 0.625em;
	border-radius: 1px;
  border-bottom: 3px solid #007733;
  border-left: 3px solid #007733;
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: 50%;
}

.slick-next::before {
	position: absolute;
	content: '';
	bottom: 0;
  width: 0.625em;
  height: 0.625em;
	border-radius: 1px;
  border-top: 3px solid #007733;
  border-right: 3px solid #007733;
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: 50%;
}

.slick-arrow:hover { opacity: 0.6; }

.slick-prev { left: 45%; }
.slick-next { right: 45%; }

.slick-counter {
  margin-top: 1em;
  font-size: 1.8rem;
  text-align: center;
}

.slick-slide {
  margin-right: 2em;
  margin-left: 2em;
}

.slick-counter .current { color: #007733; }


/*---------------------------
　　PickUp
---------------------------*/

#pickup_wrap {
  padding: 6em 0;
  text-align: center;
  background: url(../images/top/bg_pattern_top.jpg);
}

#pickup_wrap h1 { margin-bottom: 1em; }

#pickup_wrap li {
  display: block;
  width: 43.75em;
  margin: 2em auto 0 auto;
}

#pickup_wrap li a {
  display: block;
  width: 100%;
  background-color: #FFF;
  opacity: 1;
}

/*-------moreボタン-------*/

#pickup_wrap li.list-item{
  opacity: 1;
}
#pickup_wrap li.list-item.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}
#pickup_wrap li.list-btn {
  margin-top: 20px;
}
#pickup_wrap .is-btn-hidden{
display:none;
}

/*---------------------------
　　タブ切り替え
---------------------------*/

#category_wrap {
  width: 100%;
  padding: 6em 0;
  background-color: #EEE;
}

#category_wrap h1 { margin-bottom: 2em; }

#category_wrap .inner {
  max-width: 62.5em;
  margin: 0 auto;
}

.tags,
#gakunen {
  width: 100%;
  letter-spacing: -0.4em;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.tags { margin: 1em 0 2em 0; }

.tags span {
  display: block;
  width: 16%;
  padding: 0.8em 0;
  text-align: center;
  border-radius: 0.5em;
  background: #FFF;
  letter-spacing: 0;
  cursor: pointer;
}

#gakunen { margin-top: 2em; }

#gakunen span {
  display: block;
  padding: 0.8em 0;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1;
  border-radius: 0.3em;
  background-color: #FFF;
  cursor: pointer;
  letter-spacing: 0;
  color: #000;
  vertical-align: middle;
}

#gakunen .all { display: none; }

#gakunen span.all {
  color: #FFF;
  background-color: #007733;
}

#gakunen .sho, #gakunen .chu, #gakunen .kou {
  width: 32.2%;
  margin: 0 0 0.5em 0;
}

.grid_tab span {
  color: #FFF;
  background-color: #b3b3b3;
}

.grid_tab .tags span:first-child,
#gakunen div:first-child { margin-left: 0; }

.grid_tab .tags span.select {
  color: #FFF;
  background-color: #007733;
}

/* グリッド画像 */

.category {
  width: 100%;
  flex-direction: row;
  gap: 0 2.1em;
  flex-wrap: wrap;
}

.category li {
  position: relative;
  width: 31%;
  margin: 0 0 3em 0;
}

@media all and (-ms-high-contrast: none){
    .category li { margin-right: 2em; }
    .category li:nth-child(3n) { margin-right: 0; }
}

_::-webkit-full-page-media, _:future, :root .category li {
    margin-right: 2em;
}

_::-webkit-full-page-media, _:future, :root .category li:nth-child(3n) {
    margin-right: 0;
}

.category li a { display: block; }

.category li .cat_ttl {
  margin-top: 0.5em;
  line-height: 1.4;
}

.category li .cat_txt {
  margin-top: 0.5em;
  font-size: 1.4rem;
  line-height: 1.4;
}

.category span {
  display: block;
  margin: 0.5em 1em;
  text-align: center;
}

button.more_btn {
  display: block;
  position: relative;
  width: 16em;
  margin: 3em auto 0 auto;
  padding: 0.5em;
  font-size: 1.6rem;
  color: #007733;
  border: #007733 1px solid;
  border-radius: 100vh;
  background-color: #FFF;
  cursor: pointer;
}

button.more_btn::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 1em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 1px;
  border-bottom: 3px solid #007733;
  border-right: 3px solid #007733;
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: 50%;
}


/*---------------------------
　　馬渕8つの強み
---------------------------*/

#grid_wrap h1 { margin: 3em 0 2em 0 }
#grid_wrap ul { letter-spacing: -0.4em; }

#grid_wrap li {
  position: relative;
  display: inline-block;
  width: 25%;
  font-size: 1.8rem;
  letter-spacing: 0;
  vertical-align: bottom;
}

#grid_wrap li span {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 0.5em 1em;
  background: #007733;
  background: linear-gradient(to right, rgba(29,170,56,1),rgba(0,119,51,1));
  background: -moz-linear-gradient(to right, rgba(29,170,56,1),rgba(0,119,51,1));
  background: -webkit-linear-gradient(to right, rgba(29,170,56,1),rgba(0,119,51,1));
  color: #FFF;
}


/*---------------------------
　　合格実績バナー
---------------------------*/

#results_wrap {
  margin: 6em auto;
  text-align: center;
}

#results_wrap a {
  display: block;
  margin: 0 auto;
  width: 50em;
}


/*---------------------------
　　合格体験記
---------------------------*/
#taikenki_wrap {
  background: url(../images/top/bg_taikenki.jpg) no-repeat top center;
	background-size: contain;
	padding: 8em 0 0 0;
	position: relative;
}
#taikenki_wrap:after {
	content: "";
	display: block;
	height: 120px;
	background: rgb(254,247,254);
background: linear-gradient(0deg, rgba(254,247,254,1) 0%, rgba(255,255,255,1) 100%); 
}

#taikenki_wrap ul {max-width: 980px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 80px auto;}
#taikenki_wrap ul li {width: 32%;}
#taikenki_wrap ul.waka {max-width: 700px;}
#taikenki_wrap ul.waka li {width: 48%;}

#taikenki_wrap ul li img {width: 100%;}

#taikenki_wrap .btn {
  display: block;
  position: relative;
  width: 16em;
  margin: 3em auto 0 auto;
  padding: 0.5em;
  font-size: 1.6rem;
  color: #007733;
  border: #007733 1px solid;
  border-radius: 100vh;
  background-color: #FFF;
  cursor: pointer;
	text-align: center;
}

#taikenki_wrap .btn::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 1em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 1px;
  border-top: 3px solid #007733;
  border-right: 3px solid #007733;
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: 50%;
}


@media screen and (max-width: 750px) {
	#taikenki_wrap {padding: 4em 0 0 0;}
	#taikenki_wrap:after {height: 60px;}
	#taikenki_wrap ul, #taikenki_wrap ul.waka {margin: 10px 4%; width: 92%;}
	#taikenki_wrap ul li {width: 48%; margin-top: 14px;}	
}

/*---------------------------
　　Media Queries設定
---------------------------*/

/*---------------------------------------------*/
@media screen and (max-width: 768px) {
/*---------------------------------------------*/

/* TOPページ全体設定
---------------------------*/

.top h1 { font-size: 2.4rem !important; }


/* TOP動画に重ねたメッセージ画像
---------------------------*/

#video_wrap .inner {
	display: none;
}


/* お知らせ
---------------------------*/

#info ul {
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5em;
}

#info ul:nth-child(n+2) { margin-top: 0; }
#info ul li p { font-size: 1.3rem; }
#info ul li .info_ttl { font-size: 1.8rem; }
#info ul li .ttl { font-size: 1.6rem; }


/* ローテーション
---------------------------*/

#slider_wrap { padding: 0; }
.slick-slide img { width: 100vw; }

.slick-slide {
  margin-right: 0;
  margin-left: 0;
}

.slick-counter {
  margin: 0;
  padding: 1em 0;
  background-color: #1458e4;
  color: #FFF;
}

.slick-arrow {
  position: absolute;
  bottom: 0.6em;
  z-index: 0;
  width: 3em;
  height: 3em;
  padding: 0 1em;
  border: none;
  cursor: pointer;
  background-color: #13459e;
}

.slick-prev::before {
  bottom: 0.8em;
  border-bottom: 3px solid #FFF;
  border-left: 3px solid #FFF;
}

.slick-next::before {
  bottom: 0.8em;
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
}

.slick-counter .current { color: #FFF; }
.slick-prev { left: 6em; }
.slick-next { right: 6em; }


/* バナーリンク
---------------------------*/

#bnr_wrap {
  width: 100%;
  margin: 0 auto;
  letter-spacing: -0.4em;
}

#bnr_wrap li {
  width: 34%;
  position: relative;
  letter-spacing: 0;
}
	
#bnr_wrap	.flexbox.waka li {margin-right: 0;}
	
#bnr_wrap ul.waka li {
  width: 50%;
  position: relative;
  letter-spacing: 0;
}

#bnr_wrap li a {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
  padding: 1em 0;
  color: #FFF;
  font-size: 1.4rem;
}

#bnr_wrap li.strength8 a, #bnr_wrap li.strength8.waka a { background: #1458e4; }
#bnr_wrap li.school a { display: block; background: #019371; }
#bnr_wrap li.results a { background: #f45a40; background-image: none!important; }
#bnr_wrap li a span { display: block; }

#bnr_wrap li::after {
  position: absolute;
  content: '';
  top: 55%;
  right: 0.4em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 1px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: 50%;
}

#bnr_wrap .flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}


/* 紹介MOVIE
---------------------------*/

#movie_wrap {
  margin: 4em auto 0 auto;
  padding: 0;
  background: none;
}

#movie_wrap .inner { max-width: 100%; }

#movie_wrap h1 span {
  display: inline-block;
  font-size: 100%;
  color: #000;
}

#movie_wrap p { margin-top: 0.5em; }

#movie_wrap ul {
  max-width: 100%;
  margin: 1em auto 0 auto;
  padding: 0 1em;
}

#movie_wrap ul li {
  width: 49%;
  margin-bottom: 0.5em;
  border: none;
}

#movie_wrap h1:before,
#movie_wrap h1:after { display: none; }

#movie_wrap ul.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex:0 1 auto;
}


/* pickup
---------------------------*/

#pickup_wrap {
  padding: 3em 1em;
  background: none;
}

#pickup_wrap h1 { margin-bottom: 0; }

#pickup_wrap li {
  width: 100%;
  margin: 1em auto 0 auto;
}

/* 小学生・中学生
---------------------------*/

#topics_wrap ul {
  max-width: 100%;
  min-width: 100%;
  margin: 0 auto;
  letter-spacing: -0.4em;
}

#topics_wrap li {
  display: block;
  width: 100%;
}


/* タブ切り替え
---------------------------*/

#category_wrap { padding: 3em 1em; }
#category_wrap h1 { margin-bottom: 0; }
#category_wrap .inner { max-width: 100%; }

.tags { margin: 1em 0; }

.tags span {
  width: 32%;
  font-size: 1.3rem;
  margin: 0 0 0.5em 0;
}

#gakunen { margin-top: 2em; }
#gakunen span { width: 100%; }


/* 画像グリッド */

.category {
  gap: 0 0;
  justify-content: space-between;
}

.category li {
  position: relative;
  width: 48%;
  margin: 0 0 1em 0;
}

.category li .cat_ttl { font-size: 1.4rem; }
.category li .cat_txt { font-size: 1.2rem; }

@media all and (-ms-high-contrast: none){
    .category li { margin-right: 0; }
    .category li:nth-child(odd) { margin-right: 2em; }
}

_::-webkit-full-page-media, _:future, :root .category li {
    margin-right: 0;
}

_::-webkit-full-page-media, _:future, :root .category li:nth-child(3n) {
    margin-right: 0;
}

.category.flexbox,
#gakunen.flexbox,
.tags.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex:0 1 auto;
}


/* 馬渕8つの強み
---------------------------*/

#grid_wrap h1 { margin: 2em 0 1em 0 }

#grid_wrap li {
  width: 50%;
  font-size: 1.4rem;
}


/* 合格実績バナー
---------------------------*/

#results_wrap { margin: 2em 1em; }
#results_wrap a { width: 100%; }


}/* 768 */