@charset "utf-8";
html {
font-size: 62.5%;
line-height: 1.8;
}
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] select, html[lang="ja"] textarea {
font-family: YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:500;
}
body{
color:#000;
font-size: 1.4rem;
background:#fff;
-webkit-text-size-adjust: 100%;
}
.barlow{
font-family: 'Barlow Condensed', YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:700;
}
.barlow-ital{
font-family: 'Barlow Condensed', YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:700;
font-style: italic;
}
.barlow-ital.thin{
font-weight:400;
}
/*btn*/
.btn a{
width: 100%;
max-width: 650px;
height: 120px;
line-height: 120px;
}
@media only screen and (max-width:767px){
.btn a{
height: 80px;
line-height:100px;
width: 90%;
}
}
.btn a .bg{
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.btn a .bgIn{
top: 0;
left: 100%;
width: 100%;
height: 100%;
background: linear-gradient(-90deg,rgba(0,0,255,0.9) 0%, rgba(255,0,140,0.9) 100%);
transition: left 0.9s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn a:hover .bgIn{
left: 0;
}
.btn a .arrow{
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
top: 50%;
right: 40px;
transform: translate(0,-50%) rotate(45deg);
}
@media only screen and (max-width:767px){
.btn a .arrow{
right: 20px;
}
}
.btn a .img{
width: 135px;
bottom: 0;
left: 25px;
}
@media only screen and (max-width:767px){
.btn a .img{
width: 90px;
left: -25px;
}
}
.btn a .txt{
padding-left: 80px;
}
.btn.noimage a .txt{
padding-left: 0;
}
@media only screen and (max-width:767px){
.btn a .txt{
position: relative;
padding: 0 25px ;
margin-left: 20px;
}
.btn.noimage a .txt{
padding-left: 0;
padding:0;
margin-left: 0;
}
.btn a .txt .spSmall{
position: absolute;
top: 0%;
left: 50%;
line-height: 1;
transform: translate(-50%,-80%);
font-size: 1.5rem;
width: 100%;
white-space: nowrap;
}
}
/*slashTxt*/
.slashTxt{
position: relative;
padding: 0 40px;
display: inline-block;
}
@media only screen and (max-width:767px){
.slashTxt{
position: relative;
padding: 0 30px;
}
.point04 .slashTxt{
padding: 0 15px;
}
}
.slashTxt:before{
content: "";
position: absolute;
bottom:0.3em;
left: 0;
width: 1px;
height: 1.5em;
background: #000;
transform: rotate(-25deg);
}
.slashTxt.mini:before{
height: 0.9em;
}
.slashTxt:after{
content: "";
position: absolute;
bottom:0.3em;
right: 0;
width: 1px;
height: 1.5em;
background: #000;
transform: rotate(25deg);
}
.slashTxt.mini:after{
height: 0.9em;
}
/*topArea*/
.topArea{
width: 100%;
height: 100vh;
min-height: 700px;
}
@media only screen and (max-width:980px){
.topArea{
min-height: inherit;
}
}
.topArea .txtSlide{
top: 50%;
left: 0;
width: 100%;
transform: translate(0,-50%);
}
.topArea .txtSlide .bg{
width: 100%;
height: 240px;
}
.topArea .txtSlide .bg01{
background: url("../images/bg-txt_01.svg") top left repeat;
background-size: auto 240px;
animation: txtSlide01 100s linear infinite;
}
@keyframes txtSlide01 {
0% {background-position: 0 0;}
100% {background-position:-1387px 0;}
}
.topArea .txtSlide .bg02{
background: url("../images/bg-txt_02.svg") top left repeat;
background-size: auto 240px;
animation: txtSlide02 58s linear infinite;
}
@keyframes txtSlide02 {
0% {background-position: 0 0;}
100% {background-position:810px 0;}
}
.topArea .txtSlide .bg03{
background: url("../images/bg-txt_03.svg") top left repeat;
background-size: auto 240px;
animation: txtSlide03 81s linear infinite;
}
@keyframes txtSlide03 {
0% {background-position: 0 0;}
100% {background-position:-1126px 0;}
}
.topArea .imgSlide{
top: 0;
right: 0;
width: 50%;
height: 100%;
}
@media only screen and (max-width:1170px){
.topArea .imgSlide{
width: 46%;
}
}
@media only screen and (max-width:980px){
.topArea .imgSlide{
width: 100%;
}
}
.topArea .imgSlide .bg{
width: 50%;
height: 100%;
}
.topArea .imgSlide .bg01{
background: url("../images/bg-img_01.jpg?250411") top left repeat;
background-size: 100% auto;
animation: imgSlide01 50s linear infinite;
}
.topArea .imgSlide .bg02{
background: url("../images/bg-img_02.jpg") top left repeat;
background-size: 100% auto;
animation: imgSlide02 50s linear infinite;
}
@media only screen and (max-width:1170px){
.topArea .imgSlide .bg01{
animation: imgSlide01-pcs 50s linear infinite;
}
.topArea .imgSlide .bg02{
animation: imgSlide02-pcs 50s linear infinite;
}
}
@media only screen and (max-width:980px){
.topArea .imgSlide .bg01{
animation: imgSlide01-s 50s linear infinite;
}
.topArea .imgSlide .bg02{
animation: imgSlide02-s 50s linear infinite;
}
}
@keyframes imgSlide01 {
0% {background-position: 0 0;}
100% {background-position:0 -186.769230769vw;}
}
@keyframes imgSlide02 {
0% {background-position: 0 0;}
100% {background-position:0 186.769230769vw;}
}
@keyframes imgSlide01-pcs {
0% {background-position: 0 0;}
100% {background-position:0 -171.846153846vw;}
}
@keyframes imgSlide02-pcs {
0% {background-position: 0 0;}
100% {background-position:0 171.846153846vw;}
}
@keyframes imgSlide01-s {
0% {background-position: 0 0;}
100% {background-position:0 -373.846153846vw;}
}
@keyframes imgSlide02-s {
0% {background-position: 0 0;}
100% {background-position:0 373.846153846vw;}
}
.topArea .txtBox{
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.topArea .txtBox .areaInner{
height: 100%;
max-width: 1100px;
}
@media only screen and (max-width:980px){
.topArea .txtBox .areaInner{
width: 100%;
}
}
.topArea .txtBoxIn{
top: 50%;
left: 0;
width: 100%;
transform: translate(0,-50%);
}
@media only screen and (max-width:980px){
.topArea .txtBoxIn{
width: 83%;
padding:30px 0 30px 5%;
background: #fff;
}
}
.topArea .txtBoxIn .logo{
width: 300px;
}
@media only screen and (max-width:767px){
.topArea .txtBoxIn .logo{
width: 180px;
margin-bottom: 20px;
}
}
.topArea .txtBoxIn .mainTtl{
font-size: 5.3rem;
padding-left: 1%;
}
@media only screen and (max-width:767px){
.topArea .txtBoxIn .mainTtl{
font-size: 2.9rem;
line-height: 1.3;
margin-bottom: 0;
}
}
.topArea .authority{
max-width: 520px;
width: 90%;
}
@media only screen and (max-width:767px){
.topArea .authority{
width: 95%;
bottom: 0;
left: 2.5%;
transform: translate(0,80%);
z-index: 10;
}
}
/*aboutArea*/
.aboutArea{
padding: 120px 0 80px;
}
@media only screen and (max-width:767px){
.aboutArea{
padding: calc(24vw + 30px) 0 0;
}
}
@media only screen and (max-width:767px){
.aboutArea .oc{
margin-bottom: 140px;
}
}
.aboutArea .oc:before{
content: "";
position: absolute;
top: 0;
height: 100%;
background: #fff;
width: 87%;
}
@media only screen and (max-width:980px){
.aboutArea .oc:before{
width: 81%;
}
}
@media only screen and (max-width:767px){
.aboutArea .oc:before{
top:50px;
width: 95%;
}
}
.aboutArea .ocIn{
max-width: 1300px;
padding: 80px 0;
}
@media only screen and (max-width:767px){
.aboutArea .ocIn{
padding: 0 0 40px;
}
}
.aboutArea .ocIn .img01{
top: 250px;
right: 35.846%;
width: 25.769%;
}
@media only screen and (max-width:980px){
.aboutArea .ocIn .img01{
width: 100%;
margin-top: -35vw;
}
}
@media only screen and (max-width:767px){
.aboutArea .ocIn .img01{
margin-top: -43vw;
width: 95vw;
max-width: 95vw;
}
}
.aboutArea .ocIn .img02{
top: 70px;
right: 0;
width: 33.846%;
}
.aboutArea .ocIn .img03{
top: 525px;
right: 7.308%;
width: 26.538%;
}
@media only screen and (max-width:1300px){
.aboutArea .ocIn .img03{
top: calc(100px + 32.625vw);
}
}
.aboutArea .ocIn .ocTxt{
font-size: 15.6rem;
line-height: 0.9em;
z-index: 10;
}
@media only screen and (max-width:767px){
.aboutArea .ocIn .ocTxt{
font-size: 10rem;
}
}
@media only screen and (max-width:767px){
.aboutArea .ocIn .ttl{
font-size: 2.1rem;
}
.aboutArea .ocIn .note{
font-size: 1.6rem;
}
}
@media only screen and (max-width:767px){
.aboutArea .dream{
margin-bottom: 70px;
}
}
.aboutArea .dream .bg{
width: 103%;
margin-left: -1.5%;
min-height: 455px;
}
@media only screen and (max-width:767px){
.aboutArea .dream .bg{
min-height: 288px;
}
}
.aboutArea .dream .bg .dreamTxt image{
width: 100%;
height:auto;
}
@media only screen and (max-width:980px){
.aboutArea .dream .dreamTxt{
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
}
.aboutArea .dream .bg .mask-path {
stroke-dasharray: 9000;
fill:none;
stroke: transparent;
stroke-width:14;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}
.aboutArea .dream .bg.animation .mask-path {
animation: drawIn2 2.4s ease both 1s;
stroke:#FFFFFF;
}
@keyframes drawIn2 {
0% {
stroke: transparent;
stroke-dashoffset: 9000;
}
10% {
stroke:#FFFFFF;
}
}
.aboutArea .dream .dreamjp{
top: 0;
left: 50%;
transform: translate(-50%,0);
width: 110px;
}
@media only screen and (max-width:767px){
.aboutArea .dream .dreamjp{
width: 68px;
}
}
.aboutArea .bgImg{
bottom: 0;
left: 50%;
transform: translate(-50%,0);
width: 107%;
max-width: 1388px;
}
@media only screen and (max-width:767px){
.aboutArea .bgImg{
width: 100%;
}
}
@media only screen and (max-width:767px){
.aboutArea .aboutBottom .note{
font-size: 1.6rem;
}
}
/*imgSlideArea*/
@media only screen and (max-width:767px){
.imgSlideArea .ttl{
font-size: 2.3rem;
line-height: 1.6;
}
}
.imgSlideArea .slide{
width: 100%;
height: 290px;
}
@media only screen and (max-width:767px){
.imgSlideArea .slide{
height: 200px;
}
}
.imgSlideArea .slide01{
background: url("../images/bg-slide01.jpg") repeat left top;
background-size:  auto 290px;
animation: imgSlide2-1 50s linear infinite;
}
@media only screen and (max-width:767px){
.imgSlideArea .slide01{
background-size:  auto 200px;
animation: imgSlide2-1s 50s linear infinite;
}
}
.imgSlideArea .slide02{
background: url("../images/bg-slide02.jpg") repeat left top;
background-size:  auto 290px;
animation: imgSlide2-2 50s linear infinite;
}
@media only screen and (max-width:767px){
.imgSlideArea .slide02{
background-size:  auto 200px;
animation: imgSlide2-2s 50s linear infinite;
}
}
@keyframes imgSlide2-1 {
0% {background-position: 0 0;}
100% {background-position:2250px 0;}
}
@keyframes imgSlide2-2 {
0% {background-position: 0 0;}
100% {background-position:-2250px 0;}
}
@keyframes imgSlide2-1s {
0% {background-position: 0 0;}
100% {background-position:1552px 0;}
}
@keyframes imgSlide2-2s {
0% {background-position: 0 0;}
100% {background-position:-1552px 0;}
}
/*pageNavi*/
.pageNavi li a{
display: inline-block;
height: 45px;
line-height: 45px;
padding: 0 13px 0 20px;
background: #f6f6f6;
margin: 0 8px 8px 0;
}
@media only screen and (max-width:767px){
.pageNavi li a{
height: 40px;
line-height: 40px;
padding: 0 13px 0 20px;
font-size: 1.2rem;
}
}
.pcContent .pageNavi li a:hover{
background: #0000ff;
color: #fff;
}
.pageNavi li a .icon-arrow-cl{
top: 6px;
line-height: 1;
margin-left: 8px;
display: inline-block;
transform: rotate(90deg);
transition: all 0.3s ease;
}
@media only screen and (max-width:767px){
.pageNavi li a .icon-arrow-cl{
margin-left: 6px;
font-size: 1.5rem;
}
}
.pcContent .pageNavi li a:hover .icon-arrow-cl{
color: #fff
}
/*pointBlock*/
.pointBlock{
padding: 120px 0 60px;
}
@media only screen and (max-width:980px){
.pointBlock{
width: 100%;
}
}
@media only screen and (max-width:767px){
.pointBlock{
padding: 90px 0 50px;
}
}
.pointBlock .num{
width: 150px;
top: 0;
left: 50%;
transform: translate(-50%,-60%);
}
@media only screen and (max-width:767px){
.pointBlock .num{
width: 120px;
}
}
.pointBlock .pointBlockIn{
max-width: 800px;
}
.pointArea .bgBox{
padding: 50px 5%;
}
@media only screen and (max-width:767px){
.pointArea .bgBox{
padding: 40px 5%;
}
}
.pointArea .bgBox .autoBlock{
max-width: 800px;
}
.pointArea .pointBlock .bgBox .autoBlock{
max-width: 700px;
}
.point01 .treatment{
width: 53px;
}
.point01 .graphOuter .imgBox{
width: 40%;
margin-right: 10%;
}
.point01 .graphOuter .txtBox{
width: 50%;
}
@media only screen and (max-width:980px){
.point01 .graphOuter .imgBox{
width: 80%;
margin:0 10% 50px;
}
.point01 .graphOuter .txtBox{
width: 100%;
}
}
@media only screen and (max-width:980px){
.point01 .graphOuter .imgBox{
width: 100%;
margin:0 0 40px;
}
}
@media only screen and (max-width:767px){
.point01 .graph{
width: 100%;
margin: 30px auto 40px;
}
}
.point01 .graphIn .parts{
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translate(0,50px);
transition: all 0.3s ease;
}
.point01 .graphIn.animation .parts{
opacity: 1;
transform: translate(0,0);
}
.point01 .graphIn.animation .parts02{
transition: all 0.3s ease 0.5432s;
}
.point01 .graphIn.animation .parts03{
transition: all 0.3s ease 0.7052s;
}
.point01 .graphIn.animation .parts04{
transition: all 0.3s ease 0.7864s;
}
.point01 .graphIn.animation .parts05{
transition: all 0.3s ease 0.8s;
}
.point01 .graphIn .circle{
top: 0;
left: 0;
}
.point01 .graphIn .circleIn{
stroke:#f6f6f6;
stroke-width:100;
stroke-dashoffset:0;
stroke-dasharray:0;
transition: stroke-dashoffset 0.8s linear;
fill:none;
}
.point01 .graphIn.animation .circle .circleIn {
stroke-dashoffset:1200;
stroke-dasharray:1200;
transition: stroke-dashoffset 0.8s linear;
}
.graduateList{
max-width: 800px;
}
.graduateList .box{
width: 49%;
margin-right: 2%;
}
@media only screen and (max-width:767px){
.graduateList .box{
width: 100%;
margin-right:0;
}
}
.graduateList .box:nth-child(2n){
margin-right:0;
}
.graduateList .box .img .icon{
top: 10px;
right: 10px;
width: 70px;
height: 70px;
box-sizing: border-box;
padding-top: 19px;
}
.graduateList .box .nameBox{
max-width: 90%;
padding: 20px 0 0;
margin-top: -60px;
}
.graduateMoreBtn{
width: 100%;
max-width: 380px;
height: 80px;
line-height: 80px;
border: 2px solid #0000ff;
cursor: pointer;
transition: all 0.3s ease;
}
@media only screen and (max-width:767px){
.graduateMoreBtn{
height: 60px;
line-height: 60px;
}
}
.graduateMoreBtn:hover{
background: #fff;
color: #0000ff;
}
.graduateMoreBtn .plus{
width: 20px;
height: 20px;
top: 50%;
right: 20px;
transform: translate(0,-50%);
}
.graduateMoreBtn .plus:before{
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: #fff;
transform: translate(-50%,0);
}
.graduateMoreBtn .plus:after{
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: #fff;
transform: translate(-50%,0) rotate(90deg);
}
.graduateMoreBtn:hover .plus:before{
background: #0000ff;
}
.graduateMoreBtn:hover .plus:after{
background: #0000ff;
}
.graduateMoreBtn.open{
display: none;
}
.point02 .fs-85{
letter-spacing: -0.05em;
}
.point02 .internshipTtl .slashTxt:after,
.point02 .internshipTtl .slashTxt:before{
height: 50px;
}
.internshipList .box{
width: 32%;
margin-right: 2%;
}
@media only screen and (max-width:767px){
.internshipList .box{
width: 49%;
}
}
.internshipList .box:nth-child(3n){
margin-right: 0;
}
@media only screen and (max-width:767px){
.internshipList .box:nth-child(3n){
margin-right: 2%;
}
.internshipList .box:nth-child(2n){
margin-right: 0;
}
}
.facilityTop .box{
width: 47.5%;
}
@media only screen and (max-width:767px){
.facilityTop .box{
width: 100%;
margin-bottom: 30px;
}
.facilityTop .box:last-child{
margin-bottom: 0;
}
}
.facilityTop .box .ttl{
max-width: 220px;
}
.facilityList .box{
width: 32%;
margin-right: 2%;
}
@media only screen and (max-width:767px){
.facilityList .box{
width: 49%;
}
}
.facilityList .box:nth-child(3n){
margin-right: 0;
}
@media only screen and (max-width:767px){
.facilityList .box:nth-child(3n){
margin-right: 2%;
}
.facilityList .box:nth-child(2n){
margin-right: 0;
}
.facilityList .name{
font-size: 1.1rem;
}
}
.studentComment .ttlImg{
max-width:380px;
width: 80%;
z-index: 10;
}
.studentComment .bgBox{
margin-top: -10px;
}
.studentBlock .img{
width: 130px;
}
@media only screen and (max-width:767px){
.studentBlock .img{
margin-left: auto;
margin-right: auto;
}
}
.studentBlock .txtBox{
width: calc(100% - 170px);
}
@media only screen and (max-width:767px){
.studentBlock .txtBox{
width: 100%;
margin-top: 30px;
}
}
.point03 .fs-85{
letter-spacing: -0.05em;
}
.audition{
max-width: 600px;
}
.officeList{
max-width: 600px;
}
.officeList .box{
width: 47.5%;
}
.point04 .fs-85{
letter-spacing: -0.05em;
}
.point04 .curriculumTtl .slashTxt:after,
.point04 .curriculumTtl .slashTxt:before{
height: 50px;
}
.curriculumTop .box{
width: 47.5%;
}
@media only screen and (max-width:767px){
.curriculumTop .box{
width: 100%;
margin-bottom: 40px;
}
.curriculumTop .box:last-child{
margin-bottom: 0;
}
}
.curriculumTop .box .en{
    bottom: -15px;
    left: 95%;
height: 57px;
width: auto;
max-width: 100vw;
}
@media only screen and (max-width:980px){
.curriculumTop .box .en{
    bottom: -10px;
    height: 40px;
    }
}
.curriculumList.colum3 .box{
width: 32%;
margin-right: 2%;
}
.curriculumList.colum3 .box:nth-child(3n){
margin-right: 0;
}
@media only screen and (max-width:767px){
.curriculumList.colum3 .box{
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
.curriculumList.colum3 .box:last-child{
margin-bottom: 0;
}
}
.curriculumList.colum2 .box{
width: 49%;
margin-right: 2%;
}
.curriculumList.colum2 .box:nth-child(2n){
margin-right: 0;
}
@media only screen and (max-width:767px){
.curriculumList.colum2 .box{
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
.curriculumList.colum2 .box:last-child{
margin-bottom: 0;
}
}
.curriculumList .box .img{
padding:0 20px;
}
@media only screen and (max-width:980px){
.curriculumList .box .img{
padding:0 10px;
}
}
@media only screen and (max-width:767px){
.curriculumList .box .img{
padding:0 20px;
}
}
.curriculumList .box .img:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: #fff;
}
.curriculumList .box .txtBox{
padding: 20px;
}
.point04 .jobList .jobIn{
height: 40px;
line-height: 40px;
padding: 0 15px;
border-radius: 25px;
border: 1px solid #e6e6e6;
margin-right: 5px;
transition: all 0.3s ease;
}
@media only screen and (max-width:767px){
.point04 .jobList .jobIn .fs-11{
font-size: 0.9rem;
}
}
.pcContent .point04 .jobList a:hover{
border: 1px solid #0000ff;
background: #0000ff;
}
.point04 .jobList .jobIn .icon-arrow-cl{
font-size: 18px;
margin-left: 8px;
top: 3px;
transition: all 0.3s ease;
}
.pcContent .point04 .jobList a:hover .icon-arrow-cl{
color: #fff;
}
.point04 .job .future{
top: 50%;
left: calc((50vw - 400px)* -1);
width: 100vw;
transform: translate(0,-50%);
height: 200px;
background: url("../images/bg-future.svg") repeat left top;
background-size:  auto 200px;
animation: future 50s linear infinite;
}
@keyframes future {
0% {background-position: 0 0;}
100% {background-position:-1738px 0;}
}
.point05 .fs-85{
letter-spacing: -0.05em;
}
.teacherList .box{
width: 32%;
margin-right: 2%;
}
.teacherList .box:nth-child(3n){
margin-right: 0;
}
@media only screen and (max-width:980px){
.teacherList .box{
width: 49%;
}
.teacherList .box:nth-child(3n){
margin-right: 2%;
}
.teacherList .box:nth-child(2n){
margin-right: 0;
}
}
@media only screen and (max-width:767px){
.teacherList .box{
width: 100%;
margin-right: 0;
    margin-bottom: 45px;
}
.teacherList .box:nth-child(3n){
margin-right: 0;
}
.teacherList .box:last-child{
margin-bottom: 0;
}
}
.teacherList .box .txtBox {
padding-bottom: 94px;
}
.teacherList .box .txtBoxIn{
max-height: calc(5.2em - 40px);
padding-bottom: 40px;
transition: all 0.8s ease;
}
.teacherList .box .txtBox.open .txtBoxIn{
max-height: 440px;
}
.teacherList .box .txtBox .moreBtn{
bottom: 0;
left: 0;
width: 100%;
}
.teacherList .box .txtBox .moreBtn:before{
content: "";
position: absolute;
top:0;
left: 0;
transform: translate(0,-100%);
width: 100%;
height: 5.2em;
background: linear-gradient(rgba(246,246,246,0),rgba(246,246,246,1));
}
.teacherList .box .txtBox.open .moreBtn{
}
.teacherList .box .txtBox .plus{
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #e6e6e6;
}
.teacherList .box .txtBox .plus:before,
.teacherList .box .txtBox .plus:after{
content: "";
position: absolute;
top: 50%;
left: 14px;
width: 12px;
height: 2px;
background: #000;
}
.teacherList .box .txtBox .plus:after{
transform: rotate(90deg);
transition: all 0.6s ease;
}
.teacherList .box .txtBox.open .plus:after{
transform: rotate(0);
}
.faqArea .qaContent .question{
padding: 40px 100px;
}
@media only screen and (max-width:767px){
.faqArea .qaContent .question{
padding: 20px 40px;
font-size: 1.6rem;
}
}
.faqArea .qaContent .iconQ{
top: 32px;
left: 40px;
}
@media only screen and (max-width:767px){
.faqArea .qaContent .iconQ{
top: 15px;
left: 10px;
font-size: 2.5rem;
}
}
.faqArea .qaContent .plus{
top: 42px;
right: 40px;
width: 20px;
height: 20px;
}
@media only screen and (max-width:767px){
.faqArea .qaContent .plus{
top: 24px;
right: 10px;
width: 16px;
height: 16px;
}
}
.faqArea .qaContent .plus:before,
.faqArea .qaContent .plus:after{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
width: 100%;
height: 2px;
background: #0000ff;
}
.faqArea .qaContent .plus:after{
transform: translate(0,-50%) rotate(90deg);
transition: all 0.3s ease;
}
.faqArea .qaContent .open .plus:after{
transform: translate(0,-50%);
}
.faqArea .qaContent .answer{
padding: 0 60px 40px;
}
@media only screen and (max-width:767px){
.faqArea .qaContent .answer{
padding: 0 10px 20px;
}
}
@media only screen and (max-width:767px){
.infoArea .fs-44{
font-size: 2.8rem;
}
.infoArea .fs-65{
font-size: 3.3rem;
}
.infoArea .message{
font-size: 1.6rem;
}
}
.infoArea .access{
padding: 60px 5%;
}
@media only screen and (max-width:767px){
.infoArea .access{
padding: 40px 5%;
}
}
.infoArea .access .autoBlock{
max-width: 800px;
}
.infoArea .access .trainaccess .img{
width: 60%;
}
@media only screen and (max-width:767px){
.infoArea .access .trainaccess .img{
width: 90%;
margin:0 auto 50px;
}
}
.infoArea .access .trainaccess .txtBox{
width: 30%;
}
@media only screen and (max-width:767px){
.infoArea .access .trainaccess .txtBox{
width: 100%;
}
.infoArea .accessTxt{
font-size: 1.5rem;
}
}
/*fixBtn*/
.fixBtn{
width: 100%;
bottom: 0;
left: 0;
z-index: 999;
transition: all 0.8s ease;
}
.nofix .fixBtn{
bottom: -180px;
}
@media only screen and (max-width:767px){
.nofix .fixBtn{
bottom: -140px;
}
}
/*footer*/
#footer{
margin-bottom: 190px;
}
@media only screen and (max-width:767px){
#footer{
margin-bottom: 120px;
}
}
#footer .privacy{
bottom: 0;
right: 0;
}
@media only screen and (max-width:767px){
#footer .privacy{
position: static;
margin-bottom: 30px;
}
}
#footer .privacy .icon{
width: 10px;
margin-left: 10px;
}
/*eventエリア追加*/
#event{
padding: 100px 0 50px;
}
@media only screen and (max-width:767px){
#event{
padding: 70px 0 30px;
}
}
#event .areaInner.u-bgWhite{
max-width: 800px;
padding: 50px 0 0;
}
@media only screen and (max-width:767px){
#event .areaInner.u-bgWhite{
padding: 30px 0 0;
}
}
#event .eventContent .img{
width: 200px;
}
@media only screen and (max-width:767px){
#event .eventContent .img{
width: 100%;
margin-bottom: 30px;
}
}
#event .eventContent .img .tate{
max-width: 133px;
width: 100%;
}
@media only screen and (max-width:767px){
#event .eventContent .img .tate{
max-width: 250px;
}
}
@media only screen and (max-width:767px){
#event .eventContent .copy{
font-size: 0.8rem;
}
}
#event .eventContent .img a .kind{
top: 0;
left: 0;
line-height: 1;
}
#event .eventContent .img a .kind .lavel{
padding: 0 5px;
margin-right: 1px;
height: 23px;
line-height: 23px;
}
#event .eventContent .txtBox{
width:calc(100% - 230px);
}
@media only screen and (max-width:767px){
#event .eventContent .txtBox{
width: 100%;
}
}
#event .eventContent .small{
margin-right:8px;
}
#event .eventContent .icon{
padding: 5px 8px;
margin-left: 15px;
top: -2px;
}
#event .eventContent .btnOuter .btn{
width: 49%;
}
#event .eventContent .btnOuter .btn .btnIn{
width: 100%;
min-width:inherit;
}
#event.btn{
height: 65px;
}
@media only screen and (max-width:767px){
#event.btn{
height: 55px;
}
}
#event .btn .btnIn{
height: 65px;
line-height: 63px;
border-radius: 35px;
padding: 0 40px;
box-sizing: border-box;
top: 0;
border: 1px solid #ff008c;
}
@media only screen and (max-width:767px){
#event .btn .btnIn{
height: 55px;
line-height: 53px;
padding: 0 20px;
}
}
#event .btn .btnIn .txt{
padding: 0;
margin: 0;
}
.btn.colorBg .btnIn:hover{
background: none;
}
#event .btn .btnIn .bg,
#event a .btn .btnIn .bg{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 0;
width: 0;
padding:0;
border-radius: 50%;
transition:opacity 0.4s ease, width 0.1s ease 0.4s, height 0.1s ease 0.4s, padding 0.1s ease 0.4s;
opacity: 0;
}
#event .btn .btnIn:hover .bg,
#event a:hover .btn .btnIn .bg{
width: 110%;
height: 110%;
padding:110% 0 0;
opacity: 1;
transition: all 0.3s ease;
}
#event .btn.white .btnIn{
border: 1px solid #fff;
transition: all 0.3s ease;
}
#event .btn.black .btnIn{
border: 1px solid #ff008c;
transition: all 0.3s ease;
}
/*btn submit*/
#event .btn .btnIn  input[type=submit]{
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-appearance: none;
border: none;
border-radius: 0;
background:none;
font-size: 1.4rem;
}
#event .btn .btnIn  input[type=submit].u-fcWhite{
color: #fff;
}
#event .btn .btnIn:hover input[type=submit].u-hfcBlack{
color: #ff008c;
}
#event .btn .btnIn  input[type=submit].u-fcBlack{
color: #ff008c;
}
#event .btn .btnIn:hover input[type=submit].u-hfcWhite{
color: #fff;
}
#event .btn .btnIn .txt.off{
opacity: 0;
}

#event .btn .btnIn.u-hfcBlack:link,
#event .btn .btnIn.u-hfcBlack:visited
{
color:#fff;
}
#event .btn .btnIn.u-hfcWhite:link,
#event .btn .btnIn.u-hfcWhite:visited
{
color:#ff008c;
}
#event .btn .btnIn.u-hfcBlack:hover,
#event .btn .btnIn.u-hfcBlack:active
{
color:#ff008c;
}
#event .btn .btnIn.u-hfcWhite:hover,
#event .btn .btnIn.u-hfcWhite:active
{
color:#fff;
}
.u-bgGradient {
background: linear-gradient(90deg, #ff008c, #0000ff);
}
.fs-24{
font-size: 2.4rem;
}
@media only screen and (max-width:767px){
.fs-24{
font-size: 2rem;
}
}