@charset "utf-8";

/*.mv .box_mv {
    height: 30vw;
}
.mv .box_copy {
    display: none;
}*/
ul.a_flow {
    counter-reset: listnum;
    position: relative;
}
.memo {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.8rem;
    line-height: 2.3;
    background-image: linear-gradient(180deg, #ddd 1px, transparent 1px);
    background-size: 100% 2.3em;
    background-position: bottom 1px center;
}
.memo2 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.8rem;
    line-height: 2.3;
    background-image: linear-gradient(180deg, #fff calc(2.3rem * 2), transparent 1px),linear-gradient(180deg, #fff calc(2.3rem * 5.5), transparent 1px),linear-gradient(180deg, #ddd 1px, transparent 1px);
    background-size: 35% 20.9rem,35% 20.9rem, 100% 2.3em;
    background-repeat: no-repeat,no-repeat, repeat;
    background-position: bottom 4.6rem right,bottom -2.8rem right, bottom 1px center;
    /*background-image: linear-gradient(180deg, #fff calc(2.3rem * 9), transparent 1px),linear-gradient(180deg, #ddd 1px, transparent 1px);
    background-size: 35% 20.9rem, 100% 2.3em;
    background-repeat: no-repeat, repeat;
    background-position: bottom 4.6rem right, bottom 1px center;*/
}
.memo > div,
.memo2 > div{
    width: calc(100% / 2);
    position: relative;
}
.memo.about > div:nth-child(odd),
.memo2.about > div:nth-child(odd){
    width: 30%;
    padding-right: 5%;
    text-align: right;
}
.memo.about > div:nth-child(even),
.memo2.about > div:nth-child(even) {
    width: 70%;
}
.memo > div > p,
.memo2 > div > p {
    display: none;
}
.long_way {
    position: absolute;
    top: calc(2.3rem * 1.3);
    left: 0;
    width: 100%;
}
.parentheses {
    position: relative;
    padding: 0 1rem;
}
.parentheses:before,
.parentheses:after {
    position: absolute;
    top: -3px;
    width: 10px;
    height: 100%;
    content: '';
    border-top: solid 1px;
    border-bottom: solid 1px;
}
.parentheses:before {
    border-left: solid 1px;
    border-radius: 10px 0 0 10px;
    left: 0;
}
.parentheses:after {
    border-right: solid 1px;
    border-radius: 0 10px 10px 0;
    right: 0;
}
.time_division {
    display: inline-block;
    position: absolute;
    left: 11vw;
}
.text1digit {
    text-indent: .7rem;
}
.mess_images {
    display: flex;
    justify-content: center;
    margin-top: 1.2rem;
}
#main .mess_images > img {
    width: 20%;
    height: 20%;
    border: solid 2px #3C67A9;
    border-radius: 50%;
}
#main .mess_images > img:first-child {
    margin-right: 5rem;
}
@media print, screen and (max-width: 767px) {
.memo2 {
    background-image: linear-gradient(180deg, #fff calc(2.3rem * 2), transparent 1px),linear-gradient(180deg, #fff calc(2.3rem * 5.5), transparent 1px),linear-gradient(180deg, #ddd 1px, transparent 1px);
    background-size: 52% calc(2.3rem * 10), 52% calc(2.3rem * 10), 100% 2.3em;
    background-position: bottom 2.8rem right, bottom -5.2rem right, bottom 1px center;
    /*background-image: linear-gradient(180deg, #fff calc(2.3rem * 9), transparent 1px),linear-gradient(180deg, #ddd 1px, transparent 1px);
    background-size: 52% calc(2.3rem * 10), 100% 2.3em;
    background-position: bottom 2.8rem right, bottom 1px center;*/
}
}
@media print, screen and (min-width: 768px) {
.memo > div,
.memo2 > div {
    width: calc(100% / 3);
}
.time_division {
    left: 8vw;
}
}
@media print, screen and (min-width: 1024px) {
.time_division {
    left: 5vw;
}
}
ul.a_flow:before {
    display: block;
    position:absolute;
    top: -1rem;
    left: 1.3rem;
    content: "";
    height: calc(100% + 1.2rem);
    width: 6px;
    background: #3C67A9;
 }
 ul.a_flow::after {
    display: block;
    position:absolute;
    content: "";
 	left: .8rem;
 	bottom: -.18rem;
 	width: 1.3rem;
 	height: 1.3rem;
 	border-top: 4px solid #3C67A9;
 	border-right: 4px solid #3C67A9;
 	-webkit-transform: rotate(135deg);
 	transform: rotate(135deg);
 }

ul.a_flow > li {
    list-style: none;
    position: relative;
    margin-top: 1.8rem;
    margin-left: 2.5rem;
    padding-left: .4rem;
}
ul.a_flow > li::before {
    position: absolute;
    top: 0;
    left: -2rem;
    width: 2rem;
    height: 2rem;
    padding-top: .2rem;
    counter-increment:listnum;
    content:counter(listnum);
    text-align: center;
    font-weight: bold;
    background: #3C67A9;
    border-radius: 50%;
    color: #fff;
    z-index: 1;
}
.underline {
    background: linear-gradient(transparent 40%, #71BEEB 90%);
    display: inline;
}
.points_container {
    margin-top: 1.8rem;
    border:solid 1px #71BEEB;
    border-radius: 20px;
}
.points_container h3 {
    background: #71BEEB;
    text-align: center;
    border-radius: 20px 20px 0 0;
    padding: 1.2rem;
}
.points_container > div {
    display: block;
    position: relative;
    padding: 1.2rem;
    overflow: hidden;
}
.points_container > div:before {
    position: absolute;
    top: -15%;
    left: calc(50% - 5.0rem);
    font-family: 'Material Icons';
    content: "";
    color: #71BEEB;
    font-size: 10rem;
    opacity: .3;
}
.points_container.study > div:before {
    content: "\e80cs";
}
.points_container.sports > div:before {
    content: "\eae9";
}
.points_container.group > div:before {
    content: "\f233";
}
.points_container.sst > div:before {
    content: "\f223";
}
@media print, screen and (min-width: 768px) {
.pc_container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.points_container {
    width: 48%;
}
}
@media print, screen and (min-width: 768px) {
.photo-diary {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
#main .photo-diary img {
    width: 30%;
}
}
.pictContainer {
    position: relative;
    padding-bottom: 4vw;
}
.pictChange ,
.a_flow .firm {
    filter: invert(50%) sepia(89%) saturate(9000%) hue-rotate(6330deg) brightness(180%) contrast(145%);
    opacity: .8;
}
.pictschool {
    position: absolute;
    bottom: -10vw;
    right: 0;
    display: block;
    width: 40vw;
    height: 25vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}
#main .a_flow img {
    width: 10vw;
    float: right;
    clear: right;
}
/*#events_in_a_year {
    min-height: calc((100vw * .6) + 8vw);
}*/
/*タイムライン全体の設定*/
.timeline{
	width:100%;
	margin:50px auto;
	padding:0 30px;
	counter-reset: listnum 3;
	position: relative;
}

.timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
	list-style: none;
	padding:0 0 20px 0;
	min-height: 4.2vw;
}

.timeline dl{
	margin:0 0 20px 12vw;
}
.timeline dl dt {
    display: none;
}
#main .timeline dl img {
    width: 30vw;
}

/*絶対配置で線を設定*/
.border-line {
    /*線の位置*/
	position: absolute;
	left:4.7vw;
	top:0;
	width:2px;/*線の太さ*/
	height:100%;/*はじめは高さを0に*/
	background: #3C67A9;
}


/*タイムラインの見出し横の丸の位置と形状*/
.timeline li::after {
	/*content:'';*/
	counter-increment: listnum;
    content: counter(listnum) "月";
    position: absolute;
	top:0;
	left:0;
	width:10vw;
	height: 10vw;
	background:#3C67A9;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	padding-top: 2.4vw
}
.timeline li:nth-child(10)::after {
    counter-reset: listnum 0;
}
.timeline li:nth-child(11)::after {
    counter-reset: listnum 1;
}
.timeline li:nth-child(12)::after {
    counter-reset: listnum 2;
}
@media print, screen and (min-width: 768px) {
.timeline li::after {
    padding-top: 3.5vw;
}
}
@media print, screen and (min-width: 1024px) {
.border-line {
    left:calc(2vw - 2px);
}
.timeline li::after {
    max-width: 4vw;
    max-height: 4vw;
    padding-top: 1.2vw;
}
}
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
#events_in_a_year > div {
    position: relative;
}
.event_back {
    float: right;
    top: 0;
    right: 0;
    width: 30vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
}
.eventUp {
    position: absolute;
    top: 20vw;
    right: 0;
    width: 35vw;
}
.eventDown {
    position: absolute;
    bottom: 20vw;
    right: 0;
    width: 35vw;
}
@media print, screen and (max-width: 767px) {
#main .event_back .marginTop18 {
    margin-top: 18vw;
}
}
@media print, screen and (min-width: 1024px) {
.eventUp {
    top: 0;
}
#main .event_back img {
    width: 58%;
    margin-bottom: -1rem;
}
}
.wide_container > div.green_image {
    margin: 0;
}
.green_image {
    background: url("../images/IMG_2257.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    position: relative;
    padding: 1vw;
}
.green_image .white_boad {
    z-index: 0;
    background: rgba(255,255,255,.6);
    padding: 2vw;
}
.green_image ul.comp_points > li {
    background: rgba(113,190,235,1.0);
}
.green_image ul.comp_points h3.comp_points::after {
    background: none;
}
.green_image h3.comp_points:before {
    background:rgba(113,190,235, 1);
    border:solid 2px rgba(113,190,235, 1);
}
.wide_container > div.green_image > h2,
.wide_container > div.green_image > div {
    margin:2vh 5vw;
}
@media print, screen and (max-width: 768px) {
.wide_container > div.green_image > h2 {
    padding-top: 10vh;
    margin-top: -5vh;
}
}
@media print, screen and (min-width: 768px) {
.green_image {
    background-size: cover;
    padding: 3vh 0;
    background-position: bottom -30vw left 0;
}
}
@media print, screen and (min-width: 1024px) {
.green_image {
    /*background-position: bottom -7vh left 0;*/
    background-position: bottom -39vw left 0;
    padding: 15vh 0;
}
.wide_container > div.green_image > h2,
.wide_container > div.green_image > div {
    margin:0 15vw;
}
}

/*====================================================================
.accordion_one
====================================================================*/
.accordion_one {
  max-width: 98%;
  margin: 0 auto;
  margin-top: 6vw;
}
.accordion_one > p {
    display: none;
}
.accordion_one .accordion_header {
  background-color: #3C67A9;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
}
/*.accordion_one:nth-of-type(2) .accordion_header {
    background-color: #ff9a05;
}
.accordion_one:nth-of-type(3) .accordion_header {
    background-color: #1c85d8;
}*/
.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 32px;
  height: 32px;
  border: 1px solid #fff;
  margin-top: -16px;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}
.accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i:before, .accordion_one .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  background-color: #fff;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
}
.accordion_one .accordion_header .i_box .one_i:before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}
.accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 30px 30px 10px;
  border-left: 2px solid #3C67A9;
  border-right: 2px solid #3C67A9;
  border-bottom: 2px solid #3C67A9;
  box-sizing: border-box;
}
/*.accordion_one:nth-of-type(2) .accordion_inner {
  border-left: 2px solid #ff9a05;
  border-right: 2px solid #ff9a05;
  border-bottom: 2px solid #ff9a05;
}
.accordion_one:nth-of-type(3) .accordion_inner {
  border-left: 2px solid #1c85d8;
  border-right: 2px solid #1c85d8;
  border-bottom: 2px solid #1c85d8;
}*/
.accordion_one .accordion_inner .box_one {
  height: auto;
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
@media screen and (min-width: 1024px) {
.accordion_container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.accordion_one {
    width: 48%;
}
/*.sst_bottom {
margin-bottom: -2.6rem;
}*/
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    font-size: 16px;
    padding: 15px 60px 15px 15px;
  }
}
/*====================================================================
スペシャル講座
====================================================================*/
.special_points.real_voice {
    margin: 3.2rem auto 1.2rem;
}
.special_points {
    font-size: 120%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3C67A9;
    border-radius: 60px;
    color: #fff;
    padding: 1vw 2vw;
}
#special .subtitle_icon {
    display: inline-block;
    -webkit-mask: url("../images/wing.svg") no-repeat center center / contain;
    mask-image: url("../images/wing.svg");
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    width: 4vw;
    height: 4vw;
    background-color: #3C67A9;
    margin: 0 1vw

}
#special .subtitle_icon.red {
    background-color: rgba(251, 108, 109, 1);
}
#special .subtitle_icon.purple {
    background-color: rgba(202, 166, 252, 1);
}
#special .subtitle_icon.pink {
    background-color: rgba(253, 110, 178, 1);
}
#special .subtitle_icon.aqa {
    background-color: rgba(148, 207, 251, 1);
}
#special .subtitle_icon.green {
    background-color: rgba(193, 255, 166, 1);
}
#special .subtitle_icon.brown{
    background-color: rgba(255, 222, 180, 1);
}
#special .subtitle_icon.yellow {
    background-color: rgba(240, 222, 107, 1);
}
#special .blue_tag {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 1vw 2vw;
    background: #71BEEB;
}
#special ul.sp-points {
    list-style: disc;
    margin-left: 5vw;
}
@media screen and (min-width: 1024px) {
#special h3 {
    /* width: 100%;*/
}
#special > div > div {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
#special > div > div > div {
    margin-top: 4vh;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: nowrap;
    width: 100%;
}
#special > div > div > div > div {
    width: calc(100% / 3 - 25px);
}
#special .cols30 {
    width: 30vw;
}
#special .context {
    display: flex;
    flex-flow: column;
    margin: auto 0;
    padding-left: 2vw;
    width: 100%;
}
#special .full_content {
    width: 100%;
}
#special ul.wide {
    width: 100%;
}
#special ul.sp-points > li {
    float: left;
    margin-right: 3vw;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.sp-points {
    margin-left: 0;
}
#special .subtitle_icon {
    width: 2vw;
    height: 2vw;
}
#special ul.sp-points {
    margin-left: 0;
}
#special .column-2 {
    margin-left: 10vw;
    justify-content: space-between;
}
#special .column-1 {
    justify-content: center;
    width: 100%;
}
}