@charset "UTF-8";
#copyright{padding:30px 0;text-align:center;}
#copyright img {width: auto;}
/* ----- これより上は削除しないでください ----- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap');


/* common
-------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display: block;
}
i {
    font-style: normal;
}
ul {
    list-style: none;
}
img {
    width: 100%;
    max-width: 100%;
    height: auto;
	border: none;
	vertical-align: bottom;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
address, em, code, cite, dfn, var, optgroup {
  font-style: normal;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select {
    vertical-align: middle;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="reset"],textarea {
	-webkit-appearance: none;
	border-radius: 0;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.clear {
	font-size: 1px;
	height: 1px;
	clear: both;
}


/* module
------------------------------------------------- */
.floatL {
	float: left;
	display: inline;
}
.floatR {
	float: right;
	display: inline;
}
.alignCenter {text-align: center;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}
.valignTop {vertical-align: top;}
.valignMiddle {vertical-align: middle;}
.valignBottom {vertical-align: bottom;}

.pcon { display: block; }
.spon { display: none; }
@media only screen and (max-width:750px){
.pcon { display: none; }
.spon { display: block; }
}


/* a
------------------------------------------------- */
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
	text-decoration: none;
	outline: none;
    color: #000;
}
@media only screen and (min-width:751px){
a:hover {
	text-decoration: underline;
}
.al:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	transition: 0.4s;
	text-decoration: none;
}
.telLink {
	pointer-events: none;
}
}


/* font
------------------------------------------------- */
@media only screen and (min-width:751px){
.fo12 { font-size: 12px; }
.fo14 { font-size: 14px; }
.fo16 { font-size: 16px; }
.fo18 { font-size: 18px; }
.fo20 { font-size: 20px; }
.fo21 { font-size: 21px; }
.fo22 { font-size: 22px; }
.fo24 { font-size: 24px; }
.fo26 { font-size: 26px; }
.fo28 { font-size: 28px; }
.fo30 { font-size: 30px; }
.fo40 { font-size: 40px; }
.fo42 { font-size: 42px; }
.fo50 { font-size: 50px; }
}
@media only screen and (min-width:751px) and (max-width:1440px){
.fo12 { font-size: 0.8333vw; }
.fo14 { font-size: 0.9722vw; }
.fo16 { font-size: 1.1111vw; }
.fo18 { font-size: 1.25vw; }
.fo20 { font-size: 1.3888vw; }
.fo21 { font-size: 1.4583vw; }
.fo22 { font-size: 1.5277vw; }
.fo24 { font-size: 1.6666vw; }
.fo26 { font-size: 1.8055vw; }
.fo28 { font-size: 1.9444vw; }
.fo30 { font-size: 2.0833vw; }
.fo40 { font-size: 2.7777vw; }
.fo42 { font-size: 2.9166vw; }
.fo50 { font-size: 3.4722vw; }
}


/* html
------------------------------------------------- */
html {
	overflow-x: hidden;
}


/* body
------------------------------------------------- */
body {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-weight: 500;
	font-size: 16px;
	line-height: 1.75;
	color: #000;
    letter-spacing: 0.05em;
	-webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
.mincho {
    font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Noto Serif JP", serif;
}
@media only screen and (min-width:751px) and (max-width:1440px){
body {
	font-size: 1.1111vw;
}
}
@media only screen and (max-width:750px){
body {
	font-size: 3.2vw;
}
}


/* wrapper
------------------------------------------------- */
#wrapper {
	width: 100%;
	margin: 0 auto;
	clear: both;
    position: relative;
}


/* header
------------------------------------------------- */
#header {
    width: 100%;
    height: 45.763vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
#header h1,
#header h2,
#header div {
    width: 50%;
    opacity: 0;
}
#header.isAnimate h1 {
    animation: 0.5s fadeInUp 1s forwards;
}
#header.isAnimate .img1 {
    animation: 0.5s fadeZoom 1.5s forwards;
}
#header.isAnimate h2,
#header.isAnimate .img2 {
    animation: 0.5s fadeInUp 2s forwards;
}
@media only screen and (max-width:750px){
#header {
    height: auto;
    display: block;
}
#header h1,
#header h2,
#header div {
    width: 100%;
}
#header .img2 {
    display: none;
}
#header.isAnimate h1 {
    animation: 0.5s fadeInUp 1.5s forwards;
}
#header.isAnimate .img1 {
    animation: 0.5s fadeZoom 1s forwards;
}
}


/* contents
------------------------------------------------- */
#contents {
    display: block;
	width: 100%;
	clear: both;
}
.inner {
	max-width: 1440px;
	margin: 0 auto;
    padding: 0 10.625em;
	clear: both;
	position: relative;
    box-sizing: border-box;
}
@media only screen and (max-width:750px){
.inner {
    width: 92.266%;
    padding: 0;
}
}


/* intro
------------------------------------------------- */
.intro {
	text-align: center;
    position: relative;
    background: url("../img/intro_bg.jpg") center bottom no-repeat;
    background-size: contain;
    padding: 14.5em 0 26.5em;
    margin-bottom: 9.375em;
}
.intro h2 {
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.1em;
    padding-bottom: 1em;
    opacity: 0;
}
.intro h2 span {
    position: relative;
}
.intro h2 span::before {
    content: '';
    width: 0;
    height: 0.4em;
    background-color: #fff156;
    position: absolute;
    left: -1%;
    bottom: -0.1em;
    z-index: -1;
}
.intro p {
    line-height: 2.875;
    opacity: 0;
}
.intro .scroll {
    width: 4.125em;
    position: absolute;
    left: 50%;
    top: 1.625em;
    margin-left: -2.0625em;
}
.intro .photo-left {
    position: absolute;
    right: 50%;
    opacity: 0;
}
.intro .photo-right {
    position: absolute;
    left: 50%;
    opacity: 0;
}
.intro .ph01 {
    width: 15.6875em;
    margin-right: 21.25em;
    top: 4.625em;
}
.intro .ph02 {
    width: 14.5625em;
    margin-right: 30.8125em;
    top: 16em;
}
.intro .ph03 {
    width: 23.4375em;
    margin-right: 26.875em;
    top: 33.25em;
}
.intro .ph04 {
    width: 18.9375em;
    margin-right: 26.875em;
    top: 59.375em;
}
.intro .ph05 {
    width: 18.6875em;
    margin-right: 19.75em;
    top: 67.375em;
}
.intro .ph06 {
    width: 22.8125em;
    margin-left: 23.3125em;
    top: 6.875em;
}
.intro .ph07 {
    width: 15.3125em;
    margin-left: 27.1875em;
    top: 24.875em;
}
.intro .ph08 {
    width: 15.25em;
    margin-left: 33.4375em;
    top: 40.125em;
}
.intro .ph09 {
    width: 14.5em;
    margin-left: 26.375em;
    top: 47.9375em;
}
.intro .ph10 {
    width: 21.4375em;
    margin-left: 20.8125em;
    top: 64.5em;
}
.intro.isAnimate h2 {
    animation: 0.5s fadeInUp 1s forwards;
}
.intro.isAnimate h2 span::before {
    animation: 0.3s width 1.5s forwards;
}
.intro.isAnimate p {
    animation: 0.5s fadeInUp 2s forwards;
}
.intro.isAnimate .ph01 {
    animation: 0.3s fadeInUp 2.5s forwards;
}
.intro.isAnimate .ph02 {
    animation: 0.3s fadeInUp 2.6s forwards;
}
.intro.isAnimate .ph03 {
    animation: 0.3s fadeInUp 2.8s forwards;
}
.intro.isAnimate .ph04 {
    animation: 0.3s fadeInUp 3.1s forwards;
}
.intro.isAnimate .ph05 {
    animation: 0.3s fadeInUp 3.2s forwards;
}
.intro.isAnimate .ph06 {
    animation: 0.3s fadeInUp 2.5s forwards;
}
.intro.isAnimate .ph07 {
    animation: 0.3s fadeInUp 2.7s forwards;
}
.intro.isAnimate .ph08 {
    animation: 0.3s fadeInUp 2.9s forwards;
}
.intro.isAnimate .ph09 {
    animation: 0.3s fadeInUp 3s forwards;
}
.intro.isAnimate .ph10 {
    animation: 0.3s fadeInUp 3.3s forwards;
}
@media only screen and (max-width:750px){
.intro {
    background: url("../img/intro_bg.jpg") right 85% bottom no-repeat;
    background-size: 130% auto;
    padding: 60vw 0 58vw;
    margin-bottom: 1.5vw;
}
.intro h2 {
    font-size: 5.6vw;
    letter-spacing: 0.02em;
}
.intro p {
    line-height: 2.675;
    opacity: 0;
}  
.intro .scroll {
    width: 8.266vw;
    top: 4.5vw;
    margin-left: -4.133vw;
}
.intro .ph01 {
    width: 34.4vw;
    margin-right: 2vw;
    top: 18.66vw;
}
.intro .ph02 {
    width: 32.533vw;
    margin-right: 24vw;
    top: 36.933vw;
}
.intro .ph03,
.intro .ph07,
.intro .ph08,
.intro .ph09 {
    display: none;
}
.intro .ph04 {
    width: 32vw;
    margin-right: 14.133vw;
    top: 178.933vw;
}
.intro .ph05 {
    width: 31.33vw;
    margin-right: 2.133vw;
    top: 192.133vw;
}
.intro .ph06 {
    width: 41.733vw;
    margin-left: 12vw;
    top: 22.66vw;
}
.intro .ph10 {
    width: 36.8vw;
    margin-left: 8.66vw;
    top: 179.466vw;
}
.intro.isAnimate h2 {
    animation: 0.3s fadeInUp 1.7s forwards;
}
.intro.isAnimate h2 span::before {
    animation: 0.3s width 2.2s forwards;
}
.intro.isAnimate p {
    animation: 0.3s fadeInUp 2.7s forwards;
}
.intro.isAnimate .ph01 {
    animation: 0.3s fadeInUp 1s forwards;
}
.intro.isAnimate .ph02 {
    animation: 0.3s fadeInUp 1.1s forwards;
}
.intro.isAnimate .ph04 {
    animation: 0.3s fadeInUp 3.1s forwards;
}
.intro.isAnimate .ph05 {
    animation: 0.3s fadeInUp 3.2s forwards;
}
.intro.isAnimate .ph06 {
    animation: 0.3s fadeInUp 1.2s forwards;
}
.intro.isAnimate .ph10 {
    animation: 0.3s fadeInUp 3.3s forwards;
}
}


/* gse
------------------------------------------------- */
.gse {
    padding-top: 5.875em;
    background: linear-gradient(90deg, #f6f6f6 0%, #f6f6f6 66%, #fff 66%, #fff 100%);
    position: relative;
    margin-bottom: 10.5em;
}
.gse h2 {
    width: 2em;
    position: absolute;
    left: 50%;
    margin-left: 35.8125em;
    top: 0;
}
.gse .icon {
    width: 2.4375em;
    margin: 0 auto 0.5em;
    opacity: 0;
}
.gse h3 {
    text-align: center;
    font-weight: 600;
    margin-bottom: 1.2em;
    opacity: 0;
}
.gse h3 span {
    display: block;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1;
    position: relative;
}
.gse h3 span::before {
    content: '';
    width: 0.7em;
    height: 2px;
    background-color: #000;
    position: absolute;
    left: 50%;
    margin-left: -0.35em;
    bottom: -1em;
}
.gse .txt {
    text-align: center;
    margin-bottom: 6.5em;
    opacity: 0;
}
.gse .inner {
    padding: 0 8.25em 7.5em;
    display: flex;
    justify-content: flex-end;
    z-index: 2;
}
.gse .inner .photo {
    background-color: #b266ae;
    width: 34.125em;
    position: absolute;
    left: 8.25em;
    top: -4.25em;
}
.gse .inner .photo img {
    opacity: 0;
}
.gse .inner .con {
    background-color: #fff;
    box-shadow: 0px 0px 2em -1em rgba(17,17,17,0.6);
    width: 40.625em;
    padding: 4.375em 5em 4em 6.25em;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    opacity: 0;
}
.gse .inner .con h4 {
    width: 10em;
    position: absolute;
    left: -5em;
    top: -2.25em;
    opacity: 0;
}
.gse .inner .con .conin {
     opacity: 0;
}
.gse .inner .con h5 {
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 0.8em;
}
.gse .inner .con h5 span {
    position: relative;
}
.gse .inner .con h5 span::before {
    content: '';
    width: 0;
    height: 0.4em;
    background-color: #fff156;
    position: absolute;
    left: -1%;
    bottom: -0.1em;
    z-index: -1;
}
.gse .inner .con h6 {
    color: #b34dba;
    font-weight: 700;
    margin-top: 1em;
}
.gse .inner .con dl dt {
    display: inline-block;
    background-color: #b34dba;
    color: #fff;
    line-height: 1.45;
    padding: 0 0.5em;
    margin-top: 1em;
    font-weight: 700;
}
.gse .inner .con dl dd {
    line-height: 1.5;
}
.gse .bg1 {
    width: 19.375em;
    position: absolute;
    right: 50%;
    margin-right: 32.5em;
    top: 0;
}
.gse .bg2 {
    width: 58em;
    position: absolute;
    right: -5em;
    bottom: -27em;
}
.gse .p1.isAnimate .icon {
    animation: 0.3s fadeInUp 0.5s forwards;
}
.gse .p1.isAnimate h3 {
    animation: 0.3s fadeInUp 1s forwards;
}
.gse .p1.isAnimate .txt {
    animation: 0.3s fadeInUp 1.5s forwards;
}
.gse .p1.isAnimate .inner .photo img {
    animation: 0.3s fadeIn 2s forwards;
}
.gse .p1.isAnimate .inner .con,
.gse .p1.isAnimate .inner .con h4 {
    animation: 0.3s fadeInUp 2.5s forwards;
}
.gse .p1.isAnimate .inner .con .conin {
    animation: 0.3s fadeInUp 3s forwards;
}
.gse .p1.isAnimate .inner .con h5 span::before {
    animation: 0.3s width 3.5s forwards;
}
.gse .p2.isAnimate .inner .photo img {
    animation: 0.3s fadeIn 0.5s forwards;
}
.gse .p2.isAnimate .inner .con,
.gse .p2.isAnimate .inner .con h4 {
    animation: 0.3s fadeInUp 1s forwards;
}
.gse .p2.isAnimate .inner .con .conin {
    animation: 0.3s fadeInUp 1.5s forwards;
}
.gse .p2.isAnimate .inner .con h5 span::before {
    animation: 0.3s width 2s forwards;
}
@media only screen and (max-width:750px){
.gse {
    padding-top: 12vw;
    background: linear-gradient(90deg, #f6f6f6 0%, #f6f6f6 83.2%, #fff 83.2%, #fff 100%);
    position: relative;
    margin-bottom: 15.33vw;
}
.gse h2 {
    display: none;
}
.gse .icon {
    width: 5.2vw;
    margin: 0 auto 0.5em;
}
.gse h3 {
    font-size: 6.66vw;
    margin-bottom: 1em;
    position: relative;
    z-index: 2;
}
.gse h3 span {
    font-size: 4vw;
}
.gse h3 span::before {
    bottom: -0.9em;
}
.gse .txt {
    font-size: 3.466vw;
    margin-bottom: 54vw;
    position: relative;
    z-index: 2;
}
.gse .inner {
    padding: 0 0 58vw;
    display: block;
}
.gse .inner.last {
    padding: 0 0 18.5vw;
}
.gse .inner .photo {
    width: 73vw;
    left: 50%;
    margin-left: -36.5vw;
    top: -45.6vw;
    z-index: 3;
}
.gse .inner .con {
    width: 100%;
    padding: 6.5vw;
}
.gse .inner .con h4 {
    width: 16.8vw;
    left: 4.666vw;
    top: 6.266vw;
}
.gse .inner .con h5 {
    font-size: 4.133vw;
    margin: 0 0 0.7em 21vw;
}
.gse .inner .con h5.mb {
    margin-bottom: 1.3em;
}
.gse .inner .con h6 {
    margin-top: 0.8em;
}
.gse .inner .con dl dt {
    margin-top: 0.8em;
}
.gse .bg1 {
    width: 40.5vw;
    margin-right: 22vw;
    top: 0;
}
.gse .bg2 {
    width: 77vw;
    right: -3vw;
    bottom: -35.33vw;
}
}



/* teacher
------------------------------------------------- */
.teacher {
    padding: 5.5em 0 5em;
    position: relative;
    z-index: 2;
}
.teacher h2 {
    width: 2em;
    position: absolute;
    right: 50%;
    margin-right: 37.5em;
    top: 0;
}
.teacher .icon {
    width: 2.4375em;
    margin: 0 auto 1.5em;
    opacity: 0;
}
.teacher h3 {
    text-align: center;
    font-weight: 600;
    opacity: 0;
}
.teacher .read {
    text-align: center;
    font-weight: 600;
    margin-bottom: 0.8em;
    opacity: 0;
}
.teacher .read2 {
    text-align: center;
    font-weight: 600;
    opacity: 0;
    background-color: #fff156;
    line-height: 1.5;
    padding: 0.2em 0 0;
    margin: 0 auto 5.5em;
}
.teacher .inner {
    z-index: 2;
}
.teacher .box {
    width: 100%;
    height: 25em;
    background-color: #b266ae;
    position: relative;
    opacity: 0;
}
.teacher .box::before {
    content: '';
    width: 2.25em;
    height: 2.25em;
    background-color: #fff156;
    position: absolute;
    left: -0.625em;
    top: -0.625em;
}
.teacher .prof {
    width: 35em;
    position: absolute;
    left: 50%;
    margin-left: -7.5em;
    top: -3.5em;
    color: #fff;
    opacity: 0;
}
.teacher .prof .ttl {
    width: 12.625em;
}
.teacher .prof dl {
    width: 100%;
    display: table;
    background-color: #000;
    color: #fff;
    padding: 1em 3em;
    box-sizing: border-box;
    line-height: 1.2;
}
.teacher .prof dl dt {
    display: table-cell;
    width: 5.75em;
    border-right: 1px solid #fff;
    font-weight: 700;
}
.teacher .prof dl dd {
    display: table-cell;
    padding-left: 1.5em;
}
.teacher .prof .name {
    padding: 2em 1em;
}
.teacher .prof .name h4 span {
    display: block;
    padding-bottom: 0.5em;
}
.teacher .prof .name1 h4 img {
    width: 30.4375em;
}
.teacher .prof .name2 h4 img {
    width: 21.0625em;
}
.teacher .prof .name3 h4 img {
    width: 26.4375em;
}
.teacher .prof .name4 h4 img {
    width: 27.5em;
}
.teacher .photo {
    width: 25.25em;
    position: absolute;
    right: 50%;
    margin-right: 7.5em;
    top: -6.25em;
    opacity: 0;
}
.teacher .sec {
    width: 60em;
    margin: -10em auto 0;
    background-color: #fff;
    box-shadow: 0px 0px 2em -1em rgba(17,17,17,0.6);
    padding: 2.5em 3.5em;
    box-sizing: border-box;
    margin-bottom: 9em;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 3;
    opacity: 0;
}
.teacher .sec.sec2 {
    margin: -8.8em auto 9em; 
}
.teacher .sec .con {
    width: 25em;
}
.teacher .sec .con h5 {
    padding-bottom: 0.5em;
}
.teacher .sec .con .movie {
    width: 100%;
    height: 0;
    padding-top: 64.16%;
    position: relative;
    margin-bottom: 1em;
}
.teacher .sec .con .movie iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.teacher .sec .con img {
    margin-bottom: 1em;
}
.teacher .sec .con h6 {
    color: #b34dba;
    font-weight: 700;
}
.teacher .note {
    position: absolute;
    right: 17em;
    bottom: -4em;
}
.teacher .bg1 {
    width: 14.5em;
    position: absolute;
    left: 50%;
    margin-left: 30em;
    top: 29em;
}

.teacher .p1.isAnimate .icon {
    animation: 0.3s fadeInUp 0.5s forwards;
}
.teacher .p1.isAnimate .icon {
    animation: 0.3s fadeInUp 1s forwards;
}
.teacher .p1.isAnimate h3 {
    animation: 0.3s fadeInUp 1.5s forwards;
}
.teacher .p1.isAnimate .read,
.teacher .p1.isAnimate .read2 {
    animation: 0.3s fadeInUp 2s forwards;
}
.teacher .p1.isAnimate .box {
    animation: 0.3s fadeInUp 2.5s forwards;
}
.teacher .p1.isAnimate .prof {
    animation: 0.3s fadeInUp 3s forwards;
}
.teacher .p1.isAnimate .photo,
.teacher .p1.isAnimate .sec {
    animation: 0.3s fadeInUp 3.5s forwards;
}
.teacher .p2.isAnimate .box {
    animation: 0.3s fadeInUp 0.5s forwards;
}
.teacher .p2.isAnimate .prof {
    animation: 0.3s fadeInUp 1s forwards;
}
.teacher .p2.isAnimate .photo,
.teacher .p2.isAnimate .sec {
    animation: 0.3s fadeInUp 1.5s forwards;
}
@media only screen and (max-width:750px){
.teacher {
    padding: 0 0 5vw;
}
.teacher h2 {
    display: none;
}
.teacher .icon {
    width: 5.2vw;
    margin: 0 auto 1em;
}
.teacher h3 {
    font-size: 3.466vw;
    margin-bottom: 0.3em;
}
.teacher .read {
    font-size: 6.66vw;
    line-height: 1.2;
    margin-bottom: 1em;
}
.teacher .read2 {
    font-size: 3.466vw;
    line-height: 1.5;
    margin-bottom: 4em;
}
.teacher .read span {
    font-size: 5.33vw;
}
.teacher .inner {
    width: 100%;
}
.teacher .box {
    height: 75vw;
}
.teacher .box::before {
    width: 4.5vw;
    height: 4.5vw;
    left: 0;
    top: -1.5vw;
}
.teacher .prof {
    width: 50vw;
    position: absolute;
    left: 50%;
    margin-left: 0;
    top: -8.5vw;
}
.teacher .prof .ttl {
    width: 30.5vw;
}
.teacher .prof dl {
    font-size: 2.4vw;
    padding: 0.8em 0 0.8em 2.5vw;
}
.teacher .prof dl dt {
    width: 13.5vw;
    vertical-align: middle;
}
.teacher .prof dl dd {
    padding-left: 2vw;
    vertical-align: middle;
}
.teacher .prof .name {
    padding: 3vw 0;
    font-weight: 700;
}
.teacher .prof .name h4 span {
    font-size: 2.8vw;
    letter-spacing: -0.05em;
    padding: 0.5em 0 0.8em;
}
.teacher .prof .name1 h4 img {
    width: 39.866vw;
}
.teacher .prof .name2 h4 img {
    width: 45.33vw;
}
.teacher .prof .name3 h4 img {
    width: 41.333vw;
}
.teacher .prof .name4 h4 img {
    width: 45.6vw;
}
.teacher .prof .name p {
    font-size: 2.933vw;
    line-height: 1.65;
    padding-right: 2em;
    letter-spacing: normal;
}
.teacher .photo {
    width: 50vw;
    right: 50%;
    margin-right: 0;
    top: -6vw;
}
.teacher .sec {
    width: 92.4%;
    margin: -26.5vw auto 20vw;
    padding: 5.2vw 5.2vw 4.5vw;
    display: block;
}
.teacher .sec.sec2 {
    margin: -21.5vw auto 20vw;
}
.teacher .sec.up {
    margin: -32.2vw auto 20vw;
}
.teacher .sec .con {
    width: 100%;
    line-height: 1.65;
}
.teacher .sec .con:first-of-type {
    margin-bottom: 6vw;
}
.teacher .sec .con h5 {
    font-size: 3.466vw;
}
.teacher .note {
    font-size: 2.4vw;
    line-height: 1.55;
    width: 92%;
    right: auto;
    left: 4vw;
    bottom: -15vw;
}
.teacher .bg1 {
    display: none;
}
}


/* pickup
------------------------------------------------- */
.pickup {
    margin-bottom: 8.75em;
}
.pickup .box {
    background: url("../img/pickup_bg.jpg") center center no-repeat;
    background-size: cover;
    position: relative;
    padding: 6em 6.875em 4.6875em;
    box-sizing: border-box;
    opacity: 0;
}
.pickup .box h3 {
    width: 6.625em;
    position: absolute;
    left: 50%;
    margin-left: -3.3125em;
    top: -2.75em;
    opacity: 0;
}
.pickup .box h4 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 1em;
    opacity: 0;
}
.pickup .box h4 span {
    display: inline-block;
    background-color: #fff;
    color: #b266ae;
    font-weight: 700;
    padding: 0 1em;
}
.pickup .sec {
    display: flex;
    justify-content: space-between;
    opacity: 0;
}
.pickup .sec .photo {
    width: 21.4375em;
}
.pickup .sec .con {
    width: 31em;
    line-height: 1.85;
}
.pickup.isAnimate .box,
.pickup.isAnimate .box h3 {
    animation: 0.3s fadeInUp 0.5s forwards;
}
.pickup.isAnimate .box h4,
.pickup.isAnimate .sec {
    animation: 0.3s fadeInUp 1s forwards;
}
@media only screen and (max-width:750px){
.pickup {
    margin-bottom: 13.5vw;
}
.pickup .inner {
    width: 100%;
}
.pickup .box {
    background: url("../img/pickup_bg_sp.jpg") center center no-repeat;
    background-size: cover;
    padding: 9vw 0 10.5vw;
}
.pickup .box h3 {
    width: 14.4vw;
    margin-left: -7.2;
    top: -8vw;
}
.pickup .box h4 {
    font-size: 5.33vw;
    margin-bottom: 1em;
}
.pickup .box h4 span {
    font-size: 3.33vw;
    padding: 0 1em;
}
.pickup .sec {
    display: block;
}
.pickup .sec .photo {
    width: 58.5vw;
    margin: 0 auto 6vw;
}
.pickup .sec .con {
    width: 92vw;
    margin: 0 auto;
    line-height: 1.65;
}
}


/* interview1
------------------------------------------------- */
.interview1 {
    padding: 3.75em 0 7em;
    position: relative;
}
.interview1 h2 {
    width: 2em;
    position: absolute;
    left: 50%;
    margin-left: 35.8125em;
    top: 0;
}
.interview1 .icon {
    width: 2.4375em;
    margin: 0 auto 1.5em;
    opacity: 0;
}
.interview1 h3 {
    text-align: center;
    font-weight: 600;
    opacity: 0;
}
.interview1 .read {
    text-align: center;
    font-weight: 600;
    margin-bottom: 4.5em;
    opacity: 0;
}
.interview1 .box {
    background-color: #fff;
    box-shadow: 0px 0px 2em -1em rgba(17,17,17,0.6);
    padding: 8em 0 6em;
    position: relative;
    z-index: 3;
}
.interview1 .box .tab {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    left: 0;
    top: -17em;
    opacity: 0;
}
.interview1 .box .tab li {
    width: 14.75em;
    margin: 0 0.4em;
    cursor: pointer;
    background: linear-gradient(#fff 0%, #fff 28.5%, #b266ae 28.5%, #b266ae 100%);
    padding: 0 1.2em 1em;
    box-sizing: border-box;
    position: relative;
}
.interview1 .box .tab li.active {
    background: linear-gradient(#fff 0%, #fff 28.5%, #000 28.5%, #000 100%);
}
.interview1 .box .tab li.active::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.2em 1.2em 0 1.2em;
    border-color: #000 transparent transparent transparent;
    position: absolute;
    left: 50%;
    bottom: -0.8em;
    margin-left: -1.2em;
}
.interview1 .box .tab li .img {
    width: 10.8em;
    margin: 0 auto 1em;
}
.interview1 .box .tab li p {
    line-height: 1.35;
    font-weight: 700;
    color: #fff;
}
.interview1 .box .tabout {
    opacity: 0;
}
.interview1 .box .tabcont {
    display: none;
}
.interview1 .box .tabcont.show {
    display: block;
}
.interview1 .box .tabcont .sec {
    width: 60em;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.interview1 .box .tabcont .sec .photo {
    width: 16.5625em;
}
.interview1 .box .tabcont .sec .con {
    width: 40.5em;
    margin-top: 2.25em;
}
.interview1 .box .tabcont .sec .con .name {
    font-weight: 700;
    margin-bottom: 2.5em;
}
.interview1 .box .tabcont .sec .con .name span {
    display: block;
    position: relative;
}
.interview1 .box .tabcont .sec .con .name span::before {
    content: '';
    width: 1.2em;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0;
    bottom: -2.5em;
}
.interview1 .box .tabcont .sec .con h4 {
    font-weight: 700;
    color: #b266ae;
    margin-bottom: 0.2em;
    line-height: 1.6;
}
.interview1 .box .tabcont .sec .con .txt {
    line-height: 2;
}
.interview1 .bg1 {
    width: 14.4375em;
    position: absolute;
    right: 50%;
    margin-right: 32.5em;
    top: 2em;
    z-index: 100;
}
.interview1.isAnimate .icon,
.interview1.isAnimate h3,
.interview1.isAnimate .read {
    animation: 0.3s fadeInUp 0.5s forwards;
}
.interview1.isAnimate .box .tab {
    animation: 0.3s fadeInUp 1s forwards;
}
.interview1.isAnimate .box .tabout {
    animation: 0.3s fadeInUp 1.5s forwards;
}
@media only screen and (min-width:751px){
.interview1 .box .tab li:hover {
    background: linear-gradient(#fff 0%, #fff 28.5%, #000 28.5%, #000 100%);
}
}
.interview1.isAnimate .box .tabout .note {
  text-align: right;
  width: 70em;
  margin: 1.5em auto 0;
}
@media only screen and (max-width:750px){
.interview1.isAnimate .box .tabout .note {
  text-align: left;
  width: 92%;
  margin: 1.5em auto 0;
  font-size: 2.4vw;
}  
}
@media only screen and (max-width:750px){
.interview1 {
    padding: 0;
}
.interview1 h2 {
    display: none;
}
.interview1 .icon {
    width: 5.2vw;
    margin: 0 auto 1em;
}
.interview1 h3 {
    font-size: 3.466vw;
    margin-bottom: 0.3em;
}
.interview1 .read {
    font-size: 6.66vw;
    line-height: 1.2;
    margin-bottom: 1.3em;
    position: relative;
    z-index: 2;
}
.interview1 .read span {
    font-size: 5.33vw;
}
.interview1 .box {
    background-color: rgba(255,255,255,0);
    box-shadow: 0px 0.5em 1em -1em rgba(17,17,17,0.6);
    padding: 0 0 10vw;
}
.interview1 .box .tab {
    display: block;
    position: static;
}
.interview1 .box .tab li {
    width: 100%;
    margin: 0 0 1.5vw;
    background: #b266ae;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.interview1 .box .tab li.active {
    background: #000;
}
.interview1 .box .tab li.active::before {
    display: none;
    border-width: 0;
}
.interview1 .box .tab li .img {
    width: 27.7vw;
    margin: 0;
}
.interview1 .box .tab li p {
    width: 62vw;
    font-size: 4vw;
    line-height: 1.2;
}
.interview1 .box .tabcont .sec {
    width: 100%;
    display: block;
    position: relative;
    margin-top: 4vw;
}
.interview1 .box .tabcont .sec .photo {
    width: 35.6vw;
    position: absolute;
    left: 0;
    top: 0;
}
.interview1 .box .tabcont .sec .con {
    width: 83vw;
    margin: 0 auto;
}
.interview1 .box .tabcont .sec .con .name {
    margin: 0;
    padding: 13.5vw 0 0 36vw;
}
.interview1 .box .tabcont .sec .con .name span {
    font-size: 4.266vw;
    line-height: 1.25;
    padding-bottom: 0.5em;
}
.interview1 .box .tabcont .sec .con .name span::before {
    content: '';
    width: 0.7em;
    bottom: -3.9em;
}
.interview1 .box .tabcont .sec .con h4 {
    font-size: 4.266vw;
    padding-top: 15.5vw;
    margin-bottom: 0.5em;
    line-height: 1.3;
}
.interview1 .box .tabcont .sec .con .txt {
    line-height: 1.65;
}
.interview1 .bg1 {
    width: 30vw;
    margin-right: 24vw;
    top: -5vw;
    z-index: 0;
}
}


/* interview2
------------------------------------------------- */
.interview2 {
    padding-bottom: 2.6875em;
    background: url("../img/interview_bg3.png") center bottom no-repeat;
    background-size: 100% auto;
    position: relative;
}
.interview2::before {
    content: '';
    width: 66%;
    height: 100%;
    background-color: #f4f4f4;
    position: absolute;
    right: 0;
    top: 9.8em;
    z-index: -1;
}
.interview2 .icon {
    width: 2.4375em;
    margin: 0 auto 1.5em;
    opacity: 0;
}
.interview2 h3 {
    text-align: center;
    font-weight: 600;
    opacity: 0;
}
.interview2 .read {
    text-align: center;
    font-weight: 600;
    margin: 0.3em 0 1.7em;
    line-height: 1.2;
    opacity: 0;
}
.interview2 .p1,
.interview2 .p2 {
    opacity: 0;
}
.interview2 .sec {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0px 0px 2em -1em rgba(17,17,17,0.6);
    padding: 3.125em 5em 4.5em 4.275em;
    margin-bottom: 5em;
    position: relative;
    box-sizing: border-box;
}
.interview2 .sec::before {
    content: '';
    width: 50vw;
    height: 20em;
    background-color: #b266ae;
    position: absolute;
    right: 50%;
    margin-right: 20em;
    top: -3.5em;
    z-index: -1;
}
.interview2 .sec .photo {
    width: 16.5625em;
}
.interview2 .sec .con {
    width: 40.5em;
    margin-top: 2.25em;
}
.interview2 .sec .con .name {
    font-weight: 700;
    margin-bottom: 2.5em;
}
.interview2 .sec .con .name span {
    display: block;
    position: relative;
}
.interview2 .sec .con .name span::before {
    content: '';
    width: 1.2em;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0;
    bottom: -2.5em;
}
.interview2 .sec .con .note {
  text-align: right;
  margin: 1.5em auto 0;
}
@media only screen and (max-width:750px){
.interview2 .sec .con .note {
  text-align: left;
  margin: 1.5em auto 0;
  font-size: 2.4vw;
}  
}
.interview2 .sec .con h4 {
    font-weight: 700;
    color: #b266ae;
    margin-bottom: 0.2em;
    line-height: 1.6;
}
.interview2 .sec .con .txt {
    line-height: 2;
}
.interview2 .sec .con .toeic {
    display: inline-block;
    background-color: #000;
    color: #fff;
    font-weight: 700;
    padding: 0 0.5em;
    line-height: 1.75;
    margin-top: 0.5em;
}
.interview2 .sec.rev {
    flex-direction: row-reverse;
}
.interview2 .sec.rev::before {
    right: auto;
    left: 50%;
    margin: 0 0 0 20em;
    top: auto;
    bottom: -3.75em;
}
.interview2 .sec .note {
  position: absolute;
  right: 6em;
  bottom: 1.5em;
  text-align: right;
}
.interview2 h5 {
    text-align: center;
    font-weight: 600;
    padding: 2.5em 0 1.5em;
    opacity: 0;
}
.interview2 .btn {
    text-align: center;
    font-weight: 600;
    padding: 2.5em 0 1.5em;
    opacity: 0;
}
.interview2 .bg1 {
    width: 51.5625em;
    position: absolute;
    left: 50%;
    margin-left: 14em;
    top: -5em;
}
.interview2.isAnimate .icon,
.interview2.isAnimate h3,
.interview2.isAnimate .read {
    animation: 0.3s fadeInUp 0.5s forwards;
}
.interview2.isAnimate .p1 {
    animation: 0.5s fadeInLeft 1s forwards;
}
.interview2.isAnimate .p2 {
    animation: 0.5s fadeInRight 1.5s forwards;
}
.interview2.isAnimate h5,
.interview2.isAnimate .btn {
    animation: 0.3s fadeInUp 2s forwards;
}
@media only screen and (max-width:750px){
.interview2 {
    padding: 16vw 0 28vw;
    background: url("../img/interview_bg3_sp.png") center bottom no-repeat;
    background-size: 100% auto;
}
.interview2::before {
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}
.interview2 .icon {
    width: 5.2vw;
    margin: 0 auto 1em;
}
.interview2 h3 {
    font-size: 3.466vw;
    margin-bottom: 0.3em;
}
.interview2 .read {
    font-size: 6.66vw;
    line-height: 1.2;
    margin-bottom: 1em;
}
.interview2 .read span {
    font-size: 5.33vw;
}
.interview2 .sec {
    width: 100%;
    display: block;
    padding: 9.5vw 6.5vw;
    margin-bottom: 10vw;
}
.interview2 .sec::before {
    height: 28.5vw;
    margin-right: 32vw;
    top: -9.5vw;
}
.interview2 .sec .photo {
    width: 100%;
}
.interview2 .sec .con {
    width: 80vw;
    margin: 4.5vw auto 0;
}
.interview2 .sec .con .name {
    font-weight: 700;
    margin-bottom: 2.5em;
}
.interview2 .sec .con .name span {
    font-size: 4.8vw;
    letter-spacing: -0.05em;
    line-height: 1.3;
    margin-bottom: 0.3em;
}
.interview2 .sec .con .name span::before {
    width: 0.7em;
    bottom: -2.2em;
}
.interview2 .sec .con h4 {
    font-size: 4.266vw;
    margin-bottom: 0.4em;
    line-height: 1.3;
}
.interview2 .sec .con .txt {
    line-height: 1.65;
}
.interview2 .sec.rev::before {
    right: auto;
    left: 50%;
    margin: 0 0 0 13.6vw;
    top: auto;
    bottom: -11.5vw;
}
.interview2 .sec .note {
  text-align: left;
  margin: 2em auto 0;
  font-size: 2.4vw;
  position: static;
}
.interview2 h5 {
    font-size: 4.8vw;
    line-height: 1.35;
    padding: 1.5em 0;
}
.interview2 .bg1 {
    width: 72vw;
    left: 50%;
    margin-left: -2vw;
    top: 2vw;
}
}
@media only screen and (max-width:750px){
    .btn + .note {
        text-align: left;
        font-size: 2.4vw;
    }
}

/* footer
------------------------------------------------- */
#footer {
    background-color: #000;
    color: #fff;
    text-align: center;
}
#footer .inner {
    height: 23.4375em;
    background: url("../img/footer_bg.png") 10.625em center no-repeat;
    background-size: auto 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#footer p a {
    display: block;
    width: 31.7em;
    line-height: 4.8;
    color: #fff;
    font-weight: 700;
    border: 1px solid #d4d4d4;
    background: url("../img/footer_icon.png") 92% center no-repeat rgba(178,102,174,0.6);
    background-size: 0.45em auto;
    padding-right: 1.5em;
    box-sizing: border-box;
}
@media only screen and (max-width:750px){
#footer .inner {
    width: 100%;
    height: 50vw;
    background: url("../img/footer_bg.png") left center no-repeat;
    background-size: auto 100%;
}
#footer p a {
    font-size: 3.466vw;
    width: 84.5vw;
    line-height: 1.6;
    background: url("../img/footer_icon.png") 94% center no-repeat rgba(178,102,174,0.6);
    background-size: 0.35em auto;
    padding: 0.8em 1.5em 0.8em 0;
}
}


/* animation
------------------------------------------------- */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeZoom {
    0% {
        opacity: 0;
        transform: scale3d(1.05,1.05,1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1,1,1);
    }
}
@keyframes width {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}