@charset "UTF-8";

@keyframes txtloop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}

@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}

@keyframes mvFade01 {
0% {
opacity: 1;
transform: scale(1.12);
}

38% {
opacity: 1;
transform: scale(1);
}

50% {
opacity: 0;
transform: scale(1);
}

88% {
opacity: 0;
transform: scale(1.12);
}

100% {
opacity: 1;
transform: scale(1.12);
}
}

@keyframes mvFade02 {
0% {
opacity: 0;
transform: scale(1.12);
}

38% {
opacity: 0;
transform: scale(1.12);
}

50% {
opacity: 1;
transform: scale(1.12);
}

88% {
opacity: 1;
transform: scale(1);
}

100% {
opacity: 0;
transform: scale(1);
}
}

.grad{
background: radial-gradient(circle,#05ae99 0%,#05ae99 60%,#016b5e 100%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.c01{color: #e4547c;}

/* 応募開始日時まではフォームへのリンクを表示しない */
.application-after-open {
display: none !important;
}

html.application-is-open .application-after-open {
display: block !important;
}

html.application-is-open .application-before-open {
display: none !important;
}


/*pc*/
@media print, screen and (min-width: 768px) {
/* mv
--------------------------------------------*/
#mv {
width: 100%;
position: relative;
margin:0 0 140px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#mv .mv_txtbox{
position: relative;
width: 55%;
padding: 7% 0 0 5%;
box-sizing: border-box;
}

#mv .mv_txtbox h1{
font-size: 3vw;
font-weight: 900;
line-height: 1.3;
}

#mv .mv_txtbox h1 .tl{
font-size: 5vw;
font-weight: 900;
display: block;
margin-top: 40px;
color:#05ae99;
}

#mv .mv_txtbox h1 .icon{
display: inline-block;
width: 32px;
margin-right: 5px;
}

#mv .mv_img {
position: relative;
flex: 0 0 45%;
width: 45%;
height: auto;
margin-top: -120px;
aspect-ratio: 1 / 1;
overflow: visible;
}

#mv .mask {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
margin: 0 auto;
text-align: center;
overflow: visible;
filter: drop-shadow(0 0 35px rgba(5, 174, 153, 0.55));
}

#mv .mask-clip {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
clip-path: url("#mask-clip-path");
-webkit-clip-path: url("#mask-clip-path");
overflow: hidden;
}

#mv .mask-clip img.mv_slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

#mv .mask-clip img.slide01 {
opacity: 1;
animation: mvFade01 8s ease-in-out infinite;
}

#mv .mask-clip img.slide02 {
opacity: 0;
animation: mvFade02 8s ease-in-out infinite;
}

#mv article{
position: absolute;
bottom:-160px;
left:0;
overflow: hidden;
z-index:0;
}

#mv .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#mv .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:12rem;
font-weight:400;
letter-spacing: 2rem;
line-height:1;
overflow: hidden;
color:#FFF;
opacity: .5;
}

#mv .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#mv .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


/* concept
--------------------------------------------*/
#concept {
position:relative;
margin:0 auto 160px;
background: #05ae99;
border-radius:32px;
padding: 120px 0 30px;
box-sizing: border-box;
}

#concept::before{
content: "";
position: absolute;
top: 50px;
left: 50px;
background: url("../images/index/illust01.png") 0 0 no-repeat;
background-size: cover;
width: 300px;
height: 600px;
opacity: .5;
}

#concept::after{
content: "";
position: absolute;
top: 50px;
right: 50px;
background: url("../images/index/illust02.png") 0 0 no-repeat;
background-size: cover;
width: 300px;
height: 600px;
opacity: .5;
}

#concept .block{
width: 1128px;
margin: 0 auto 80px;
text-align: center;
}

#concept .block h2{
font-size: 4rem;
font-weight: 800;
line-height: 1.8;
margin: 0 0 30px;
color: #FFF;
}

#concept .block p{
font-size: 1.8rem;
color: #FFF;
font-weight: 800;
}

#concept .block p span{
font-size: 2.6rem;
}

#concept .slider1{
position: relative;
z-index: 2;
}


/* learn
--------------------------------------------*/
#learn {
position: relative;
width: 1180px;
margin: 0 auto 160px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}

#learn .ttl_box {
width: 36%;
position: sticky;
top: 50px;
align-self: flex-start;
}

#learn .ttl_box h2{
font-size: 5rem;
font-weight: 800;
line-height: 1.25;
margin: 0 0 30px;
}

#learn .ttl_box .txt{
font-size: 1.8rem;
font-weight: 600;
}

#learn .block{
position: relative;
width: 56%;
}

#learn .block li{
background: #FFF;
padding: 30px;
box-sizing: border-box;
border-radius: 20px;
margin-bottom: 30px;
box-shadow: 0 0 16px 0px rgba(5,174,153,.15);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#learn .block li:last-child{
margin-bottom: 0;
}

#learn .block li .txt_box{
width: 66%;
}

#learn .block li h3{
font-size: 2.4rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 10px;
color: #e4547c;
}

#learn .block li p{
font-weight: 600;
}

#learn .block li .img{
width: 30%;
}

#learn .block li .img img{
border-radius: 1rem;
}


/* situation
--------------------------------------------*/
#situation {
position: relative;
margin: 0 auto 160px;
}

#situation .block{
width: 1180px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
padding: 60px;
box-sizing: border-box;
margin:0 auto 120px;
background:url("../images/com/bg_dark.png") 0 0 repeat;
border-radius:30px;
z-index:5;
}

#situation .txt_box{
position: relative;
width: 58%;
color: #FFF;

}

#situation .txt_box h2{
font-size: 4rem;
font-weight: 800;
line-height: 1.8;
margin: 0 0 30px;
}

#situation .txt_box h3{
font-size: 2.6rem;
font-weight: 800;
line-height: 1.8;
color:#e4547c;
margin: 0 0 20px;
}


#situation .txt_box p{
font-size: 1.8rem;
font-weight: 800;
}

#situation .img{
position: relative;
width: 36%;
border-radius: 1rem;
overflow: hidden;
}


#situation article{
position: absolute;
bottom:0;
left:0;
overflow: hidden;
z-index:0;
}

#situation .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#situation .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:12rem;
font-weight:400;
letter-spacing: 2rem;
line-height:1;
overflow: hidden;
color:#FFF;
opacity: .5;
}

#situation .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#situation .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


#sukihime{
position: relative;
width: 1180px;
margin: 0 auto 160px;
}

#sukihime::before{
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
left: 50%;
top: 7.75rem;
background-color:#05ae99;
border-radius: 1rem;
z-index: 0;
width: 1280px;
margin-left: -640px;
}

#sukihime .list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
z-index: 5;
padding-bottom: 60px;
}

#sukihime .list li{
width: 48%;
background: #FFF;
padding: 30px;
box-sizing: border-box;
border-radius: 2rem;
box-shadow: 0 0 16px 0px rgba(5,174,153,.15);
}

#sukihime .list li h2{
font-size: 3.2rem;
line-height: 1;
text-align: center;
margin: 0 0 40px;
}

#sukihime .list li .img{
width: 60%;
height: 200px;
margin: 0 auto 30px;
}

#sukihime .list li .img img{
border-radius: 10px;
}

#sukihime .list li h3{
font-size: 2.6rem;
line-height: 1;
text-align: center;
color:#e4547c;
margin: 0 0 20px;
}

#sukihime .list li h4{
line-height: 1;
text-align: center;
color:#e4547c;
margin: 0 0 20px;
}

#sukihime .word_wrap{
position: relative;
margin-top: 20px;
border:2px solid #e4547c;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background: #fcedf1;
}

#sukihime .word_wrap .word_img{
position: relative;
width: 120px;
}

#sukihime .word_wrap .word_img img{
border-radius: 50%;
overflow: hidden;
border:2px solid #FFF;
}

#sukihime .word_wrap .word_box{
position: relative;
width: calc(100% - 140px);
font-size: 1.4rem;
font-weight: 700;
color: #e4547c;
}

.speechBubble {
position: absolute;
top: -45px;
left: -50px;
display: inline-block;
margin-bottom: 13px;
padding: 10px;
border: 2px solid #e4547c;
border-radius: 9999px;
background-color: #e4547c;
text-align: left;
font-size: 1.2rem;
font-weight: 800;
line-height: 1;
color: #FFF;
}

.speechBubble::before {
content: "";
position: absolute;
bottom: 0;
left: 18%;
border-style: solid;
border-width: 13px 20px 0 0;
border-color: #e4547c transparent transparent;
translate: -50% 100%;
transform: skew(-23deg);
transform-origin: top;
}

.speechBubble::after {
content: "";
position: absolute;
bottom: 0;
left: 18%;
border-style: solid;
border-width: 9.3px 14.3px 0 0;
border-color: #e4547c transparent transparent;
translate: calc(-50% - 0.8px) 100%;
transform: skew(-23deg);
transform-origin: top;
}

/* curriculum
--------------------------------------------*/
#curriculum {
position:relative;
margin:0 auto 160px;
background: #e4547c;
border-radius:32px;
padding: 80px 0 120px;
box-sizing: border-box;
}

#curriculum h2{
font-size: 3.2rem;
line-height: 1;
text-align: center;
margin: 0 0 40px;
color: #FFF;
}

#curriculum .scroll{
width: 1180px;
margin: 0 auto;
}

#curriculum .table_curriculum{
width: 100%;
border-radius: 1rem;
border-top:1px solid #e4547c;
border-right:1px solid #e4547c;
background: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,.2);
font-weight: 600;
}

#curriculum .table_curriculum th{
border-bottom:1px solid #e4547c;
border-left:1px solid #e4547c;
color: #e4547c;
padding: 16px;
box-sizing: border-box;
}

#curriculum .table_curriculum th:nth-child(1){
width: 12%;
}

#curriculum .table_curriculum th:nth-child(2){
width: 18%;
}

#curriculum .table_curriculum th:nth-child(3){
width: 30%;
}

#curriculum .table_curriculum th:nth-child(4){
width: 40%;
}


#curriculum .table_curriculum td{
border-bottom:1px solid #e4547c;
border-left:1px solid #e4547c;
color: #e4547c;
padding: 16px;
box-sizing: border-box;
}

#curriculum .txt{
font-size: 2rem;
font-weight: 800;
line-height: 1;
text-align: center;
margin:20px 0 0;
color: #FFF;
text-decoration: underline;
}

#curriculum article{
position: absolute;
bottom:-15px;
left:0;
overflow: hidden;
z-index:0;
}

#curriculum .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#curriculum .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:12rem;
font-weight:400;
letter-spacing: 2rem;
line-height:1;
overflow: hidden;
color:#FFF;
opacity: .2;
}

#curriculum .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#curriculum .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


/* recruitment
--------------------------------------------*/
#recruitment {
position:relative;
margin:0 auto 160px;
background:url("../images/com/bg_dark.png") 0 0 repeat;
border-radius:32px;
padding: 80px 0 120px;
box-sizing: border-box;
}

#recruitment h2{
font-size: 3.2rem;
line-height: 1;
text-align: center;
margin: 0 0 40px;
color: #FFF;
}

#recruitment .table_rec{
width: 1180px;
border-radius: 1rem;
border-top:1px solid #2e2e2e;
border-right:1px solid #2e2e2e;
background: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,.2);
margin: 0 auto 40px;
font-weight: 600;
}

#recruitment .table_rec th{
border-bottom:1px solid #2e2e2e;
border-left:1px solid #2e2e2e;
padding: 16px;
box-sizing: border-box;
}

#recruitment .table_rec td{
border-bottom:1px solid #2e2e2e;
border-left:1px solid #2e2e2e;
padding: 16px;
box-sizing: border-box;
}

#recruitment h3{
font-size: 2.6rem;
line-height: 1;
text-align: center;
margin: 0 0 40px;
color: #FFF;
}

#recruitment .jiko_txt{
width: 1080px;
margin: 0 auto 20px;
color: #FFF;
}

#recruitment .jiko_list{
width: 1080px;
margin: 0 auto 0;
list-style-type: disc;
color: #FFF;
}

#recruitment .jiko_list li{
margin-left: 10px;
}


#recruitment article{
position: absolute;
bottom:-15px;
left:0;
overflow: hidden;
z-index:0;
}

#recruitment .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#recruitment .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:12rem;
font-weight:400;
letter-spacing: 2rem;
line-height:1;
overflow: hidden;
color:#FFF;
opacity: .2;
}

#recruitment .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#recruitment .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#recruitment .btn{
width: 1000px;
margin: 40px auto 0;
}

#recruitment .btn a{
display: block;
background: #e4547c;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 2.2rem;
font-weight: 700;
color: #FFF;
border-radius: 50rem;
transition: .5s;
border: 2px solid #e4547c;
}

#recruitment .btn a:hover{
background: #FFF;
color: #e4547c;
}

/*fix_btn
-----------------------------*/
.fix_btn{
position: fixed;
bottom: 30%;
right:0;
width: 160px;
z-index: 5;

}

.fix_btn a{
display: block;
background: #e4547c;
color: #FFF;
padding: 15px;
box-sizing:border-box;
border-radius: 1rem 0 0 1rem;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
box-shadow: 0 0 16px 0px rgba(5,174,153,.3);
}

.fix_btn a img{
width:14px;
margin-left: 5px;
}


.form_txt{
font-size: 2.8rem;
font-weight: 800;
color: #e4547c;
text-align: center;
line-height: 1.6;
margin: 60px 0 0;
}

}
/*sp*/
@media only screen and (max-width: 767px) {

html,
body {
overflow-x: clip;
}

/* mv
--------------------------------------------*/
#mv {
width: 100%;
position: relative;
margin:0 0 60px;
overflow: visible;
}

#mv .mv_txtbox{
position: relative;
width:100%;
padding: 14% 0 0 5%;
box-sizing: border-box;
z-index: 2;
}

#mv .mv_txtbox h1{
font-size: 4vw;
font-weight: 900;
line-height: 1.45;
}

#mv .mv_txtbox h1 .tl{
font-size:10vw;
font-weight: 900;
display: block;
margin-top:20px;
color:#05ae99;
line-height: 1.2;
}

#mv .mv_txtbox h1 .icon{
display: inline-block;
width: 20px;
margin-right: 5px;
}

#mv .mv_img {
position:absolute;
top: -36%;
right: -10%;
width:54%;
aspect-ratio: 1 / 1;
overflow: visible;
}

#mv .mask {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
overflow: visible;
filter: drop-shadow(0 0 35px rgba(5, 174, 153, 0.55));
}

#mv .mask-clip {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
clip-path: url("#mask-clip-path");
-webkit-clip-path: url("#mask-clip-path");
overflow: hidden;
}

#mv .mask-clip img.mv_slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

#mv .mask-clip img.slide01 {
opacity: 1;
animation: mvFade01 8s ease-in-out infinite;
}

#mv .mask-clip img.slide02 {
opacity: 0;
animation: mvFade02 8s ease-in-out infinite;
}

#mv article {
position: absolute;
bottom: -70px;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
z-index: 0;
}

#mv .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#mv .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:6rem;
font-weight:400;
letter-spacing: 2rem;
line-height:1;
overflow: hidden;
color:#FFF;
opacity: .5;
}

#mv .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#mv .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


/* concept
--------------------------------------------*/
#concept {
position:relative;
margin:0 auto 60px;
background: #05ae99;
border-radius:20px;
padding: 50px 0 15px;
box-sizing: border-box;
}

#concept::before{
content: "";
position: absolute;
top: 10px;
left: 10px;
background: url("../images/index/illust01.png") 0 0 no-repeat;
background-size: cover;
width: 60px;
height: 120px;
opacity: .3;
}

#concept::after{
content: "";
position: absolute;
top: 10px;
right: 10px;
background: url("../images/index/illust02.png") 0 0 no-repeat;
background-size: cover;
width: 60px;
height: 120px;
opacity: .3;
}

#concept .block{
width: 90%;
margin: 0 auto 30px;
text-align: center;
}

#concept .block h2{
font-size: 2rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 30px;
color: #FFF;
}

#concept .block p{
font-size: 1.4rem;
color: #FFF;
font-weight: 800;
}

#concept .block p span{
font-size: 1.8rem;
}

#concept .slider1{
position: relative;
z-index: 2;
}


/* learn
--------------------------------------------*/
#learn {
position: relative;
width: 90%;
margin: 0 auto 60px;
}

#learn .ttl_box {
position: relative;
width: 100%;
margin-bottom: 30px;
}

#learn .ttl_box h2{
font-size: 2.4rem;
font-weight: 800;
line-height: 1;
margin: 0 0 20px;
}

#learn .ttl_box .txt{
font-size: 1.4rem;
font-weight: 600;
}

#learn .block{
position: relative;
width: 100%;
}

#learn .block li{
background: #FFF;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 0 16px 0px rgba(5,174,153,.15);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#learn .block li:last-child{
margin-bottom: 0;
}

#learn .block li .txt_box{
width: 66%;
}

#learn .block li h3{
font-size: 1.8rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 10px;
color: #e4547c;
}

#learn .block li p{
font-weight: 600;
}

#learn .block li .img{
width: 30%;
}

#learn .block li .img img{
border-radius: 1rem;
}


/* situation
--------------------------------------------*/
#situation {
position: relative;
margin: 0 auto 60px;
padding-bottom: 60px;
box-sizing: border-box;
overflow: hidden;
}

#situation .block{
width: 90%;
position: relative;
padding: 20px;
box-sizing: border-box;
margin:0 auto;
background:url("../images/com/bg_dark.png") 0 0 repeat;
border-radius:20px;
z-index:5;
}

#situation .txt_box{
position: relative;
width: 100%;
color: #FFF;
margin-bottom: 20px;
}

#situation .txt_box h2{
font-size: 2.4rem;
font-weight: 800;
line-height: 1;
margin: 0 0 20px;
text-align: center;
}

#situation .txt_box h3{
font-size: 1.8rem;
font-weight: 800;
line-height: 1.2;
color:#e4547c;
margin: 0 0 10px;
}

#situation .txt_box p{
font-size: 1.4rem;
font-weight: 800;
line-height: 1.8;
}

#situation .img{
position: relative;
width: 80%;
border-radius: 1rem;
overflow: hidden;
margin: auto;
}


#situation article{
position: absolute;
bottom:0;
left:0;
overflow: hidden;
z-index:0;
}

#situation .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#situation .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:6rem;
font-weight:400;
letter-spacing: 2rem;
line-height:1;
overflow: hidden;
color:#FFF;
opacity: .5;
}

#situation .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#situation .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


/* sukihime
--------------------------------------------*/
#sukihime{
position: relative;
width: 90%;
margin: 0 auto 60px;
}

#sukihime::before{
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
left: -10%;
top: 7.75rem;
background-color:#05ae99;
border-radius: 1rem;
z-index: 0;
width: 120%;
}

#sukihime .list{
width: 80%;
position: relative;
z-index: 5;
padding-bottom: 60px;
margin: 0 auto;
}

#sukihime .list li{
width: 100%;
background: #FFF;
padding: 20px;
box-sizing: border-box;
border-radius: 1.6rem;
box-shadow: 0 0 16px 0px rgba(5,174,153,.15);
margin-bottom: 30px;
}

#sukihime .list li:last-child{
margin-bottom: 0;
}

#sukihime .list li h2{
font-size: 2.4rem;
line-height: 1;
text-align: center;
margin: 0 0 20px;
}

#sukihime .list li .img{
width: 100%;
margin: 0 auto 20px;
}

#sukihime .list li .img img{
border-radius: 10px;
}

#sukihime .list li h3{
font-size:2rem;
line-height: 1;
text-align: center;
color:#e4547c;
margin: 0 0 10px;
}

#sukihime .list li h4{
line-height: 1;
text-align: center;
color:#e4547c;
margin: 0 0 20px;
}

#sukihime .word_wrap{
position: relative;
margin-top: 20px;
border:2px solid #e4547c;
padding: 15px;
box-sizing: border-box;
border-radius: 10px;
background: #fcedf1;
}

#sukihime .word_wrap .word_img{
position: relative;
width: 60%;
margin: auto;
}

#sukihime .word_wrap .word_img img{
border-radius: 50%;
overflow: hidden;
border:2px solid #FFF;
}

#sukihime .word_wrap .word_box{
position: relative;
width:100%;
font-size: 1.2rem;
font-weight: 700;
color: #e4547c;
}

.speechBubble {
position: relative;
display: inline-block;
margin-top: 13px;
margin-bottom: 10px;
padding: 5px 10px;
border: 2px solid #e4547c;
border-radius: 9999px;
background-color: #e4547c;
font-size: 12px;
font-weight: 800;
line-height: 1.5;
color: #ffffff;
width: 90%;
box-sizing: border-box;
text-align: center;
}

.speechBubble::before {
content: "";
position: absolute;
top: 0;
left: 50%;
border-style: solid;
border-width: 0 10px 13px 10px;
border-color: transparent transparent #e4547c;
translate: -50% -100%;
}

.speechBubble::after {
content: "";
position: absolute;
top: 0;
left: 50%;
border-style: solid;
border-width: 0 7.5px 9.7px 7.5px;
border-color: transparent transparent #e4547c;
translate: -50% -100%;
}

/* curriculum
--------------------------------------------*/
#curriculum {
position:relative;
margin:0 auto 60px;
background: #e4547c;
border-radius:20px;
padding: 20px 0 60px;
box-sizing: border-box;
overflow: hidden;

}

#curriculum h2{
font-size: 2.2rem;
line-height: 1;
text-align: center;
margin: 0 0 20px;
color: #FFF;
}

#curriculum .scroll{
width: 90%;
margin: 0 auto;
}

#curriculum .table_curriculum{
width: 800px;
border-radius: 1rem;
border-top:1px solid #e4547c;
border-right:1px solid #e4547c;
background: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,.2);
font-size: 12px;
font-weight: 600;
}

#curriculum .table_curriculum th{
border-bottom:1px solid #e4547c;
border-left:1px solid #e4547c;
color: #e4547c;
padding: 12px;
box-sizing: border-box;
}

#curriculum .table_curriculum th:nth-child(1){
width: 12%;
}

#curriculum .table_curriculum th:nth-child(2){
width: 18%;
}

#curriculum .table_curriculum th:nth-child(3){
width: 30%;
}

#curriculum .table_curriculum th:nth-child(4){
width: 40%;
}

#curriculum .table_curriculum td{
border-bottom:1px solid #e4547c;
border-left:1px solid #e4547c;
color: #e4547c;
padding: 12px;
box-sizing: border-box;
white-space: nowrap;
}

#curriculum .txt{
font-size: 1.4rem;
font-weight: 800;
line-height: 1.2;
text-align: center;
margin:20px 0 0;
color: #FFF;
text-decoration: underline;
}

#curriculum article{
position: absolute;
bottom:-15px;
left:0;
overflow: hidden;
z-index:0;
}

#curriculum .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#curriculum .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:6rem;
font-weight:400;
letter-spacing: 2rem;
line-height:1;
overflow: hidden;
color:#FFF;
opacity: .2;
}

#curriculum .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#curriculum .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


/* recruitment
--------------------------------------------*/
#recruitment {
position:relative;
margin:0 auto 60px;
background:url("../images/com/bg_dark.png") 0 0 repeat;
border-radius:20px;
padding: 20px 0 60px;
box-sizing: border-box;
overflow: hidden;
}

#recruitment h2{
font-size: 2.4rem;
line-height: 1;
text-align: center;
margin: 0 0 20px;
color: #FFF;
}

#recruitment .scroll{
width: 90%;
margin: 0 auto 40px;
overflow: hidden;
}

#recruitment .table_rec{
width: 660px;
border-radius: 1rem;
border-top:1px solid #2e2e2e;
border-right:1px solid #2e2e2e;
background: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,.2);
margin: 0 auto;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}

#recruitment .table_rec th{
border-bottom:1px solid #2e2e2e;
border-left:1px solid #2e2e2e;
padding: 10px;
box-sizing: border-box;
}

#recruitment .table_rec td{
border-bottom:1px solid #2e2e2e;
border-left:1px solid #2e2e2e;
padding: 10px;
box-sizing: border-box;
}

#recruitment h3{
font-size: 2rem;
line-height: 1;
text-align: center;
margin: 0 0 20px;
color: #FFF;
}

#recruitment .jiko_txt{
width: 90%;
margin: 0 auto 20px;
color: #FFF;
font-size: 1.3rem;

}


#recruitment .jiko_list{
width: 90%;
margin: 0 auto;
list-style-type: disc;
color: #FFF;
}

#recruitment .jiko_list li{
margin-left: 10px;
font-size: 1.3rem;
line-height: 1.6;
margin-bottom: 5px;
}


#recruitment article{
position: absolute;
bottom:-15px;
left:0;
overflow: hidden;
z-index:0;
}


#recruitment .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#recruitment .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:6rem;
font-weight:400;
letter-spacing: 2rem;
line-height:1;
overflow: hidden;
color:#FFF;
opacity: .2;
}

#recruitment .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#recruitment .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#recruitment .btn{
width: 90%;
margin: 40px auto 0;
}

#recruitment .btn a{
display: block;
background: #e4547c;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 1.6rem;
font-weight: 700;
color: #FFF;
border-radius: 50rem;
transition: .5s;
border: 2px solid #e4547c;
}

#recruitment .btn a:hover{
background: #FFF;
color: #e4547c;
}

/*fix_btn
-----------------------------*/
.fix_btn{
position: fixed;
bottom: 0;
right:0;
width: 100%;
z-index: 10;
}

.fix_btn a{
display: block;
background: #e4547c;
color: #FFF;
padding:25px 15px;
box-sizing:border-box;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
box-shadow: 0 0 16px 0px rgba(5,174,153,.3);
}

.fix_btn a img{
width:14px;
margin-left: 5px;
}

.form_txt{
font-size: 1.8rem;
font-weight: 800;
color: #e4547c;
text-align: center;
line-height: 1.6;
margin: 30px 0 0;
}


}