@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-size: 100%;font-family: inherit;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}
strong {font-weight:bold;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
img{border: 0; margin:0; padding:0;}
figure{margin:0}
option,select {color: #333;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, picture {display: block;}
img {padding:0; margin:0; vertical-align:bottom; max-width: 100%;}
.clearfix:after {content: ".";  display: block; clear: both;height: 0;visibility: hidden;}
.clearfix {min-height: 1px;}
.clear {clear: both;}
a { text-decoration:none;}
a:hover { opacity:0.8;}
/*
font-family: 'Noto Sans JP', sans-serif; 3,5,7
font-family: 'Noto Serif JP', serif; 3,5,7
font-family: 'Roboto', sans-serif; 3,5,7
font-family: 'Tangerine', cursive; 4
font-family: 'Oswald', sans-serif; 3
*/
body{color:#333; font-size: 16px; font-family: YakuHanMP, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; -webkit-text-size-adjust: 100%;font-weight: 500;line-height: 1.5; background-color: #FFF;}

body,htnl {height:100%;}
header.top_header {height: 100vh; width: 100%; position: relative;}
header > div.header_main {max-width: 100%; height: 90px; display: flex; justify-content: space-between; box-sizing: border-box; padding: 0px 16px; margin: 0px auto;opacity: 0;}
header > div.header_main div.header_left {display: flex; align-items: center;}
header > div.header_main div.header_left h1 {margin-left: 20px;}
header > div.header_main div.header_left h1 span.h_title {font-family: 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 20px; vertical-align: middle; position: relative; padding-right: 10px; margin-right: 10px;}
header > div.header_main div.header_left h1 span.h_title:after {content: ""; height: 100%; width: 1px; background-color: #333; position: absolute; right: 0; top:0%;}
header > div.header_main div.header_left h1 strong.h_st {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 30px; vertical-align: middle;}
header > div.header_main div.header_right {display: flex; align-items: center;}
header > div.header_main div.header_right > p {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 12px; margin-right: 20px;}
header > div.header_main div.header_right > ul {margin-right: 50px;}
header > div.header_main div.header_right > ul li a img { width: 24px;}
header.middle_header > div.header_main {max-width: 100%; height: 90px; display: flex; justify-content: space-between; box-sizing: border-box; padding: 0px 16px; margin: 0px auto;opacity: 1;}

header .list_icon {width: 21px; height: 21px; position: fixed; top: 33px; right: 20px; z-index: 10000; cursor: pointer;transition: .6s;}
header .list_icon span {width: 5px; height: 5px; background-color:#333333;position: absolute; }
header .list_icon span:nth-child(1){top: 0; left: 0; transition: .6s;}
header .list_icon span:nth-child(2){top: 0; left: 8px; transition: .6s;}
header .list_icon span:nth-child(3){top: 0; left: 16px; transition: .6s;}
header .list_icon span:nth-child(4){top: 8px; left: 0; transition: .6s;}
header .list_icon span:nth-child(5){top: 8px; left: 8px; transition: .6s;}
header .list_icon span:nth-child(6){top: 8px; left: 16px; transition: .6s;}
header .list_icon span:nth-child(7){top: 16px; left: 0; transition: .6s;}
header .list_icon span:nth-child(8){top: 16px; left: 8px; transition: .6s;}
header .list_icon span:nth-child(9){top: 16px; left: 16px; transition: .6s;}

/*
header .list_icon:not(.active):hover {transform: rotate(0deg);}
header .list_icon:not(.active):hover span:nth-child(1){transform: translate(8px,8px);}
header .list_icon:not(.active):hover span:nth-child(3){transform: translate(-8px,8px);}
header .list_icon:not(.active):hover span:nth-child(7){transform: translate(8px,-8px);}
header .list_icon:not(.active):hover span:nth-child(9){transform: translate(-8px,-8px);}
header .list_icon:not(.active):hover span:nth-child(2){transform: rotate(180deg);}
header .list_icon:not(.active):hover span:nth-child(4){transform: rotate(180deg);}
header .list_icon:not(.active):hover span:nth-child(6){transform: rotate(-180deg);}
header .list_icon:not(.active):hover span:nth-child(8){transform: rotate(-180deg);}
*/

header .list_icon.active {transform: rotate(-45deg);}
header .list_icon.active span:nth-child(1){transform: translate(8px,8px);}
header .list_icon.active span:nth-child(3){transform: translate(-8px,8px);}
header .list_icon.active span:nth-child(7){transform: translate(8px,-8px);}
header .list_icon.active span:nth-child(9){transform: translate(-8px,-8px);}
header .list_icon.active span:nth-child(2){transform: rotate(180deg);}
header .list_icon.active span:nth-child(4){transform: rotate(180deg);}
header .list_icon.active span:nth-child(6){transform: rotate(-180deg);}
header .list_icon.active span:nth-child(8){transform: rotate(-180deg);}


/*
header .list_icon.active:hover span:nth-child(1){top: 8px; left: 8px;transition: .6s;}
header .list_icon.active:hover span:nth-child(2){top: 0px; left: 0px;transition: .6s;}
header .list_icon.active:hover span:nth-child(3){top: 8px; left: 8px;transition: .6s;}
header .list_icon.active:hover span:nth-child(4){top: 16px; left: 0px;transition: .6s;}
header .list_icon.active:hover span:nth-child(5){top: 8px; left: 8px;transition: .6s;}
header .list_icon.active:hover span:nth-child(6){top: 0px; left: 16px;transition: .6s;}
header .list_icon.active:hover span:nth-child(7){top: 8px; left: 8px;transition: .6s;}
header .list_icon.active:hover span:nth-child(8){top: 16px; left: 16px;transition: .6s;}
header .list_icon.active:hover span:nth-child(9){top: 8px; left: 8px;transition: .6s;}
*/

.overlay{top:0;left:0;position:fixed;display:none;width:100%;height:100%;background:rgba(255,255,255,.98);-moz-transform:scale(1.4);-ms-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4);-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-webkit-transition-property:-webkit-transform;transition-property:transform;transition-duration:.4s;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; z-index:10000;}
.overlay_wrapper {width:100%;height:100%; padding:0px; box-sizing:border-box; display: flex; min-height: 670px;}
.overlay_wrapper > .nav_img {width: 50%; height: 100%; background: url("../images/top_main.jpg") no-repeat center center; background-size: cover;}
.overlay_wrapper > nav {width: 50%; padding: 0px 40px 30px; height: 100%; box-sizing: border-box;}
.overlay_wrapper > nav > p {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 18px; padding: 30px 0px; text-align: right; padding-right: 50px;}
.overlay_wrapper > nav > div.overlay_navi {display: flex; justify-content: space-between;}
.overlay_wrapper > nav > div.overlay_navi div {width: 48%;}
.overlay_wrapper > nav > div.overlay_navi div + div {}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]):first-child li:first-child a {border-top: 1px solid #DDD;}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]) li a {color: #333; display: block; border-bottom: 1px solid #DDD; padding: 15px;position: relative;}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]) li a:after {position: absolute;right: 15px;top: calc(50% - 3px);display: block;content: "";width: 7px; height:7px;border-right: 2px solid #333;border-top:2px solid #333;transform: rotate(45deg); z-index: 2; opacity: .8; transition: all 0.5s;}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]) li a:hover:after {right: 5px;}
.overlay_wrapper > nav .banner_area {display: flex; justify-content: space-between; align-items: center; padding-top: 40px;}
.overlay_wrapper > nav .banner_area li {width: 200px; margin-right: 10px;}
.overlay_wrapper > nav .banner_area li:last-child {margin-right: 0px;}
.overlay.active {-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);}

.h_text {position: relative; overflow: hidden;}
.rect {position: absolute; top: 0; left: 0; content: "";background-image: linear-gradient(120deg, rgba(0, 171, 132, 1), rgba(24, 127, 196, 1)); width: 100%; height: 100%;transform: translateX(-101%); z-index: 1;}
.imgrect {position: absolute; top: 0; left: 0; content: "";background-image: linear-gradient(120deg, rgba(0, 171, 132, 1), rgba(24, 127, 196, 1)); width: 100%; height: 100%;transform: translateX(-101%); z-index: 1;}

header.top_header .top_header_cont { display: flex; align-items: center; height: calc(100% - 90px);}
header.top_header .top_header_cont h2 {font-family: "Hiragino Mincho ProN"; width: 400px; font-size: 30px; font-weight: 300;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;letter-spacing: 0.1em; text-align: center;align-items: center;display: flex; opacity: 0;}
header.top_header .top_header_cont figure { width: calc(100% - 400px); height: 100%;}
header.top_header .top_header_cont figure picture {width: 100%; height: 100%; overflow: hidden; position: relative;}
header.top_header .top_header_cont figure picture img {width: 100%;height: 100%; object-fit: cover; animation: animationZoom1 10s ease-in-out forwards; opacity: 0;}
@keyframes animationZoom1 {
100% { transform: scale(1.1)}
}
header.top_header:after {content: ""; position: absolute; bottom: 30px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}
@keyframes slide1 {
  0% {
    background-position: 0 100%;
  }
  100% {
    background-position: 100% 100%;
  }
}

.top_main {margin-top: 140px;}
.top_feature {overflow: hidden;}
.top_feature:hover .top_feature_main > figure img {transform: scale(1.1);}
.top_feature_main {display: flex; justify-content: flex-end; position: relative;}
.top_feature_main > div {width: 53%; box-sizing: border-box; margin: 80px 0px; background-color: #FFF; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center;position: relative; z-index: 1;}
.top_feature_main > div > div {max-width: 600px; text-align: center; padding: 40px 0px 70px;}
.top_feature_main > div > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 62px;}
.top_feature_main > div > div > h2 {font-size: 16px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_feature_main > div > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_feature_main > div > div > h3 {font-size: 18px; font-weight: 300; margin-bottom: 60px;}
.top_feature_main > figure {position:absolute; width: 50%; height: 100%;overflow: hidden; left: 0; top: 0;}
.top_feature_main > figure img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}

.link_c a {font-size: 14px;  color: #333; position: relative;}
.link_c a span {position: relative;}
.link_c a:after {content: ""; width: 36px; height: 36px;background-image: linear-gradient(130deg, rgba(0, 171, 132, 1), rgba(24, 127, 196, 1)); border-radius: 18px; position: absolute; top: -10px; right: -56px;}
.link_c a span:after {position: absolute;right: -41px;top: 4px;display: block;content: "";width: 7px; height:7px;border-right: 2px solid #fff;border-top:2px solid #fff;transform: rotate(45deg); z-index: 2; opacity: .8; transition: all 0.5s;}
.link_c a:hover span:after {right: -44px;}

.top_curriculum {margin: 80px 0px 110px; overflow: hidden;}
.top_curriculum_main {max-width: 1200px; position: relative; margin: 0px auto; padding: 80px 0px 50px;}
.top_curriculum_cont {max-width: 456px; box-sizing: border-box; margin: 0px auto; background-color: #FFF; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; padding: 60px 0px; position: relative; z-index: 4;}
.top_curriculum_cont > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 62px;}
.top_curriculum_cont > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_curriculum_cont > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_curriculum_cont > div > h3 {font-size: 18px; font-weight: 300; margin-bottom: 60px;}
.top_curriculum_main > ul li {position: absolute;}
.top_curriculum_main > ul li:first-child {top: 60px;left: -250px; z-index: 1;}
.top_curriculum_main > ul li:nth-child(2) {bottom:0px;left:78px; z-index: 2;}
.top_curriculum_main > ul li:nth-child(3) {top: 0; right: -160px;}

.top_voice {overflow: hidden; margin-bottom: 130px;}
.top_voice_main {margin: 0px auto; position: relative;}
.top_voice_cont {box-sizing: border-box; margin: 0px auto; background-color: #FFF; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; position: absolute; width: 200vw; z-index: 2; top: 54px; left: -159.5vw; display: flex; justify-content: flex-end;}
.top_voice_cont > div {width: 400px;padding: 60px 0px;}
.top_voice_cont > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 62px;}
.top_voice_cont > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_voice_cont > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_voice_cont > div > h3 {font-size: 18px; font-weight: 300; margin-bottom: 60px;}

.top_slider {width: 100%; margin-left: 0%; position: relative;z-index: 1;}
.swiper {width: 60% !important; margin-left: 40%!important; overflow: hidden;}
.swiper-wrapper{transition-timing-function: linear;}
.swiper-slide {width: 340px!important;}
.swiper-slide a {color: #333; }
.top_voice_card {position: relative;}
.top_voice_card > figcaption > div.annual {position: absolute; right: 0; top:16px; padding-right: 17px;}
.top_voice_card > figcaption > div.annual > p {font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 12px;}
.top_voice_card > figcaption > div.annual > dl {display: flex;text-shadow: 0px 0px 4px rgba(255,255,255,0.8);}
.top_voice_card > figcaption > div.annual > dl dt {font-family: 'Oswald', sans-serif; font-weight: 300;font-size: 80px; line-height: 100%;}
.top_voice_card > figcaption > div.annual > dl dd {padding-top: 32px; margin-left: 5px;}
.top_voice_card > figcaption > div.annual > dl dd span {display: block;font-family: 'Noto Sans JP', sans-serif; font-size: 13px; border-top: 1px solid #333;}
.top_voice_card > figcaption > div.annual > dl dd span + span {border-bottom: 1px solid #333;}
.top_voice_card > figcaption > h4.read {position: absolute; font-family: 'Noto Sans JP', sans-serif; writing-mode: vertical-rl; color: #FFF; font-size: 14px; line-height: 200%; left: 30px; top: 13px;}
.top_voice_card > figcaption > h4.read span { background-color: #00AB84; padding: 3px;}
.top_voice_card > figcaption > div.name {position: absolute; width: 100%; padding: 10px; box-sizing: border-box; bottom: 0; left: 0; background-color: rgba(255,255,255,.8); font-weight: 300;font-family: 'Noto Sans JP', sans-serif;}
.top_voice_card > figcaption > div.name h5 {font-size: 18px;}
.top_voice_card > figcaption > div.name h5 span {font-size: 12px;}
.top_voice_card > figcaption > div.name h6 {font-size: 12px;}

.top_faculty {overflow: hidden; position: relative;}
.top_faculty:hover .top_faculty_main > figure img {transform: scale(1.1);}
.top_faculty_main {display: flex; justify-content: flex-end;position: relative;}
.top_faculty_main > div {width: 53%; box-sizing: border-box; margin: 80px 0px; background-color: #FFF; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center;position: relative; z-index: 1;}
.top_faculty_main > div > div {max-width: 600px; text-align: center; padding: 40px 100px 70px; box-sizing: border-box;}
.top_faculty_main > div > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size:62px;}
.top_faculty_main > div > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_faculty_main > div > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_faculty_main > div > div > h3 {font-size: 18px; font-weight: 300; margin-bottom: 60px; line-height: 180%;}
.top_faculty_main > figure {position:absolute; width: 50%; height: 100%;overflow: hidden; left: 0; top: 0;}
.top_faculty_main > figure img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}


.top_after {overflow: hidden; padding-top: 120px; position: relative;}
.top_after:hover .top_after_main > figure img {transform: scale(1.1);}
.top_after_main {display: flex;position: relative;}
.top_after_main > div {width: 53%; box-sizing: border-box; margin: 80px 0px; background-color: #FFF; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center;position: relative;z-index: 1; display: flex; justify-content: flex-end;}
.top_after_main > div > div {max-width: 600px; width: 600px; text-align: center; padding: 40px 100px 70px; box-sizing: border-box;}
.top_after_main > div > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 62px;}
.top_after_main > div > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_after_main > div > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_after_main > div > div > h3 {font-size: 18px; font-weight: 300; margin-bottom: 60px; line-height: 180%;}
.top_after_main > figure {position:absolute; width: 50%; height: 100%;overflow: hidden; right: 0; top: 0;}
.top_after_main > figure img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}
.top_after:after {content: ""; position: absolute; top:0px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

.top_etc_link {width: 100%; margin: 120px auto 0px; position: relative;}
.top_etc_link > div {max-width: 1200px;  margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.top_etc_link > div > figure {width: 49%; display: flex; align-items: center; margin-bottom: 4%;}
.top_etc_link > div > figure:hover picture img {transform: scale(1.1);}
.top_etc_link > div > figure picture {width: 300px; height: auto;overflow: hidden; position: relative; z-index: 0;}
.top_etc_link > div > figure picture img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}
.top_etc_link > div > figure figcaption a {display: block; background-color: #FFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; width: 280px; position: relative;margin-left: -20px; z-index: 1; color: #333; padding: 30px 0px;}
.top_etc_link > div > figure figcaption a dl dt {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 42px;}
.top_etc_link > div > figure figcaption a dl dd {font-size: 16px; font-weight: 300; }
.top_etc_link > div > figure figcaption a:hover {opacity: 1;}
.top_etc_link > div > figure figcaption a:hover dl {opacity: .8;}
.top_etc_link > div > figure figcaption a:after {content: ""; width: 28px; height: 28px;background-image: linear-gradient(130deg, rgba(0, 171, 132, 1), rgba(24, 127, 196, 1)); border-radius: 14px; position: absolute; bottom: 10px; right: 10px;}
.top_etc_link > div > figure figcaption a:before {position: absolute;right: 22px;bottom:20px; display: block;content: "";width: 5px; height:5px;border-right: 2px solid #fff;border-top:2px solid #fff;transform: rotate(45deg); z-index: 2; opacity: .8; transition: all 0.5s;}
.top_etc_link > div > figure figcaption a:hover:before {right:18px;}
.top_etc_link:after {content: ""; position: absolute; bottom: 30px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

.top_message {position: relative; margin: 120px auto 0px;}
.top_message > p {text-align: center;font-family: 'Tangerine', cursive; font-weight: 400; font-size: 62px;}
.top_message > h2 {font-size: 14px;text-align: center;}
.top_message > div {max-width: 1200px; margin: 58px auto 0px;}
.top_message > div figure {display: flex; justify-content: flex-end;}
.top_message > div figure figcaption {width: 45%;}
.top_message > div figure figcaption h3 {font-weight: 700; font-size: 24px;letter-spacing: 0.1em; margin-bottom: 24px;}
.top_message > div figure figcaption p {line-height: 200%; margin-bottom:2em; letter-spacing: 0.1em;}
.top_message > div figure picture {position: absolute; width: 50%; left:0px; top: 180px; }
.top_message > div figure picture img {object-fit: cover;width: 100%; height: auto; object-position: center;max-height: 640px;}
.top_message:after {content: ""; position: absolute; bottom: 30px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

footer {padding-top: 90px;}
footer a {color: #333;}
footer .footer_cont {max-width: 940px; margin: 0px auto; position: relative;}
footer .pagetop {position: absolute; bottom: 0; right: 0px;}
footer .pagetop a {display: block; width: 36px; height: 36px; background-color: #000;border-radius: 18px; position: relative; text-indent: -9999px; }
footer .pagetop a:after {position: absolute;right: calc(50% - 5px);top: calc(50% - 3px); display: block;content: "";width: 7px; height:7px;border-right: 2px solid #fff;border-top:2px solid #fff;transform: rotate(-45deg); z-index: 1; transition: all 0.5s;}
footer .pagetop a:hover:after {top:calc(50% - 7px);}

footer .footer_map {display: flex; justify-content: space-between;}
footer .footer_map ul li {margin-bottom: 14px; position: relative;}
footer .footer_map ul li.inst {padding-left: 24px;}
footer .footer_map ul li.inst:after {content: ""; width: 20px; height: 20px; background: url("../images/footer_inst.png") no-repeat center center; background-size: cover;position: absolute; left: 0; top: 2px;}
footer .footer_map ul li.inst:hover:after {opacity: .8;}
footer .footer_map ul li.fb {padding-left: 24px;}
footer .footer_map ul li.fb:after {content: ""; width: 20px; height: 21px; background: url("../images/footer_fb.png") no-repeat center center; background-size: cover;position: absolute; left: 0; top: 2px;}
footer .footer_map ul li.fb:hover:after {opacity: .8;}
footer .footer_map ul li.inq {padding-left: 24px;}
footer .footer_map ul li.inq:after {content: ""; width: 20px; height: 20px; background: url("../images/footer_inq.png") no-repeat center center; background-size: cover;position: absolute; left: 0; top: 2px;}
footer .footer_map ul li.inq:hover:after {opacity: .8;}
footer .copy {font-size: 12px; text-align: center; padding: 50px 0px;}
footer .banner_area {display: flex; align-items: center; justify-content: center; margin-top: 50px;}
footer .banner_area li {margin: 0px 20px;}

@media only screen and (max-width:1400px){
header.top_header {max-height: 840px; min-height: 840px;}
}
@media only screen and (max-width:1100px){
header.top_header {max-height: 640px; min-height: 640px;}
header.top_header .top_header_cont { display: flex; align-items: center; justify-content: space-between; height: calc(100% - 90px);}
header.top_header .top_header_cont h2 {font-family: "Hiragino Mincho ProN"; width: 25%; font-size: 30px; font-weight: 300;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;letter-spacing: 0.1em; text-align: center;align-items: center;display: flex; opacity: 0;}
header.top_header .top_header_cont figure { width: 70%; height: 100%;}

.overlay_wrapper > nav {width: 60%; padding: 0px 20px 30px; height: 100%; box-sizing: border-box;}
}
@media only screen and (max-width:1000px){
footer .footer_cont {max-width: 940px; padding: 0px 20px; box-sizing: border-box; margin: 0px auto; position: relative;}

}
@media only screen and (max-width:840px){
header > div.header_main div.header_right > p {display: none;}

}
@media only screen and (max-width:768px){
header.top_header .top_header_cont h2 {font-family: "Hiragino Mincho ProN"; width: 25%; font-size: 24px; font-weight: 300;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;letter-spacing: 0.1em; text-align: center;align-items: center;display: flex; opacity: 0;}

.top_feature_main {display: flex; justify-content: flex-end; position: relative;}
.top_feature_main > div {width: 53%; box-sizing: border-box; margin: 80px 0px; background-color: rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center;position: relative; z-index: 1;}
.top_feature_main > div > div {max-width: 600px; text-align: center; padding: 30px 0px 30px;}
.top_feature_main > div > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 52px;}
.top_feature_main > div > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_feature_main > div > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_feature_main > div > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 30px;}
.top_feature_main > figure {position:absolute; width: 100%; height: 100%;overflow: hidden; left: 0; top: 0;}
.top_feature_main > figure img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}

.link_c a {font-size: 14px;  color: #333; position: relative;}
.link_c a span {position: relative;}
.link_c a:after {content: ""; width: 26px; height: 26px;background-image: linear-gradient(130deg, rgba(0, 171, 132, 1), rgba(24, 127, 196, 1)); border-radius: 18px; position: absolute; top: -4px; right: -46px;}
.link_c a span:after {position: absolute;right: -35px;top: 5px;display: block;content: "";width: 5px; height:5px;border-right: 2px solid #fff;border-top:2px solid #fff;transform: rotate(45deg); z-index: 2; opacity: .8; transition: all 0.5s;}
.link_c a:hover span:after {right: -40px;}

.top_curriculum_cont {max-width: 390px; box-sizing: border-box; margin: 0px auto; background-color: rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; padding: 30px 0px; position: relative; z-index: 4;}
.top_curriculum_cont > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 52px;}
.top_curriculum_cont > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_curriculum_cont > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_curriculum_cont > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 30px;}
.top_curriculum_main > ul li {position: absolute;}
.top_curriculum_main > ul li:first-child {top: 60px;left: -250px; z-index: 1;}
.top_curriculum_main > ul li:nth-child(2) {bottom:0px;left:78px; z-index: 2;}
.top_curriculum_main > ul li:nth-child(3) {top: 0; right: -160px;}

.top_voice_cont {box-sizing: border-box; margin: 0px auto; background-color:rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; position: absolute; width: 340px; z-index: 2; top: 54px; left: -20px; display: flex; justify-content: flex-end;}
.top_voice_cont > div {width: 340px;padding: 30px 0px;}
.top_voice_cont > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 52px;}
.top_voice_cont > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_voice_cont > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_voice_cont > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 30px;}

.swiper-slide {width: 340px!important; height: 400px!important;}
.swiper-slide a {color: #333; }
.top_voice_card {position: relative; height: 400px!important;}
.top_voice_card > figcaption > div.annual {position: absolute; right: 0; top:16px; padding-right: 17px;}
.top_voice_card > figcaption > div.annual > p {font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 12px;}
.top_voice_card > figcaption > div.annual > dl {display: flex;text-shadow: 0px 0px 4px rgba(255,255,255,0.8);}
.top_voice_card > figcaption > div.annual > dl dt {font-family: 'Oswald', sans-serif; font-weight: 300;font-size: 80px; line-height: 100%;}
.top_voice_card > figcaption > div.annual > dl dd {padding-top: 32px; margin-left: 5px;}
.top_voice_card > figcaption > div.annual > dl dd span {display: block;font-family: 'Noto Sans JP', sans-serif; font-size: 13px; border-top: 1px solid #333;}
.top_voice_card > figcaption > div.annual > dl dd span + span {border-bottom: 1px solid #333;}
.top_voice_card > figcaption > h4.read {position: absolute; font-family: 'Noto Sans JP', sans-serif; writing-mode: vertical-rl; color: #FFF; font-size: 14px; line-height: 200%; left: 30px; top: 13px;}
.top_voice_card > figcaption > h4.read span { background-color: #00AB84; padding: 3px;}
.top_voice_card > figcaption > div.name {position: absolute; width: 100%; padding: 10px; box-sizing: border-box; bottom: 0; left: 0; background-color: rgba(255,255,255,.8); font-weight: 300;font-family: 'Noto Sans JP', sans-serif;}
.top_voice_card > figcaption > div.name h5 {font-size: 18px;}
.top_voice_card > figcaption > div.name h5 span {font-size: 12px;}
.top_voice_card > figcaption > div.name h6 {font-size: 12px;}

.top_faculty_main {display: flex; justify-content: flex-end;position: relative;}
.top_faculty_main > div {width: 53%; box-sizing: border-box; margin: 80px 0px; background-color: rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center;position: relative; z-index: 1;}
.top_faculty_main > div > div {max-width: 600px; text-align: center; padding: 30px 30px 30px; box-sizing: border-box;}
.top_faculty_main > div > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size:52px;}
.top_faculty_main > div > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_faculty_main > div > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_faculty_main > div > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 30px; line-height: 180%;}
.top_faculty_main > figure {position:absolute; width:100%; height: 100%;overflow: hidden; left: 0; top: 0;}
.top_faculty_main > figure img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}

.top_after_main > div {width: 53%; box-sizing: border-box; margin: 80px 0px; background-color:rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center;position: relative;z-index: 1; display: flex; justify-content: flex-end;}
.top_after_main > div > div {max-width: 600px; width: 600px; text-align: center; padding: 30px; box-sizing: border-box;}
.top_after_main > div > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 52px;}
.top_after_main > div > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_after_main > div > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_after_main > div > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 60px; line-height: 180%;}
.top_after_main > figure {position:absolute; width: 100%; height: 100%;overflow: hidden; right: 0; top: 0;}
.top_after_main > figure img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}
.top_after:after {content: ""; position: absolute; top:0px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

.top_etc_link {width: 100%; margin: 120px auto 0px; position: relative; padding: 0px 20px; box-sizing: border-box;}
.top_etc_link > div {max-width: 1200px;  margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.top_etc_link > div > figure {width: 49%; display:block; align-items: center; margin-bottom: 4%;}
.top_etc_link > div > figure:hover picture img {transform: scale(1.1);}
.top_etc_link > div > figure picture {width: 100%; height: auto;overflow: hidden; position: relative; z-index: 0;}
.top_etc_link > div > figure picture img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}
.top_etc_link > div > figure figcaption a {display: block; background-color: #FFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; width: 100%; position: relative;margin-left:0px; z-index: 1; color: #333; padding: 15px; box-sizing: border-box;}
.top_etc_link > div > figure figcaption a dl dt {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 42px;}
.top_etc_link > div > figure figcaption a dl dd {font-size: 16px; font-weight: 300; }
.top_etc_link > div > figure figcaption a:hover {opacity: 1;}
.top_etc_link > div > figure figcaption a:hover dl {opacity: .8;}
.top_etc_link > div > figure figcaption a:after {content: ""; width: 28px; height: 28px;background-image: linear-gradient(130deg, rgba(0, 171, 132, 1), rgba(24, 127, 196, 1)); border-radius: 14px; position: absolute; bottom: 10px; right: 10px;}
.top_etc_link > div > figure figcaption a:before {position: absolute;right: 22px;bottom:20px; display: block;content: "";width: 5px; height:5px;border-right: 2px solid #fff;border-top:2px solid #fff;transform: rotate(45deg); z-index: 2; opacity: .8; transition: all 0.5s;}
.top_etc_link > div > figure figcaption a:hover:before {right:18px;}
.top_etc_link:after {content: ""; position: absolute; bottom: 30px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

.top_message > p {text-align: center;font-family: 'Tangerine', cursive; font-weight: 400; font-size: 62px;}
.top_message > h2 {font-size: 14px;text-align: center;}
.top_message > div {max-width: 1200px; margin: 58px auto 0px;}
.top_message > div figure {display: flex; justify-content: flex-end;}
.top_message > div figure figcaption {width: 60%; padding: 30px; box-sizing: border-box; background-color:rgba(255,255,255,.9);box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); z-index: 1; position: relative; margin-top: 20px; }
.top_message > div figure figcaption h3 {font-weight: 700; font-size: 20px;letter-spacing: 0.1em; margin-bottom: 20px;}
.top_message > div figure figcaption p {line-height: 200%; margin-bottom:2em; letter-spacing: 0.1em;}
.top_message > div figure picture {position: absolute; width: 50%; left:0px; top: 180px; z-index: 0; }
.top_message > div figure picture img {object-fit: cover;width: 100%; height: auto; object-position: center;max-height: 640px;}
.top_message:after {content: ""; position: absolute; bottom: 30px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

.overlay_wrapper {width:100%;height:100%; padding:0px; box-sizing:border-box; display: flex; min-height: 670px;}
.overlay_wrapper > .nav_img {width: 100%; height: 100%; background: url("../images/top_main.jpg") no-repeat center center; background-size: cover; display: none;}
.overlay_wrapper > nav {width: 100%; padding: 0px 20px 30px; height: 100%; box-sizing: border-box;}
.overlay_wrapper > nav > p {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 18px; padding: 30px 0px; text-align: left; padding-right: 0px;}
.overlay_wrapper > nav > div.overlay_navi {display: flex; justify-content: space-between;}
.overlay_wrapper > nav > div.overlay_navi div {width: 48%;}
.overlay_wrapper > nav > div.overlay_navi div + div {}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]):first-child li:first-child a {border-top: 1px solid #DDD;}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]) li a {color: #333; display: block; border-bottom: 1px solid #DDD; padding: 15px;position: relative;}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]) li a:after {position: absolute;right: 15px;top: calc(50% - 3px);display: block;content: "";width: 7px; height:7px;border-right: 2px solid #333;border-top:2px solid #333;transform: rotate(45deg); z-index: 2; opacity: .8; transition: all 0.5s;}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]) li a:hover:after {right: 5px;}
.overlay_wrapper > nav .banner_area {display: flex; justify-content: space-between; align-items: center; padding-top: 40px;}
.overlay_wrapper > nav .banner_area li {width: 200px; margin-right: 10px;}
.overlay_wrapper > nav .banner_area li:last-child {margin-right: 0px;}
.overlay.active {-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);}


footer .pagetop {position: absolute; bottom:auto; top: -50px; right: 20px;}
footer .pagetop a {display: block; width: 36px; height: 36px; background-color: #000;border-radius: 18px; position: relative; text-indent: -9999px; }
footer .pagetop a:after {position: absolute;right: calc(50% - 5px);top: calc(50% - 3px); display: block;content: "";width: 7px; height:7px;border-right: 2px solid #fff;border-top:2px solid #fff;transform: rotate(-45deg); z-index: 1; transition: all 0.5s;}
footer .pagetop a:hover:after {top:calc(50% - 7px);}

footer .footer_map {justify-content: space-between; display: none;}
footer .footer_map ul {}
footer .footer_map ul li {margin-bottom: 14px; position: relative;}
footer .footer_map ul li.inst {padding-left: 24px;}
footer .footer_map ul li.inst:after {content: ""; width: 20px; height: 20px; background: url("../images/footer_inst.png") no-repeat center center; background-size: cover;position: absolute; left: 0; top: 2px;}
footer .footer_map ul li.inst:hover:after {opacity: .8;}
footer .footer_map ul li.fb {padding-left: 24px;}
footer .footer_map ul li.fb:after {content: ""; width: 20px; height: 21px; background: url("../images/footer_fb.png") no-repeat center center; background-size: cover;position: absolute; left: 0; top: 2px;}
footer .footer_map ul li.fb:hover:after {opacity: .8;}
footer .footer_map ul li.inq {padding-left: 24px;}
footer .footer_map ul li.inq:after {content: ""; width: 20px; height: 20px; background: url("../images/footer_inq.png") no-repeat center center; background-size: cover;position: absolute; left: 0; top: 2px;}
footer .footer_map ul li.inq:hover:after {opacity: .8;}
footer .copy {font-size: 12px; text-align: center; padding: 50px 0px;}
footer .banner_area {display: flex; align-items: center; justify-content: center; margin-top: 50px;}
footer .banner_area li {margin: 0px 20px;}

}
@media only screen and (max-width:640px){
header > div.header_main {max-width: 100%; height: 70px; display: flex; justify-content: space-between; box-sizing: border-box; padding: 0px 16px; margin: 0px auto;opacity: 0;}
header > div.header_main div.header_left > p {width: 120px;}
header > div.header_main div.header_left h1 {margin-left: 20px;}
header > div.header_main div.header_left h1 span.h_title {font-family: 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 16px; vertical-align: middle; position: relative; padding-right: 10px; margin-right: 10px;}
header > div.header_main div.header_left h1 span.h_title:after {content: ""; height: 100%; width: 1px; background-color: #333; position: absolute; right: 0; top:0%;}
header > div.header_main div.header_left h1 strong.h_st {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 18px; vertical-align: middle;}

header .list_icon {width: 21px; height: 21px; position: fixed; top: 24px; right: 20px; z-index: 10000; cursor: pointer;transition: .6s;}

header.top_header {max-height: 640px; min-height: 640px;}
header.top_header .top_header_cont { display: block; align-items: center; justify-content: space-between; height: calc(100% - 70px);}
header.top_header .top_header_cont h2 {font-family: "Hiragino Mincho ProN"; width:100%; font-size: 24px; font-weight: 300;-ms-writing-mode: lr-tb;writing-mode: horizontal-tb;letter-spacing: 0.1em; text-align: center;align-items: center;display: flex; opacity: 0; position: absolute; z-index: 2; background-color: rgba(255,255,255,.5); bottom: 50px; left: 0;}
header.top_header .top_header_cont figure { width:100%; height: 100%;}
header.top_header .top_header_cont figure picture {width: 100%; height: 100%; overflow: hidden; position: relative;}
header.top_header .top_header_cont figure picture img {width: 100%;height: 100%; object-fit: cover; animation: animationZoom1 10s ease-in-out forwards; opacity: 0;}
header.middle_header > div.header_main {max-width: 100%; height: 70px; display: flex; justify-content: space-between; box-sizing: border-box; padding: 0px 16px; margin: 0px auto;opacity: 1;}

.top_main {margin-top: 70px;}
.top_feature_main {display: flex; justify-content: flex-end; position: relative;}
.top_feature_main > div {width: 100%; box-sizing: border-box; margin: 80px 0px; background-color: rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center;position: relative; z-index: 1;}
.top_feature_main > div > div {max-width: 600px; text-align: center; padding: 30px 0px 30px;}
.top_feature_main > div > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 52px;}
.top_feature_main > div > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_feature_main > div > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_feature_main > div > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 30px;}
.top_feature_main > figure {position:absolute; width: 100%; height: 100%;overflow: hidden; left: 0; top: 0;}
.top_feature_main > figure img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}

.top_curriculum {margin: 60px 0px 60px; overflow: hidden;}
.top_curriculum_cont {max-width:100%; box-sizing: border-box; margin: 0px auto; background-color: rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; padding: 30px 0px; position: relative; z-index: 4;}
.top_curriculum_cont > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 52px;}
.top_curriculum_cont > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_curriculum_cont > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_curriculum_cont > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 30px;}
.top_curriculum_main > ul li {position: absolute;}
.top_curriculum_main > ul li:first-child {top: 60px;left: -250px; z-index: 3;}
.top_curriculum_main > ul li:nth-child(2) {bottom:0px;left:78px; z-index: 2;}
.top_curriculum_main > ul li:nth-child(3) {top: 0; right: -160px;z-index: 1;}

.top_voice_cont {box-sizing: border-box; margin: 0px auto; background-color:rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; position: relative; width: 100%; z-index: 2; top: 0px; left: 0px; display: flex; justify-content: flex-end;}
.top_voice_cont > div {width: 100%;padding: 30px 20px;}
.top_voice_cont > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 52px;}
.top_voice_cont > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_voice_cont > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_voice_cont > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 30px;}

.top_voice {overflow: hidden; margin-bottom: 60px;}
.top_slider {width: 100%; margin-left: 0%; position: relative;z-index: 1;}
.swiper {width: 100% !important; margin-left: 0%!important; overflow: hidden;}
.swiper-wrapper{transition-timing-function: linear;}
.swiper-slide {width: 340px!important; height: 400px!important;}
.swiper-slide a {color: #333; }
.top_voice_card {position: relative; height: 400px!important;}
.top_voice_card > figcaption > div.annual {position: absolute; right: 0; top:16px; padding-right: 17px;}
.top_voice_card > figcaption > div.annual > p {font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 12px;}
.top_voice_card > figcaption > div.annual > dl {display: flex;text-shadow: 0px 0px 4px rgba(255,255,255,0.8);}
.top_voice_card > figcaption > div.annual > dl dt {font-family: 'Oswald', sans-serif; font-weight: 300;font-size: 80px; line-height: 100%;}
.top_voice_card > figcaption > div.annual > dl dd {padding-top: 32px; margin-left: 5px;}
.top_voice_card > figcaption > div.annual > dl dd span {display: block;font-family: 'Noto Sans JP', sans-serif; font-size: 13px; border-top: 1px solid #333;}
.top_voice_card > figcaption > div.annual > dl dd span + span {border-bottom: 1px solid #333;}
.top_voice_card > figcaption > h4.read {position: absolute; font-family: 'Noto Sans JP', sans-serif; writing-mode: vertical-rl; color: #FFF; font-size: 14px; line-height: 200%; left: 30px; top: 13px;}
.top_voice_card > figcaption > h4.read span { background-color: #00AB84; padding: 3px;}
.top_voice_card > figcaption > div.name {position: absolute; width: 100%; padding: 10px; box-sizing: border-box; bottom: 0; left: 0; background-color: rgba(255,255,255,.8); font-weight: 300;font-family: 'Noto Sans JP', sans-serif;}
.top_voice_card > figcaption > div.name h5 {font-size: 18px;}
.top_voice_card > figcaption > div.name h5 span {font-size: 12px;}
.top_voice_card > figcaption > div.name h6 {font-size: 12px;}

.top_faculty_main {display: flex; justify-content: flex-end;position: relative;}
.top_faculty_main > div {width: 100%; box-sizing: border-box; margin: 80px 0px; background-color: rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center;position: relative; z-index: 1;}
.top_faculty_main > div > div {max-width: 100%; text-align: center; padding: 30px 20px 30px; box-sizing: border-box;}
.top_faculty_main > div > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size:52px;}
.top_faculty_main > div > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_faculty_main > div > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_faculty_main > div > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 30px; line-height: 180%;}
.top_faculty_main > figure {position:absolute; width:100%; height: 100%;overflow: hidden; left: 0; top: 0;}
.top_faculty_main > figure img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}

.top_after_main > div {width: 100%; box-sizing: border-box; margin: 80px 0px; background-color:rgba(255,255,255,.9); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center;position: relative;z-index: 1; display: flex; justify-content: flex-end;}
.top_after_main > div > div {max-width: 100%; width: 100%; text-align: center; padding: 30px 20px 30px; box-sizing: border-box;}
.top_after_main > div > div > p {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 52px;}
.top_after_main > div > div > h2 {font-size: 14px; position: relative; padding-bottom: 25px; margin-bottom: 25px;}
.top_after_main > div > div > h2:after {content: ""; width: 42px; height: 1px; background-color: #00AB84; position: absolute; bottom: 0px; left: calc(50% - 21px);}
.top_after_main > div > div > h3 {font-size: 16px; font-weight: 300; margin-bottom: 30px; line-height: 180%;}
.top_after_main > figure {position:absolute; width: 100%; height: 100%;overflow: hidden; right: 0; top: 0;}
.top_after_main > figure img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}
.top_after:after {content: ""; position: absolute; top:0px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

.top_etc_link {width: 100%; margin: 60px auto 0px; position: relative; padding: 0px 20px; box-sizing: border-box;}
.top_etc_link > div {max-width: 1200px;  margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.top_etc_link > div > figure {width: 49%; display:block; align-items: center; margin-bottom: 2%;}
.top_etc_link > div > figure:hover picture img {transform: scale(1.1);}
.top_etc_link > div > figure picture {width: 100%; height: auto;overflow: hidden; position: relative; z-index: 0;}
.top_etc_link > div > figure picture img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}
.top_etc_link > div > figure figcaption a {display: block; background-color: #FFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; width: 100%; position: relative;margin-left:0px; z-index: 1; color: #333; padding: 15px; box-sizing: border-box;}
.top_etc_link > div > figure figcaption a dl dt {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 42px;}
.top_etc_link > div > figure figcaption a dl dd {font-size: 16px; font-weight: 300; }
.top_etc_link > div > figure figcaption a:hover {opacity: 1;}
.top_etc_link > div > figure figcaption a:hover dl {opacity: .8;}
.top_etc_link > div > figure figcaption a:after {content: ""; width: 28px; height: 28px;background-image: linear-gradient(130deg, rgba(0, 171, 132, 1), rgba(24, 127, 196, 1)); border-radius: 14px; position: absolute; bottom: 10px; right: 10px;}
.top_etc_link > div > figure figcaption a:before {position: absolute;right: 22px;bottom:20px; display: block;content: "";width: 5px; height:5px;border-right: 2px solid #fff;border-top:2px solid #fff;transform: rotate(45deg); z-index: 2; opacity: .8; transition: all 0.5s;}
.top_etc_link > div > figure figcaption a:hover:before {right:18px;}
.top_etc_link:after {content: ""; position: absolute; bottom: 30px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

.top_message {position: relative; margin: 60px auto 0px;}
.top_message > p {text-align: center;font-family: 'Tangerine', cursive; font-weight: 400; font-size: 52px;}
.top_message > h2 {font-size: 14px;text-align: center;}
.top_message > div {max-width: 1200px; margin:40px auto 0px;}
.top_message > div figure {display: flex; flex-direction: column; justify-content: flex-end;}
.top_message > div figure figcaption {width: calc(100% - 40px); padding: 30px; box-sizing: border-box; background-color:rgba(255,255,255,.95);box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); z-index: 1; position: relative; margin: -30px auto 0px; order: 2;}
.top_message > div figure figcaption h3 {font-weight: 700; font-size: 20px;letter-spacing: 0.1em; margin-bottom: 20px;}
.top_message > div figure figcaption p {line-height: 200%; margin-bottom:2em; letter-spacing: 0.1em;}
.top_message > div figure picture {position: relative; width: 100%; left:0px; top: 0px; z-index: 0;order: 1; }
.top_message > div figure picture img {object-fit: cover;width: 100%; height: auto; object-position: center;max-height: 640px;}
.top_message:after {content: ""; position: absolute; bottom: 30px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

}

@media only screen and (max-width:500px){

.overlay_wrapper {width:100%;height:100%; padding:0px; box-sizing:border-box; display: flex; min-height:auto;}
.overlay_wrapper > .nav_img {width: 100%; height: 100%; background: url("../images/top_main.jpg") no-repeat center center; background-size: cover; display: none;}
.overlay_wrapper > nav {width: 100%; padding: 0px 0px 30px; height: 100%; box-sizing: border-box;}
.overlay_wrapper > nav > p {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 14px; padding: 24px 20px; text-align: left; padding-right: 0px;}
.overlay_wrapper > nav > div.overlay_navi {display: flex; justify-content: space-between; flex-wrap: wrap;}
.overlay_wrapper > nav > div.overlay_navi div {width: 100%;}
.overlay_wrapper > nav > div.overlay_navi div + div {}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]):first-child li:first-child a {border-top: 1px solid #DDD;}
.overlay_wrapper > nav > div.overlay_navi div + div ul:not([class]):first-child li:first-child a {border-top: none;}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]) li a {color: #333; display: block; border-bottom: 1px solid #DDD; padding:12px 20px 12px;position: relative; font-size: 14px;}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]) li a:after {position: absolute;right: 15px;top: calc(50% - 3px);display: block;content: "";width: 7px; height:7px;border-right: 2px solid #333;border-top:2px solid #333;transform: rotate(45deg); z-index: 2; opacity: .8; transition: all 0.5s;}
.overlay_wrapper > nav > div.overlay_navi div ul:not([class]) li a:hover:after {right: 5px;}
.overlay_wrapper > nav .banner_area {display: flex; justify-content: space-between; align-items: center; padding: 40px 20px 30px;}
.overlay_wrapper > nav .banner_area li {width: 33%; margin-right: 10px;}
.overlay_wrapper > nav .banner_area li:last-child {margin-right: 0px;}
.overlay.active {-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);}

}
@media only screen and (max-width:480px){
header > div.header_main {max-width: 100%; height: 70px; display: flex; justify-content: space-between; box-sizing: border-box; padding: 0px 16px; margin: 0px auto;opacity: 0;}
header > div.header_main div.header_left > p {width: 90px;}
header > div.header_main div.header_left h1 {margin-left: 10px;}
header > div.header_main div.header_left h1 span.h_title {font-family: 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 12px; vertical-align: middle; position: relative; padding-right: 5px; margin-right: 5px;}
header > div.header_main div.header_left h1 span.h_title:after {content: ""; height: 100%; width: 1px; background-color: #333; position: absolute; right: 0; top:0%;}
header > div.header_main div.header_left h1 strong.h_st {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px; vertical-align: middle;}
header > div.header_main div.header_right {display: flex; align-items: center;}
header > div.header_main div.header_right > p {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 12px; margin-right: 20px;}
header > div.header_main div.header_right > ul {margin-right: 40px;}
header > div.header_main div.header_right > ul li a img { width: 24px;}

.top_etc_link {width: 100%; margin: 60px auto 0px; position: relative; padding: 0px 20px; box-sizing: border-box;}
.top_etc_link > div {max-width: 1200px;  margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.top_etc_link > div > figure {width: 100%; display:block; height: 100%; align-items: center; margin-bottom: 4%;}
.top_etc_link > div > figure:hover picture img {transform: scale(1.1);}
.top_etc_link > div > figure picture {width: 100%; height: 50%;overflow: hidden; position: relative; z-index: 0;}
.top_etc_link > div > figure picture img {object-fit: cover;width: 100%; height: 100%; object-position: center; transition: transform 10s ease;}
.top_etc_link > div > figure figcaption a {display: block; background-color: #FFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); text-align: center; width: 100%; position: relative;margin-left:0px; z-index: 1; color: #333; padding: 15px; box-sizing: border-box;}
.top_etc_link > div > figure figcaption a dl dt {font-family: 'Tangerine', cursive; font-weight: 400; font-size: 42px;}
.top_etc_link > div > figure figcaption a dl dd {font-size: 16px; font-weight: 300; }
.top_etc_link > div > figure figcaption a:hover {opacity: 1;}
.top_etc_link > div > figure figcaption a:hover dl {opacity: .8;}
.top_etc_link > div > figure figcaption a:after {content: ""; width: 28px; height: 28px;background-image: linear-gradient(130deg, rgba(0, 171, 132, 1), rgba(24, 127, 196, 1)); border-radius: 14px; position: absolute; bottom: 10px; right: 10px;}
.top_etc_link > div > figure figcaption a:before {position: absolute;right: 22px;bottom:20px; display: block;content: "";width: 5px; height:5px;border-right: 2px solid #fff;border-top:2px solid #fff;transform: rotate(45deg); z-index: 2; opacity: .8; transition: all 0.5s;}
.top_etc_link > div > figure figcaption a:hover:before {right:18px;}
.top_etc_link:after {content: ""; position: absolute; bottom: 30px; left: 0; width: 100%; height: 485px; background-image: url("../images/header_line.png"); background-repeat: repeat-x; background-size: cover; background-position: center;animation: slide1 30s linear infinite; z-index: -1;}

.top_voice_card > figcaption > div.name h5 {font-size: 16px;}


.top_message > div figure figcaption {width: calc(100% - 40px); padding: 20px; box-sizing: border-box; background-color:rgba(255,255,255,.95);box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); z-index: 1; position: relative; margin: -30px auto 0px; order: 2;}
.top_message > div figure figcaption h3 {font-weight: 700; font-size: 18px;letter-spacing: 0.1em; margin-bottom: 20px;}
.top_message > div figure figcaption p {line-height: 180%; margin-bottom:2em; letter-spacing: 0.1em; font-size: 14px;}

footer {padding-top: 45px;}
footer .banner_area {display: flex; align-items: center; flex-direction: column; justify-content: center; margin-top: 50px;}
footer .banner_area li {margin: 10px 0px;}

}
@media only screen and (max-width:375px){

}