@charset "UTF-8";
/* =====================================================
▼ COLOR
===================================================== */
/*---------------------------------------------------------------------------*/
.box-link { background-color: rgba(0, 161, 164, 0.1); }

.education-top { text-align: center; padding: 8rem 0 5rem; }

@media screen and (max-width: 768px) { .education-top { padding: 16vw 0 8vw; } }

.education-top_ttl { font-size: 4.2rem; color: #00A1A4; letter-spacing: 0.2em; font-weight: 400; margin-bottom: 3rem; }

.education-top p { line-height: 2.8; }

@media screen and (max-width: 768px) { .education-top_ttl { font-size: 6.4vw; margin-bottom: 5.33333vw; } }

.edu-flow_head { max-width: 80%; margin: 0 auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; }

@media screen and (max-width: 768px) { .edu-flow_head { max-width: 90%; } }

.edu-flow_head > div { background: #E6E6E6; text-align: center; font-size: 2rem; font-weight: bold; height: 10rem; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; }

.edu-flow_head > div:after { position: absolute; content: ''; width: 0; height: 0; top: 0; right: -2rem; border-top: 5rem solid transparent; border-bottom: 5rem solid transparent; border-left: 2rem solid #E6E6E6; }

@media screen and (max-width: 768px) { .edu-flow_head > div { font-size: 3.2vw; height: 13.33333vw; }
  .edu-flow_head > div:after { right: -2.66667vw; border-top: 6.66667vw solid transparent; border-bottom: 6.66667vw solid transparent; border-left: 2.66667vw solid #E6E6E6; } }

.edu-flow_head__long { width: 78%; }

.edu-flow_head__long:before { position: absolute; content: ''; right: -2rem; top: 120%; width: 2px; height: 60%; border-left: 2px dotted #E6E6E6; }

.edu-flow_head__short { width: 19%; margin-left: 3%; }

.edu-flow_img { margin-bottom: -6.5%; margin-right: -2.5%; padding-top: 3%; position: relative; z-index: 1; }

@media screen and (max-width: 768px) { .edu-flow_img { padding-top: 15%; } }

.edu-flow_img:before { position: absolute; content: ''; width: 2px; height: 14%; right: 11%; top: 5%; border-left: 2px dotted #E6E6E6; }

.edu-flow_img:after { position: absolute; content: ''; width: 2px; height: 62%; left: 10%; top: 6%; border-left: 2px dotted #E6E6E6; }

.edu-flow_img figure { text-align: center; }

.edu-flow_img img { max-width: 80%; }

.edu-flow_txt { background: #633211; padding: 4% 0 7%; text-align: center; }

.edu-flow_txt img { max-width: 80%; }

.box-note { color: #3BB149; border: 1px solid #3BB149; padding: 1rem 2rem; font-size: 1.8rem; line-height: 1.5; position: absolute; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }

.box-note span { display: inline-block; position: absolute; left: 30%; bottom: -2rem; width: 1.5rem; height: 2rem; background: #fff; }

.box-note span:before, .box-note span:after { position: absolute; content: ''; width: 0.1rem; height: 2rem; bottom: 0; background: #fff; }

.box-note span:before { left: 1rem; bottom: 0; -webkit-transform: rotate(23deg); -moz-transform: rotate(23deg); -ms-transform: rotate(23deg); transform: rotate(23deg); z-index: 1; border-right: 1px solid #3BB149; }

.box-note span:after { left: 3px; border-left: 1px solid #3BB149; -webkit-transform: rotate(-23deg); -moz-transform: rotate(-23deg); -ms-transform: rotate(-23deg); transform: rotate(-23deg); }

.box-note.box1 { bottom: 40%; left: 29%; }

.box-note.box1 span { left: 40%; }

.box-note.box2 { bottom: 55%; left: 42%; }

@media screen and (max-width: 768px) { .box-note { font-size: 2.66667vw; padding: 1.33333vw; }
  .box-note.box1 { left: 12.26667vw; bottom: 16vw; }
  .box-note.box2 { left: 35.73333vw; bottom: 18.66667vw; } }

.edu-flow_img__list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 80%; margin: 0 auto; position: relative; z-index: 2; }

.edu-flow_img__list img { display: inline-block; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }

.edu-flow_img__list img.edu_flow_img01 { width: 32%; margin-top: 12%; }

.edu-flow_img__list img.edu_flow_img02 { width: 7%; margin-left: 9.5%; margin-top: 10%; }

.edu-flow_img__list img.edu_flow_img03 { width: 7%; margin-left: 10%; margin-top: 6.5%; }

.edu-flow_img__list img.edu_flow_img04 { width: 9%; margin-left: 6.8%; margin-top: 2%; }

.edu-flow_img__list img.edu_flow_img05 { width: 12%; margin-left: 6.5%; }

.edu-flow_img.fadein .box-note { opacity: 1; }

.edu-flow_img.fadein .box-note.box1 { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; }

.edu-flow_img.fadein .box-note.box2 { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; transition-delay: 0.6s; }

.edu-flow_img.fadein .edu-flow_img__list img { opacity: 1; }

.edu-flow_img.fadein .edu-flow_img__list img.edu_flow_img01 { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; }

.edu-flow_img.fadein .edu-flow_img__list img.edu_flow_img02 { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; transition-delay: 0.6s; }

.edu-flow_img.fadein .edu-flow_img__list img.edu_flow_img03 { -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; transition-delay: 0.9s; }

.edu-flow_img.fadein .edu-flow_img__list img.edu_flow_img04 { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; transition-delay: 1.2s; }

.edu-flow_img.fadein .edu-flow_img__list img.edu_flow_img05 { -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; transition-delay: 1.5s; }