@charset 'utf-8';

body{
    background: #FCF2F3;
    background: linear-gradient(90deg,rgba(252, 242, 243, 1) 0%, rgba(249, 238, 233, 1) 30%, rgba(235, 250, 253, 1) 100%);
    overflow-x: hidden;
}
img{
    max-width: 100%;
    height: auto;
}

.mb4{margin-bottom: 4px;}
.mb8{margin-bottom: 8px;}
.mb16{margin-bottom: 16px;}
.mb24{margin-bottom: 24px;}
.mb32{margin-bottom: 32px;}
.mb36{margin-bottom: 36px;}
.mb40{margin-bottom: 40px;}
.mb48{margin-bottom: 48px;}
.mb56{margin-bottom: 56px;}
.mb64{margin-bottom: 64px;}
.mb80{margin-bottom: 80px;}
.mb88{margin-bottom: 88px;}
.mb96{margin-bottom: 96px;}
.mb120{margin-bottom: 120px;}
.mb192{margin-bottom: 192px;}

.fs20{font-size: 20px;}
.fs30{font-size: 30px;}
.fs40{font-size: 40px;}

.fw700{font-weight: 700;}

.center{
    text-align: center;
}
.right{
    text-align: right;
}


.container{
    padding: 0 8.3vw;
}
@media screen and (min-width: 1440px) {
    .container{
        padding: 0;
        width: 1200px;
        margin: auto;
    }
}

/* ボタン */
.btn{
    background: url(../img/btn_arrow.svg) no-repeat center right 20px / 13px 9px #EA6161;
    color: #fff!important;
    font-size: 16px;
    min-width: 288px;
    max-width: 100%;
    padding: 19px 0 20px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    transition: 0.3s;
}
.btn:hover{
    letter-spacing: 0.08em;
    background-color: #f88181;
}

/* title */
.title{
    letter-spacing: 0.13em;
}

/* アニメーション */
@keyframes slideInLeft{
    0%{
        transform: translateX(-20px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideInRight{
    0%{
        transform: translateX(20px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fadeIn{
    0%{
        transform: scale(0.95);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes topToBottom{
    0%{
        transform: scale(1) translateY(0);
    }
    50%{
        transform: scale(1) translateY(-20px);
    }
    100%{
        transform: scale(1) translateY(0);
    }
}
@keyframes bottomToTop{
    0%{
        transform: scale(1) translateY(0);
    }
    50%{
        transform: scale(1) translateY(20px);
    }
    100%{
        transform: scale(1) translateY(0);
    }
}
@keyframes fadeInUp{
    0%{
        transform: translateY(20px);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
.animation--slideInLeft{
    transform: translateX(-20px);
    opacity: 0;
}
.animation--slideInLeft.active{
    animation: slideInLeft 0.5s ease-in-out forwards;
}
.animation--slideInRight{
    transform: translateX(20px);
    opacity: 0;
}
.animation--slideInRight.active{
    animation: slideInRight 0.5s ease-in-out forwards;
}
.animation--fadeIn{
    transform: scale(0.95);
    opacity: 0;
}
.animation--fadeIn.active{
    animation: fadeIn 0.5s ease-in-out forwards;
}
.animation--fadeInUp{
    transform: translateY(20px);
    opacity: 0;
}
.animation--fadeInUp.active{
    animation: fadeInUp 0.5s ease-in-out forwards;
}

/* header */
header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 32px;
    box-sizing: border-box;
}
.logo{
    position: relative;
    z-index: 10;
    top: 32px;
    left: 33px;
}

/* ハンバーガーメニュー（ボタン） */
.nav-btn{
    width: 69px;
    height: 69px;
    background: #EA6161;
    border-radius: 50%;
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 10;
    cursor: pointer;
    transition: 0.3s;
}
.nav-btn-line{
    width: 29px;
    height: 3px;
    background: #fff;
    position: absolute;
    left: 20px;
    transition: 0.3s;
}
.nav-btn-line:nth-of-type(1){
    top: 23px;
}
.nav-btn-line:nth-of-type(2){
    top: 33px;
}
.nav-btn-line:nth-of-type(3){
    bottom: 23px;
}
.nav-btn:hover{
    background: #f88181;
}
.nav-btn:hover .nav-btn-line:nth-of-type(1){
    top: 21px;
}
.nav-btn:hover .nav-btn-line:nth-of-type(3){
    bottom: 21px;
}
.nav-btn.active .nav-btn-line:nth-of-type(1){
    transform: rotate(45deg);
    top: 33px;
}
.nav-btn.active .nav-btn-line:nth-of-type(2){
    opacity: 0;
}
.nav-btn.active .nav-btn-line:nth-of-type(3){
    transform: rotate(-45deg);
    bottom: 33px;
}
.nav-btn.active:hover .nav-btn-line:nth-of-type(1){
    transform: rotate(30deg);
    top: 33px;
}
.nav-btn.active:hover .nav-btn-line:nth-of-type(3){
    transform: rotate(-30deg);
    bottom: 33px;
}

/* ハンバーガーメニュー内 */
.nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9;
    display: none;
}
.nav:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid #EA6161;
    box-sizing: border-box;
}
.nav-list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1000px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px;
    text-align: left;
    padding: 0 80px;
    box-sizing: border-box;
}
.nav-list li{
    font-size: 16px;
}
.nav-item img{
    height: 40px;
    width: auto;
}
.nav-item a{
    text-decoration: none;
    color: #3E3E3E;
    transition: 0.3s;
}
.nav-item a:hover{
    color: #EA6161;
}

/* footer */
footer{
    padding: 120px 0 80px;
}
.contact{
    background: #fff;
    width: 752px;
    padding: 40px 0 32px;
    border-radius: 15px;
    margin: 0 auto 60px;
}
.contact__lead{
    font-size: 16px;
}
.contact__tel a{
    text-decoration: none;
    font-size: 33px;
    color: #3353A4;
    padding-left: 40px;
    background: url(../img/tel.svg) no-repeat left center / 33px;
}
.copyright{
    font-size: 12px;
    letter-spacing: 0.1em;
}

/* 下層ページ共通 */
.under{
    padding-top: 152px;
}
.text--medium{
    font-size: 18px;
}
.text--large{
    font-size: 26px;
}
.text--large strong{
    color: #EA6161;
}

/* TOPページ */
.top{
    /*overflow-x: hidden;*/
    background: url(../img/top/bg.png) repeat-y top 120px center / 1710px auto;
}
.top .container{
    padding: 0 3.47vw;
}
@media screen and (min-width: 1440px) {
    .top .container{
        padding: 0;
        width: 1340px;
        margin: auto;
    }
}
.main{
    aspect-ratio: 1360 / 903;
    width: calc(100% - 80px);
    max-width: 1360px;
    height: auto;
    position: relative;
    margin-left: 80px;
    margin-bottom: 158px;
}
@media screen and (min-width: 1455px) {
    .main{
        overflow: unset;
        margin: 0 auto 158px;
    }
}
.mainText{
    position: absolute;
    bottom: 10.7%;
    left: 0;
    width: 100%;
    transform: translateX(-20px);
    opacity: 0;
    animation: slideInLeft 0.5s ease-in-out 0.1s forwards;
}
.mainText__img{
    width: 18%;
    margin-bottom: 3.8%;
}
.mainImg{
    position: absolute;
    transform: scale(0.95);
    opacity: 0;
}
#mainImg1{
    top: -7%;
    left: 28.7%;
    width: 57.3%;
    animation: fadeIn 0.5s ease-in-out 0.6s forwards, bottomToTop 4s ease-in-out 1.1s infinite;
}
#mainImg2{
    top: 18.2%;
    left: 1.5%;
    width: 22%;
    animation: fadeIn 0.5s ease-in-out 0.7s forwards, topToBottom 4.6s ease-in-out 1.1s infinite;  
}
#mainImg3{
    bottom: 0;
    right: 20%;
    width: 22.6%;
    animation: fadeIn 0.5s ease-in-out 0.8s forwards, topToBottom 4.2s ease-in-out 1.1s infinite;
}
#mainImg4{
    top: 14.7%;
    right: -6%;
    width: 24%;
    animation: fadeIn 0.5s ease-in-out 0.9s forwards, bottomToTop 4.4s ease-in-out 1.1s infinite;
}
#mainImg5{
    bottom: 1%;
    left: 24.4%;
    width: 16.6%;
    animation: fadeIn 0.5s ease-in-out 1s forwards, topToBottom 4.8s ease-in-out 1.1s infinite;
}
.topFlexbox{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 3%;
}
.topFlexbox__img{
    width: 55%;
}
.topFlexbox__text{
    width: 37%;
    position: relative;
    z-index: 1;
}
.topFlexbox__text .title img{
    max-width: unset;
}
.topFlexbox:nth-of-type(2n){
    justify-content: flex-end;
}
.topFlexbox:nth-of-type(2n) .topFlexbox__img{
    order: 2;
}
.topFlexbox:nth-of-type(2n) .topFlexbox__text{
    order: 1;
}
.topVoice__flexbox{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.topVoice__flexbox a {
    color: #3E3E3E;
    text-decoration: none;
    opacity: 1;
    transition: 0.3s;
}
.topVoice__flexbox a:hover {
    opacity: 0.7; 
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
}
.topVoice__flexbox a img {
    transition: 0.3s;
}
.topVoice__flexbox a:hover img {
    opacity: 0.7;
}
.topVoice__item{
    width: 337px;
    padding: 0 35px;
    margin-bottom: 116px;
}
.topVoice__career{
    font-size: 17px;
    letter-spacing: 0.13em;
}
.topBenefits{
    aspect-ratio: 1340 / 732;
    position: relative;
    width: 100%;
    height: auto;
}
.topBenefits__textBox{
    padding-left: 73px;
}
@media screen and (max-width: 1200px) {
    .topBenefits__textBox{
        padding-left: 0;
    }
}
.topBenefits__lead{
    max-width: 500px;
}
.topBenefits__item{
    position: absolute;
    width: 20.9%;
}
.topBenefits__img{
    position: relative;
}
.topBenefits__img::before{
    content: '';
    position: absolute;
    top: -5.35%;
    left: -5.35%;
    width: calc(100% + 10.7%);
    height: calc(100% + 10.7%);
    background: url(../img/top/benefit_frame.png) no-repeat center center / contain;
}
#topBenefits1{
    top: 236px;
    left: 1.4%;
}
#topBenefits2{
    top: 54.8%;
    left: 25%;
}
#topBenefits3{
    top: 168px;
    left: 48.7%;
}
#topBenefits4{
    top: -2.5%;
    right: 0;
}
#topBenefits5{
    bottom: 8px;
    right: 0;
}
@media screen and (max-width: 1200px) {
    .topBenefits__text{
        font-size: 15px;
    }
    .topBenefits__img{
        margin-bottom: 16px;
    }
    #topBenefits3{
        left: 52.7%;
    }
}
.topBenefits__text{
    line-height: 1em;
}
.youtube{
    position: relative;
    width: 710px;
    height: 400px;
    margin: auto;
}
.youtube iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 看護部を知る */
.aboutWrapper p{
    letter-spacing: 0.13em;
}
.about__imgBox{
    aspect-ratio: 1126 / 670;
    width: 100%;
    height: auto;
    max-width: 1126px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.about__img{
    position: absolute;
    transform: scale(0.95);
    opacity: 0;
}
#about__img1{
    top: 0;
    left: 0;
    width: 53.3%;
    animation: fadeIn 0.5s ease-in-out 0.1s forwards;
}
#about__img2{
    top: 6%;
    right: 0;
    width: 42.6%;
    animation: fadeIn 0.5s ease-in-out 0.2s forwards;
}
#about__img3{
    right: 7.3%;
    bottom: 0;
    width: 53.3%;
    animation: fadeIn 0.5s ease-in-out 0.3s forwards;
}
.aboutFlexbox{
    display: flex;
    align-items: center;
    gap: 7.5%
}
.about__flexImg{
    width: 51.3%;
}
.about__flexText{
    width: 38%;
}
.aboutFlexbox:nth-child(2n){
    justify-content: flex-end;
}
.aboutFlexbox:nth-child(2n) .about__flexImg{
    order: 2;
}
.aboutFlexbox:nth-child(2n) .about__flexText{
    order: 1;
}

/* 新人教育について */
.mentorFlexbox{
    display: flex;
    gap: 4%;
}
.mentor__flexText{
    width: 51%;
}
.mentor__flexImg{
    width: 45%;
}

/* 数字で知る */
.numberList img:not(.number__ico){
    width: 100%;
    height: auto;
}
.numberList li{
    position: relative;
}
.numberList__top{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 7.6%;
    gap: 9%;
}
.numberList__top > li:first-of-type{
    width: 27%;
}
.numberList__top > li:last-of-type{
    width: 63.5%;
}
.numberList__top--left{
    display: block;
}
.numberList__top--left > li:not(:last-of-type),
.numberList__inner li:not(:last-of-type){
    margin-bottom: 28%;
}
.numberList__top--right{
    display: flex;
    gap: 14.5%;
}
.numberList__bottom{
    display: flex;
    flex-wrap: wrap;
    gap: 9%;
}
.numberList__bottom li{
    margin-bottom: 7.6%;
    width: 27%;
}
.number__ico{
    position: absolute;
    top: 0;
    right: 0;
}
.number__ico1{
    width: calc(103 / 303 * 100%);
    top: calc(32 / 225 * -100%);
    right: calc(30 / 303 * -100%)
}
.number__ico2{
    width: calc(108 / 303 * 100%);
    top: calc(19 / 225 * -100%);
    right: calc(18 / 303 * -100%)
}
.number__ico3{
    width: calc(51 / 303 * 100%);
    top: calc(24 / 225 * -100%);
    right: calc(10 / 303 * 100%)
}
.number__ico4{
    width: calc(108 / 303 * 100%);
    top: calc(19 / 225 * -100%);
    right: calc(18 / 303 * -100%)
}
.number__ico5{
    width: calc(123 / 303 * 100%);
    top: calc(6 / 535 * -100%);
    right: calc(54 / 303 * -100%)
}
/* .number__ico6{
    width: calc(103 / 303 * 100%);
    top: calc(32 / 225 * -100%);
    right: calc(30 / 303 * -100%)
} */
.number__ico7{
    width: calc(94 / 303 * 100%);
    top: calc(17 / 225 * -100%);
    right: calc(13 / 303 * -100%)
}
.number__ico8{
    width: calc(99 / 303 * 100%);
    top: calc(19 / 225 * 100%);
    right: calc(24 / 303 * -100%)
}
.number__ico9{
    width: calc(77 / 303 * 100%);
    top: calc(3 / 225 * -100%);
    right: calc(11 / 303 * -100%)
}
.number__ico10{
    width: calc(109 / 303 * 100%);
    top: calc(1 / 225 * -100%);
    right: calc(14 / 303 * -100%)
}
.number__ico11{
    width: calc(91 / 303 * 100%);
    top: calc(4 / 225 * -100%);
    right: calc(27 / 303 * -100%)
}

/* 先輩の声 */
.voiceWrapper{
    padding: 0 4.2vw;
}
.voice__text{
    font-size: 16px;
    letter-spacing: 0.13em;
}
.voiceFlexbox{
    display: flex;
    flex-wrap: wrap;
    gap: 6.8%;
    padding: 0 2.2vw 84px;
    margin-bottom: 84px;
    border-bottom: 1px dashed #C4C4C4;
}
.voiceFlexbox:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.voice__flexImg{
    width: 33%;
    margin-top: 12px;
    position: relative;
}
.voice__carreer{
    position: absolute;
    top: -12px;
    left: -40px;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    display: table;
}
.voice__carreer--female{
    background: #E88989;
}
.voice__carreer--male{
    background: #49BCD8;
}
.voice__carreer p{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    color: #fff;
    line-height: 1.5;
}
.voice__carreer img{
    width: 100%;
}
.voice__flexText{
    width: 59.9%;
}

/* スタッフに聞く */
.questionList{
    aspect-ratio: 1200 / 996;
    width: 100%;
    height: auto;
    position: relative;
}
.questionList li{
    position: absolute;
    transform: translateY(0) scale(0.95);
    opacity: 0;
}
.questionList li img{
    width: 100%;
    height: auto;
    transition: 0.3s;
}
.questionList li:hover img{
    cursor: pointer;
    transform: translateY(-10px);
}
.questionList li[data-no="01"]{
    width: calc(211 / 1200 * 100%);
    top: calc(-135 / 996 * 100%);
    left: calc(366 / 1200 * 100%);
}
.questionList li[data-no="02"]{
    width: calc(231 / 1200 * 100%);
    top: calc(-167 / 996 * 100%);
    left: calc(757 / 1200 * 100%);
}
.questionList li[data-no="03"]{
    width: calc(228 / 1200 * 100%);
    top: calc(73 / 996 * 100%);
    left: calc(10 / 1200 * 100%);
}
.questionList li[data-no="04"]{
    width: calc(230 / 1200 * 100%);
    top: calc(65 / 996 * 100%);
    left: calc(325 / 1200 * 100%);
}
.questionList li[data-no="05"]{
    width: calc(246 / 1200 * 100%);
    top: calc(63 / 996 * 100%);
    left: calc(845 / 1200 * 100%);
}
.questionList li[data-no="06"]{
    width: calc(240 / 1200 * 100%);
    top: calc(273 / 996 * 100%);
    left: calc(39 / 1200 * 100%);
}
.questionList li[data-no="07"]{
    width: calc(211 / 1200 * 100%);
    top: calc(411 / 996 * 100%);
    left: calc(337 / 1200 * 100%);
}
.questionList li[data-no="08"]{
    width: calc(230 / 1200 * 100%);
    top: calc(215 / 996 * 100%);
    left: calc(538 / 1200 * 100%);
}
.questionList li[data-no="09"]{
    width: calc(207 / 1200 * 100%);
    top: calc(294 / 996 * 100%);
    left: calc(828 / 1200 * 100%);
}
.questionList li[data-no="10"]{
    width: calc(234 / 1200 * 100%);
    bottom: calc(321 / 996 * 100%);
    left: calc(-11 / 1200 * 100%);
}
.questionList li[data-no="11"]{
    width: calc(224 / 1200 * 100%);
    bottom: calc(214 / 996 * 100%);
    left: calc(293 / 1200 * 100%);
}
.questionList li[data-no="12"]{
    width: calc(205 / 1200 * 100%);
    bottom: calc(337 / 996 * 100%);
    left: calc(662 / 1200 * 100%);
}
.questionList li[data-no="13"]{
    width: calc(233 / 1200 * 100%);
    bottom: calc(303 / 996 * 100%);
    left: calc(938 / 1200 * 100%);
}
.questionList li[data-no="14"]{
    width: calc(238 / 1200 * 100%);
    bottom: calc(0 / 996 * 100%);
    left: calc(389 / 1200 * 100%);
}
.questionList li[data-no="15"]{
    width: calc(206 / 1200 * 100%);
    bottom: calc(79 / 996 * 100%);
    left: calc(790 / 1200 * 100%);
}
.questionList.active li[data-no="01"],
.questionList.active li[data-no="06"],
.questionList.active li[data-no="11"]{
    animation: fadeIn 0.5s ease-in-out 0.1s forwards;
}
.questionList.active li[data-no="02"],
.questionList.active li[data-no="07"],
.questionList.active li[data-no="12"]{
    animation: fadeIn 0.5s ease-in-out 0.3s forwards;
}
.questionList.active li[data-no="03"],
.questionList.active li[data-no="08"],
.questionList.active li[data-no="13"]{
    animation: fadeIn 0.5s ease-in-out 0.4s forwards;
}
.questionList.active li[data-no="04"],
.questionList.active li[data-no="09"],
.questionList.active li[data-no="14"]{
    animation: fadeIn 0.5s ease-in-out 0.2s forwards;
}
.questionList.active li[data-no="05"],
.questionList.active li[data-no="10"],
.questionList.active li[data-no="15"]{
    animation: fadeIn 0.5s ease-in-out 0.5s forwards;
} 

/* モーダル */
.modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}
.modal__overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modal__content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 36px 40px;
    border-radius: 16px;
    max-width: 690px;
    box-sizing: border-box;
    width: 90%;
    max-height: 80vh;
    border: 4px solid rgba(229, 111, 144, 0.9);
    letter-spacing: 0.13em;
}
.modal__close{
    width: 47px;
    height: 47px;
    background: #E56F90;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    right: 19px;
    z-index: 10;
    cursor: pointer;
    transition: 0.3s;
}
.modal__close-line{
    width: 23px;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 12px;
    top: 23px;
    transition: 0.3s;
}
.modal__close:hover{
    background: #f88181;
}
.modal__close .modal__close-line:nth-of-type(1){
    transform: rotate(45deg);
}
.modal__close .modal__close-line:nth-of-type(2){
    transform: rotate(-45deg);
}
.modal__close:hover .modal__close-line:nth-of-type(1){
    transform: rotate(30deg);
}
.modal__close:hover .modal__close-line:nth-of-type(2){
    transform: rotate(-30deg);
}
.modal__title{
    font-size: 18px;
    line-height: 1.2;
}
.modal__number{
    font-size: 24px;
}
.modal__body p{
    font-size: 16px;
}