@charset "UTF-8";
/* ----------------------------------------------------------------
Voices
----------------------------------------------------------------- */
#sec01 .flex {
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  #sec01 .flex {
    display: block;
  }
}
#sec01 .flex .voice {
  flex: 0 0 30%;
  position: relative;
}
@media screen and (max-width: 767px) {
  #sec01 .flex .voice {
    margin-bottom: 40px;
  }
}
#sec01 .flex .voice img {
  margin-bottom: 30px;
}
#sec01 .flex .voice h3 {
  margin: auto;
  padding: 0;
  font-weight: normal;
}
#sec01 .flex .voice h4 {
  margin: 0;
  padding: 1em 0;
  font-weight: normal;
}
#sec01 .flex .voice p {
  text-align: left;
  font-size: 90%;
  padding: 0 0 1em;
}
#sec01 .flex .voice .namae {
  text-align: center;
}
#sec01 .flex .voice .namae strong {
  font-size: 110%;
  font-weight: normal;
}
#sec01 .flex .voice .cclTtl {
  display: inline-block;
  padding: 7px 30px;
  background: #e85f84;
  position: absolute;
  left: -10px;
  top: -10px;
  color: #fff;
}
#sec01 .flex .voice .cclTtl::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #6f6f70 transparent transparent;
  position: absolute;
  left: 0;
  bottom: -10px;
}

/*
<div class="voice voice1">
					<p class="cclTtl"><strong>医学部</strong></p>
					<img src="img/voice_pic1.jpg" alt="" class="img-responsive">
					<h3>多くの楽しい行事も、<br>古学中の魅力です。</h3>
					<h4>山形大学 医学部 1年</h4>
					<p class="namae"><strong>片倉 匠</strong>さん （古川第一小学校出身）</p>
					<p>カリキュラムだけでなく、キャリア研修や百人一首大会、オーストラリア語学研修といった多くの行事にひかれて入学。早くから大学受験の準備ができ、先生方とも親密になれるのが、中高一貫校である古学の良さだと思います。</p>
				</div>
*/