@charset "utf-8";

/*共通*/
body{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    color: #333;
    /* line-height: 28px; */
}
.round-gothic{
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    color: #707070;
    font-size: 1.4rem;
    line-height: 20px;
}
.article{
    font-size: 1.8rem;
    line-height: 28px;
}
.orange{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ED811D;   
}
.pc-only{
    display: block;
}
.sp-only{
    display: none;
}
@media (max-width: 788px) {
    .round-gothic{
        font-size: 1.2rem;
    }
    .article{
        font-size: 1.6rem;
        line-height: 28px;
    }
    .sp-only{
        display: block;
    }
    .pc-only{
        display: none;
    }
    .sp-annotation{
        font-size: 1.6rem;
    }
}

/*MV*/
.mv{
    position: relative;
}
.mv-main{
    width: 100%;
}
.header-logo{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 140px;
    height: auto;
}
.mv-message{
    position: absolute;
    right: 10%;
    bottom: 8%;
    max-width: 513px;
    width: 35.6%;
}
.mv-person{
    width: 135px;
    z-index: 5;
    position: absolute;
    left: -33%;
    top: -28%;
}
.mv-block{
    background-color: rgba(0, 0, 0, 0.4);
    width: 290px;
    padding: 16px;
    color: white;
    text-align: center;
    position: absolute;
    left: 10%;
    bottom: 8%;
}
.mv-block p{
    padding-bottom: 16px;
    font-size: 14px;
    border-bottom: 1px solid #fff;
}
.mv-block__name{
    font-size: 2.4rem;
    padding-left: 8px;
    padding-right: 8px;
}
.mv-block p:not(:first-child){
    padding-top: 16px;
}
.mv-block p:last-child{
    text-align: left;
}
@media (max-width: 788px) {
    .mv-message{
        width: 90%;
        top: 60%;
        left: 50%;
        transform: translate(-50%,-50%);    
    }
    .mv-block{
        left: 20%;
        bottom: -10%;
    }
}

/*work*/
.work{
    margin-top: 100px;
    position: relative;
}
.work .title-block img{
    max-width: 700px;
    width: 95%;
}
.sec-title{
    font-size: 4.8rem;
}
.title-color{
    font-size: 9.6rem;
}
.annotation{
    color: #333;
    font-size: 1.8rem;
}
.work .annotation{
    max-width: 426px;
    width: 95%;
    margin-top: 36px;
    margin-bottom: 94px;
    position: absolute;
}
.work-block{
    display: flex;
    align-items: baseline;
    margin-top: -158px;
}
.work-block__inner-1{
    width: 54%;
    margin-right: 2%;
}
.work-3{
    width: 100%;
}
.work-message{
    position: absolute;
    right: 5%;
    bottom: 13%;
    width: 84px;
}
.title-block{
    margin-left: 5.5%;
}
.work-2{
    position: absolute;
    top: 35%;
    left: 42%;
    width: 26%;
    transform: translate(-50%,-50%);
    transform: rotate(-4deg);
}
.work-block__inner-2{
    width: 44%;
}
.work-1{
    width: 100%;
    position: relative;
    z-index: -5;
}
.work-block__inner-1 p,
.work-block__inner-2 p{
    margin-top: 12px;
}
.work-block__inner-1 p{
    margin-left: 12px;
}
.work-block__inner-2 p{
    margin-right: 12px;
}
@media (max-width: 1300px) {
    .work-block{
        margin-top: -10%;
    }
}
@media (max-width: 1160px) {
    .work-block{
        margin-top: -5%;
    }
    .work-2 {
        left: 44%;
        top: 44%;
        width: 20.5%;
    }
}
@media (max-width: 900px) {
    .work-block{
        margin-top: -3%;
    }
    .work-2 {
        top: 50%;
    }
    .work .annotation{
        max-width: 360px;
    }
}

@media (max-width: 788px) {
    .work{
        margin-top: 185px;
    }
    .annotation{
        font-size: 1.6rem;
    }
    .titlle-block-sp{
        text-align: center;
        width: 91.7%;
        max-width: 515px;
        margin: auto;
    }
    .titlle-block-sp img{
        width: 100%;
    }
    .work-block{
        flex-direction: column-reverse;
        margin-top: 16px;
        display: flex;
        align-items: flex-end;
    }
    .work-block__inner-1,
    .work-block__inner-2{
        width: 100%;
    }
    .work-block__inner-1{
        margin-right: 0;
    }
    .work-block__inner-1 p {
        margin-top: 4px;
    }
    .work-block__inner-2{
        width: 82%;
        margin-bottom: 36px;
    }
    .work-message{
        left: 5%;
        bottom: 57%;
        width: 84px;
    }
    .work-block__inner-2 p{
        width: 41.4%;
        margin-top: 8px;
        margin-right: 10px;
        margin-left: auto;
    }
    .work-2{
        width: 56.3%;
        top: 45%;
        left: 5%;    
    }
    .work .article.sp-only{
        width: 94.8%;
        margin: auto;
    }
    .work-block__inner-1 p{
        width: 94.8%;
        margin: auto;
    }
}

/*skill*/
.skill{
    margin-top: 80px;
    position: relative;
}
.skill .title-block img{
    max-width: 897px;
    width: 95%;
}
.skill-content{
    width: 27%;
    margin-top: 27px;
    position: absolute;
}
.float p{
    width: 58%;
    text-align: justify;
}
.float{
    position: absolute;
    top: 46.5%;
    left: 47.5%;
    transform: translate(-50%, -50%);
    width: 23%;
}
.float img{
    width: 100%;
}
.skill-block{
    width: 50%;
    margin-top: -270px;
    margin-left: auto;
    position: relative;
    z-index: -5;
}
.skill-block img{
    width: 100%;
}
.skill-block p{
    margin-top: 12px;
    margin-left: 159px;
}
.teachers{
    margin-top: 80px;
    padding-top: 36px;
    padding-bottom: 48px;
    background: #FAFAF5;
}
.teachers h4{
    font-size: 2.4rem;
    color: #333;
    max-width: 442px;
    margin: auto;
    position: relative;
}
.teachers h4::before{
    content: '';
    position: absolute;
    background-image: url(../img/icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 56px;
    height: 40px;
    left: -60px;
    transform: translate(0px, 0px);
    left: -15%;
    top: -3px;
}
.teachers h4 .orange{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ED811D;   
}
.teachers-block{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1080px;
    width: 95%;
    margin: auto;
    margin-top: 50px;
}
.teachers-inner img{
    width: 180px;
}
.teachers-inner:nth-child(2) img{
    width: 130px;
    margin-top: -20px;
}
.mini-title{
    background-color: #E8E240;
    color: #333;
    font-size: 2.4rem;
    padding: 18px 0;
    max-width: 314px;
    text-align: center;
    width: 95%;
    border: 2px solid #333;
    border-radius: 50px;
    box-shadow: 3px 5px 0px 0px #333;
    margin-bottom: 16px;
    margin-left: auto;
}
.teachers-inner{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border: 2px solid #333;
    border-radius: 10px;
    margin-bottom: 8px;
    max-width: 522px;
    width: 95%;
    background-color: #F4F3D9;
}
.teachers-inner:first-child{
    margin-right: 2.7%;
}
.teachers-inner:first-child img{
    flex: 1;
    /* max-width: 130px; */
    margin-left: 10px;
    margin-top: -15px;
}
.teachers-name{
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: #333;
    text-align: right;
}
.teachers-info{
    font-size: 1.4rem;
}
.teachers-item{
    width: 62%;
    margin-top: -20px;
    margin-right: 28px;
    padding-bottom: 24px;
}
.teachers-item:last-child{
    padding-bottom: 39px;
}
@media (min-width: 1800px) {
    .skill{
        margin-top: 10%;
    }
}
@media (max-width: 1200px) {
    .teachers{
        margin-top: 180px;
    }
    .float{
        top: 41%;
    }

}
@media (max-width: 1160px) {
    .teachers{
        margin-top: 250px;
    }
}
@media (max-width: 960px) {
    .teachers{
        margin-top: 300px;
    }
    .float {
        top: 29%;
    }
    .skill-block{
        margin-top: -160px;
    }
    .skill .title-block img{
        max-width: 510px;
    }
}
@media (max-width: 900px) {
    .teachers{
        margin-top: 400px;
    }
    .float {
        top: 27.5%;
    }
}
@media (max-width: 885px) {
    .mini-title{
        font-size: 1.8rem;
    }
}
@media (max-width: 788px) {
    .skill-block{
        margin-top: 0;
    }
    .skill .title-block{
        width: 85.3%;
        margin-left: 4.1%;
    }
    .skill-block{
        width: 100%;
    }
    .skill-block p{
        width: 94.8%;
        margin: auto;
        margin-top: 4px;
    }
    .float{
        position: static;
        display: flex;
        flex-direction: row-reverse;
        transform: unset;
        width: 94.8%;
        margin: auto;
    }
    .skill-content{
        width: 94.8%;
        margin: auto;
        position: unset;
        margin-top: 36px;
        line-height: 30px;
    }
    .teachers{
        margin-top: 36px;
        padding-top: 60px;
    }
    .teachers h4{
        font-size: 1.8rem;
        text-align: center;
    }
    .teachers-block{
        display: block;
    }
    .teachers h4 .orange{
        font-size: 2.4rem;
    }
    .teachers h4::before{
        transform: translate(-50%, -85%);
        left: 50%;
        top: -50%;
    }
    .mini-title{
        font-size: 1.8rem;
        margin-left: 0;
        position: absolute;
        left: 28%;
        top: -56%;
        transform: translate(-50%, 0%);
        width: 229px;
    }
    .teachers-inner:last-child .teachers-item .mini-title{
        left: 33%;
    }
    .teachers-inner:first-child img{
        margin-left: 0px;
    }
    .teachers-inner{
        align-items: center;
        width: 94.8%;
        margin: auto;
    }
    .teachers-inner:first-child{
        margin: auto;
    }
    .teachers-item{
        margin-top: 35px;
        margin-right: 16px;
        position: relative;
    }
    .teachers-name{
        font-size: 1.4rem;
        color: #333;
    }
    .teachers-info{
        font-size: 1.2rem;
        text-align: justify;
    }
    .teachers-inner:last-of-type{
        margin-top: 70px;
    }
    .teachers-item:first-child{
        max-width: 188px;
    }
    .teachers-item:last-child{
        padding-bottom: 26px;
    }
    .teachers-inner:nth-child(2) img{
        width: 27%;
    }
    .teachers-block {
        display: block;
        width: 95%;
        margin: auto;
        margin-top: 50px;
    }
}
@media (min-width: 1800px) {
    .title-block{
        margin-left: 9.5%;
    }
    .skill-block{
        width: 53%;
        margin-top: -18%;
    }
    .float{
        left: 43.5%;
        top: 52.5%;
    }
    .skill-content{
        max-width: 400px;
    }
}

/*surfing*/
.surfing{
    margin-top: 100px;
    position: relative;
}
.surfing-title{
    max-width: 1195px;
    width: 90%;
    margin-left: 80px;
}
.surfing-main{
    /* width: 58.3%; */
    /* width: 82%; */
    width: 100%;
    margin-top: -50px;
    position: relative;
    z-index: -10;
}
.surfing-block{
    display: flex;
}
.surfing-inner{
    width: 35%;
    padding-left: 2%;
    margin-right: 5.5%;
}
.surfing-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 36px;
}
.surfing-item p{
    width: 381px;
}
.surfing-item img{
    width: 91px;
}
.surfing-inner > p{
    margin-top: 24px;
    margin-left: 12.6%;
}
.surfing-center{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* position: absolute; */
    width: 56.1%;
    left: 54%;
    bottom: -42%;
    transform: translate(65%,-95%);
}

.surfing-center img{
    max-width: 346px;
    width: 50%;
    height: auto;
}
@media (max-width: 1080px) {
    .surfing-center.pc-only{
        width: 65%;
        margin-left: 15px;
        margin-top: -80px;
    }
    .surfing-center img{
        width: 80%;
    }
}
@media (max-width: 1040px) {
    .surfing-center.pc-only{
        margin-top: -180px;
    }
}
@media (min-width: 2080px) {
    .surfing-center img{
        max-width: none;
    }
}
.surfing-center__item{
    width: 291px;
}
.surfing-center.sp-only{
    display: none;
}
.surfing-block picture{
    flex: 1;
}
.surfing-center .surfing3-icon{
    width: 95%;
    max-width: 120px;
}
.surfing-center .surfing3-icon {
    width: 95%;
    max-width: 95px;
}
@media (min-width: 1800px) {
    .surfing-title{
        margin-left: 15.5%;
    }
    .surfing-main{
        width: 100%;
    }
    .surfing-inner{
        margin-right: 10.5%;
    }
}
@media (max-width: 1400px) {
    .surfing-center{
        margin-top: -100px;
        margin-bottom: 90px;
        margin-left: auto;
        margin-right: 8%;
        transform: unset;
    }
}
@media (max-width: 1280px) {
    .surfing-center{
        margin-bottom: 100px;
    }
}
@media (max-width: 900px) {
    .surfing-block{
        display: block;
        margin-top: 85px;
    }
    .surfing-main{
        width: 100%;
    }
    .surfing-picture {
        margin-left: 4.1%;
    }
    .surfing-title{
        max-width: 485px;
        margin-left: 0;
    }
    .surfing-inner{
        width: 100%;
        margin-left: 0;
        margin-top: 50px;
    }
    .surfing-center{
        position: static;
        width: 94.8%;
        margin: auto;
        transform: unset;
        position: relative;
        left: 0;
        bottom: 0;
    }
    .surfing-center.pc-only{
        display: none;
    }
    .surfing-item{
        flex-direction: row-reverse;
        align-items: flex-end;
        justify-content: center;
        margin-top: 65px;
    }
    .surfing-item p{
        width: 76.9%;
        text-align: justify;
    }
    .surfing-item img{
        width: 15.3%;
        max-width: 65px;
    }
    .surfing-center.sp-only{
        display: flex;
        align-items: flex-start;
    }
    .surfing-center__item{
        margin-top: 10px;
        margin-left: 8px;
        text-align: justify;
        width: auto;
        max-width: 250px;
    }
    .surfing2-icon{
        width: 53.3%;
        min-width: 206px;
    }
    .surfing-inner > p{
        width: 94.8%;
        margin-left: 0;
        margin: auto;
        margin-top: 24px;
    }
    .surfing-center .surfing3-icon{
        /* width: 60px;
        position: absolute;
        right: 8%;
        bottom: 10%; */
        max-width: 130px;
        position: absolute;
        width: 60%;
        right: 10%;
        bottom: 5%;
    }
    .surfing-center__flex{
        display: flex;
        justify-content: center;
        position: relative;
    }
}
@media (max-width: 600px) {
    .surfing-center .surfing3-icon{
        width: 60px;
        position: absolute;
        bottom: -10%;
        right: 20%;
    }
}
@media (max-width: 430px) {
    .surfing-center .surfing3-icon{
        bottom: -30%;
    }
    .surfing-center .surfing3-icon{
        right: 12%;
    }
}

/*employment*/
.employment{
    background-color: #EFF7F9;
    margin-top: -120px;
    padding-top: 80px;
    padding-bottom: 120px;
}
.employment-title{
    width: 381px;
    margin: auto;
}
.employment-title__img{
    width: 100%;
    position: relative;
    z-index: 10;
}
.employment-conditions{
    max-width: 1080px;
    width: 85%;
    background-color: #fff;
    padding: 48px 60px;
    margin: auto;
    margin-top: -45px;
    border-radius: 10px;
    position: relative;
}
dl{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    max-width: 960px;
    margin: auto;
    border-bottom: 1px solid #5EAAC4;
    padding-bottom: 20px;
}
dl:not(:first-child){
    padding-top: 20px;
}
dt{
    width: 20%;
    font-size: 1.8rem;
    font-weight: 700;
}
dd{
    width: 80%;
    font-size: 1.8rem;
    margin-left: auto;
    margin-bottom: 4px;
}
dl dd:not(:first-child){
    margin-top: 4px;
}
.employment-message{
    font-size: 1.6rem;
    font-weight: 700;
    background-image: url(../img/employment-frame.png);
    background-repeat: no-repeat;
    background-size: 100% 100%,contain;
    padding: 50px 20px;
    max-width: 325px;
    text-align: center;
    position: absolute;
    top: -10%;
    right: -8.5%;
}
.dl_img{
    position: relative;
}
.employment-conditions__img{
    width: 32%;
    position: absolute;
    right: -13%;
    top: -50%;
}
@media (max-width: 1400px) {
    .employment{
        margin-top: 0;
    }
}
@media (max-width: 1280px) {
    .employment{
        margin-top: 0%;
    }
}
@media (max-width: 900px) {
    .employment{
        margin-top: 80px;
    }
}
@media (max-width: 788px) {
    .employment-title{
        width: 53.3%;
        margin-left: 4.1%;
    }
    .employment-message{
        font-size: 1.2rem;
        padding: 30px 15px 38px 15px;
        top: -3%;
        right: -1.5%;
    }
    .employment-conditions{
        padding-left: 20px;
        padding-right: 20px;
        width: 95%;
    }
    dl{
        display: block;
    }
    dt{
        margin-bottom: 16px;
    }
    dt:not(:first-child){
        margin-top: 20px;
    }
    dt,dd{
        font-size: 1.6rem;
        width: 100%;
    }
    dd{
        margin-left: 0;
    }
    .dl_img-2{
        position: relative;
    }
    .dl_img-2 .employment-conditions__img{
        width: 62%;
        position: absolute;
        right: -5%;
        bottom: -70%;
        top: unset;
    }
}
.dl-480{
    display: block;
}
.dl_sp-flex{
    display: none;
}
@media (max-width: 480px) {
    .dl_sp-flex{
        display: block;
    }
    .dl-480{
        display: none;
    }
    .dd_sp-flex{
        display: flex;
    }
}
/*magazine*/
.round-gothic__magazine{
    color: #333;
    font-size: 2.4rem;
    text-align: center;
}
.magazine{
    max-width: 960px;
    width: 91.7%;
    margin: auto;
    margin-top: 80px;
    background-color: #FAFAF5;
    border-radius: 10px;
}
.magazine-block{
    padding: 36px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.magazine-item{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 36px;
}
.magazine-item__icon{
    width: 40px;
    height: auto;
    object-fit: contain;
    margin-right: 16px;
}
.magazine-inner{
    width: 50%;
}
.magazine-inner a{
    display: block;
    width: 242px;
    background-color: #E8E240;
    padding: 12px 0;
    margin: auto;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    border-radius: 4px;
    border: 1.5px solid #333;
    box-shadow: 2px 2px 0px 0px #333333;
}
.magazine-inner a.sp-only{
    display: none;
}
.magazine-inner a::before{
    content: '';
    background-image: url(../img/btn-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right: 8px;
    width: 15px;
    height: 15px;
}
.magazine-title{
    margin-left: 36px;
}
.magazine-title__text{
    font-size: 2.4rem;
    font-weight: 700;
    margin-top: 16px;
    line-height: initial;
}
.magazine-inner:nth-child(3){
    margin-left: 10.4%;
}
.line{
    position: absolute;
    height: 80%;
    left: 50%;
    transform: translate(-50%);
}
@media (max-width: 788px) {
    .magazine{
        margin-top: 60px;
    }
    .round-gothic__magazine{
        font-size: 1.8rem;
    }
    .orange{
        font-size: 2.4rem;
    }
    .line{
        display: none;
    }
    .magazine-block{
        display: block;
        padding: 48px 38px;
    }
    .magazine-inner{
        width: 100%;
    }
    .magazine-inner:nth-child(3){
        margin-left: 0;
    }
    .magazine-title{
        margin-left: 0;
    }
    .magazine-title__text{
        font-size: 1.8rem;
    }
    .magazine-item{
        justify-content: center;
    }
    .magazine-item:last-child{
       justify-content: space-between;
    }
    .magazine-img{
        width: 33.8%;
        flex: 1;
        margin-right: 24px;
    }
    .magazine-inner a.pc-only{
        display: none;
    }
    .magazine-inner a.sp-only{
        display: block;
    }
}

/*CTA*/
.cta{
    margin-top: 80px;
    padding: 85px 0;
    text-align: center;
    background-image: url(../img/cta.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%,contain;
    background-position: center;
}
.cta h4{
    color: #fff;
    font-size: 2.8rem;
    font-weight: 700;
}
.cta a{
    width: 360px;
    text-align: center;
    color: #fff;
    background: #E69143;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 36px;
    padding: 23px 0;
    font-size: 2.4rem;
    font-weight: 700;
    border-radius: 8px;
}
.cta a::before{
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    background-image: url(../img/cta-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
}
@media (max-width: 788px) {
    .cta{
        margin-top: 60px;
        padding: 95px 0;
        background-size: 100% 100%,contain;    
    }
    .cta h4{
        font-size: 1.8rem;
    }
    .cta a{
        font-size: 2rem;
        padding: 18px 0;
        width: 300px;
    }
    .cta a::before{
        width: 24px;
        height: 24px;
    }
}

/*footer*/
footer{
    background: #333333;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer ul{
    display: flex;
    padding: 20px 0;
}
.footer-block{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    width: 95%;
    margin: auto;
}
footer ul li a{
    font-size: 1.8rem;
    font-weight: bold;
}
footer ul li:not(:first-child){
    margin-left: 47px;
}
.copyright{
    font-size: 1.2rem;
}
@media (max-width: 788px) {
    .footer-block {
        display: block;
    }
    footer ul{
        justify-content: center;
    }
    footer ul li a{
        font-size: 1.2rem;
    }
    .copyright{
        font-size: 0.8rem;
        text-align: center;
        margin-bottom: 10px;
    }
}
@media (min-width: 2250px) {
    .title-block{
        margin-left: 14%;
    }
}