@charset "utf-8";

/* -------------------------------------------------------------------
*
*
*  共通のCSS
*
*
* ---------------------------------------------------------------- */
html{
    font-family: 'YakuHanJP', 'Noto Sans JP', sans-serif, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", "Helvetica", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 62.5%;
    color: var(--textcolor);
    counter-reset: number 0;
    scroll-behavior: smooth;
}

a,a:active,a:focus,a:visited{
    color: inherit;
    text-decoration: none;
    outline: none;
}
/* color_CSS */
:root{
	--maincolor: rgb(255,125,163);

    --pink_01: rgb(255,110,136);
    --pink_02: rgb(239,24,104);

    --blue_01: rgb(13,76,129);
    --blue_02: rgb(63,159,235);

    --green_01: rgb(54,202,199);

    --bg_pink:rgb(255,211,211);
    --bg_blue:rgb(201,241,237);

    --textcolor: rgb(77,77,77);
	--linkcolor: rgb(123,194,230);
	--bordercolor: rgb(220,213,213);
}
/* text_marker */
.y_line {
    background-image: linear-gradient(to right, #ffeeae 50%, transparent 50%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 0 11px;
    font-weight: bold;
}

/* 
    ローディング画面の背景
--------------------------------------------------------------------------*/
#loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    background: #ffd3d3;
    z-index: 9999;
}
#loading.loaded{
    visibility: hidden;
    transition: all 1.5s;
    animation: fadeOut 1s .5s forwards;
}
#loading .loader-inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}
@-webkit-keyframes ball-pulse-sync {
    33% {
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
    }
    66% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  @keyframes ball-pulse-sync {
    33% {
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
    }
    66% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .ball-pulse-sync>div:nth-child(1) {
    -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
    animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  }
  
  .ball-pulse-sync>div:nth-child(2) {
    -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
    animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  }
  
  .ball-pulse-sync>div:nth-child(3) {
    -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
    animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  }
  
  .ball-pulse-sync>div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 6px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
  }

/*  
    CVボタン（SP）
--------------------------------------------------------------------------*/
.cv_area{
    width: 100%;
    padding: 2rem 2rem 1rem;
}
.cv_button{
    position: relative;
    padding-right: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--pink_02);
    line-height: 4;
    border-radius: 10rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFF!important;
    filter: drop-shadow(0 6px 0 #d6b4b4);
    cursor: pointer;
}

.cv_button:hover{
    filter: none;
    top: 6px;
    color: #FFF;
}
.cv_button::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-left: 8px solid white;
    border-bottom: 8px solid transparent;
}
.cv_button span{
    height: 2rem;
    margin-right: 1rem;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    background: #FFF;
    border-radius: 4px;
    font-size: 1.1rem;
    color: var(--pink_02);
}

/*  
    スライダー（SP）
--------------------------------------------------------------------------*/
.slider{
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.slider_item{
    width: 100%;
    margin:2rem 1rem;
    padding: 3rem 2rem;
    box-sizing: border-box;
    border-radius: 2rem;
    /* filter: drop-shadow(0 0 8px #d6b4b4); */
    display: block;
    background: #FFF;
}

.slider .slick-dots li{
    margin: 0 2px;
}
.slider .slick-dots li button:before{
    font-size: 4rem;
    opacity: 1;
}
.slider .slick-dots li button:before{
    color: white;
}
.slider .slick-dots li.slick-active button:before{
    color: var(--pink_01);
}

/* 求人カード*/
.job_card .tag{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.job_card .tag li{
    padding: 0.25rem 0.5rem 0;
    border-radius: 2px;
    font-size: 1.2rem;
    font-weight: bold;
    background: var(--green_01);
    color: #FFF;
    margin-right: 0.5rem;
}
.job_card .tag li.employment{
    background: #DDD;
    color: var(--textcolor);
}
.job_card .tag li.border{
    border: solid 1px var(--pink_01);
    color: var(--pink_01);
    background: none;
    box-sizing: border-box;
}
.job_card .job_img{
    margin-bottom: 2rem;
    border-radius: 4px;
    overflow: hidden;
}
.job_card .job_img img{
    width: 100%;
}
.job_card .title{
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--green_01);
    margin-bottom: 1rem;
}
.job_card p{
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.015rem;
    margin-bottom: 4rem;
}
.job_card .salary{
    background: #DDD;
    padding: 1rem 2rem;
    margin-bottom: 1rem;
    text-align: center;
    border-radius: 4px;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: bold;
}
.job_card .salary strong {
    font-weight: bold;
    color: var(--pink_01);
    margin: 0 0.25rem;
}

/* ユーザーボイス */
.voice_card .user{
    display: flex;
    margin-bottom: 1.5rem;
    align-items: center;
    justify-content: space-around;
}
.voice_card .user .icon{
    width: 25%;
    border-radius: 50%;
}
.voice_card .user .icon img{
    width: 100%;
}
.voice_card .user .text{
    width: 70%;
}
.voice_card .user .text .name{
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var()--textcolor;
}
.voice_card .user .text .workplace{
    background: var(--bg_pink);
    color: var(--pink_01);
    padding: 0.4rem 0.5rem 0.2rem;
    border-radius: 4px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
}

.voice_card .evaluation{
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.voice_card .evaluation span{
    background: #e8e8e8;
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
    margin-top: 0.25rem;
    font-size: 1.1rem;
    font-weight: bold;
}
.voice_card .evaluation .stars{
    display: flex;
    width: 50%;
}
.voice_card .evaluation .stars li{
    width: 20%;
}
.voice_card .evaluation > .point{
    color: var(--pink_02);
    font-weight: bold;
    font-size: 1.4rem;
    padding-top: 0.1rem;
}
.voice_card .title{
    color: Var(--blue_02);
    margin: 2rem 0 1rem;
    font-size: 2.1rem;
    font-weight: 900;
}
.voice_card .comment{
    font-size: 1.4rem;
    line-height: 1.8;
    margin-bottom: 3rem;
    height: 300px;
}
.voice_card > .points{
    background: var(--bg_pink);
    padding: 1rem;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.025rem;
    line-height: 1.2;
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
}
.voice_card > .points span{
    color: var(--pink_01);
    font-size: 1.4rem;
}


/* -------------------------------------------------------------------
*
*
*  479px以下用（スマートフォン用）の記述
*
*
* ---------------------------------------------------------------- */

/*————————————————————————————————————————————————————————————————————————

    header
    
——————————————————————————————————————————————————————————————————————————*/
#header{
    width: 100%;
    border-top: solid 4px var(--pink_01);
}
#header .inner{
    width: 100%;
    padding: 1rem 2rem 1.5rem;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}
#header .inner img{
    width: 40%;
}

/*————————————————————————————————————————————————————————————————————————

    main_visual
    
——————————————————————————————————————————————————————————————————————————*/
#main-visual{
    width: 100%;
    height: 360px;
    background-image: url(../img/mv-bg02_r.png), url(../img/mv-bg02_l.png), url(../img/mv-bg.png);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: 101%, -1%, 0 0;
    background-size: 160px 100%, 160px 100% ,cover;
    animation: 60s linear 0s infinite normal none running bgiLoop;
    position: relative;
}
#main-visual .inner{
    width: 100%;
}

#main-visual .inner .logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
#main-visual .inner .logo.pc{
    max-width: 1000px;
    height: 174px;
}
#main-visual .inner .logo.pc img.sub{
    transform: translateY(-100%);
    opacity: 0;
}
#main-visual .inner .logo.pc img.main{
    transform: translateY(100%);
    opacity: 0;
}
#main-visual.loaded .inner .logo.pc img.sub{
    transform: translateY(0);
    opacity: 1;
    transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) .5s, transform 2s cubic-bezier(0.5, 0, 0, 1) .5s;
}
#main-visual.loaded .inner .logo.pc img.main{
    transform: translateY(0);
    opacity: 1;
    transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 1.5s, transform 2s cubic-bezier(0.5, 0, 0, 1) 1.5s;
}



#main-visual .inner .logo.sp{
    width: 74%;
    max-width: 400px;
    height: auto;
    padding: 20px 0 30px;
    background: #ffffffdd;
    border-radius: 12px;
    box-shadow: 0px 0px 8px rgb(0 0 0 / 12%);
    opacity: 0;
}
#main-visual.loaded .inner .logo.sp{
    opacity: 1;
    transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) .5s;
}

#main-visual .inner .logo.sp img{
    width: 74%;
}


#main-visual .inner .logo.sp::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94%;
    height: 94%;
    border: solid 2px #FFF;
    border-radius: 12px;
}


@keyframes bgiLoop {
    0% { background-position: 101%, -1%, 0 0;}
  100% { background-position: 101%, -1%, -2381px 0;}
}


/*————————————————————————————————————————————————————————————————————————

    index.html
    
——————————————————————————————————————————————————————————————————————————*/

/*  
    ページ全体のCSS（SP）
--------------------------------------------------------------------------*/

#wraper{
    width: 100%;
}
section{
    padding: 6rem 0 4rem;
}
section > .inner{
    width: 100%;
    padding: 0 2rem;
}

/*  
    各セクションの見出しの装飾（SP）
--------------------------------------------------------------------------*/
section > .inner h2.heading{
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
section > .inner h2 .heading_sub{
    margin-bottom: 1rem;
    height: 2.4rem;
}
section > .inner h2 .heading_main{
    width: 90%;
}

/*  
    セクションの区切り波線（SP）
--------------------------------------------------------------------------*/
.bg_wave_container {
    padding: 8rem 0;
    background-image: url(../img/bg_wave_top_white_sp.svg),
    url(../img/bg_wave_bottom_white_sp.svg);
    background-size: 120%;
    background-position: 50% -0.1%, 50% 100.1%;
    background-repeat: no-repeat;
    position: relative;
}
.bg_wave_container02 {
    padding: 10rem 0;
    background-image: url(../img/bg_wave_top02_white_sp.svg),
    url(../img/bg_wave_bottom02_white_sp.svg);
    background-size: 120%;
    background-position: 50% -0.1%, 50% 100.1%;
    background-repeat: no-repeat;
    position: relative;
}



/*  
    求人のご紹介（SP）
--------------------------------------------------------------------------*/
#job_offer_introduction{
    background-color: var(--bg_pink);
}
#job_offer_introduction .caption{
    margin-top: 5rem;
    padding: 0 1rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--pink_01);
}
#job_offer_introduction .inner .card_container{
    display: none;
}

/*  
    マイナビ看護師の4つの特徴（SP）
--------------------------------------------------------------------------*/
#feature > .inner{
    padding: 0 3rem;
}
#feature .card{
    margin-bottom: 6rem;
    width: 100%;
    position: relative;
}
#feature .card:last-of-type{
    margin-bottom: 0;
}
#feature .card .card_img{
    margin-bottom: 5rem;
    width: 100%;
    height: 200px;
    border: solid 1px var(--bordercolor);
    border-radius: 1rem;
    box-sizing: border-box;
    overflow: hidden;
}
#feature .card .card_img img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center center;
}
#feature .card.card_yuryo .card_img img{
    object-fit: contain;
    width: 35%;
    margin: 0 auto;
    display: block;
}
#feature .card h3{
    margin-bottom: 1.5rem;
    font-size: 3.4rem;
    font-weight: 600;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}
#feature .card h3::before{
    content: url(../img/feature_sub_title.svg);
    position: absolute;
    top: -4rem;
    left: 0;
    width: 45%;
}
#feature .card .card_text{
    font-size: 1.6rem;
    line-height: 2;
    position: relative;
    z-index: 1;
}
#feature .card .number{
    position: absolute;
    width: 40%;
    top: 22.5rem;
    right: 0;
    z-index: 0;
}

/*  
    ご利用者の声（SP）
--------------------------------------------------------------------------*/
#user_voice{
    background-color: Var(--bg_blue);
}


/*  
    アドバイザーについて（SP）
--------------------------------------------------------------------------*/
#adviser > .inner{
    padding: 0 3rem;
}
#adviser .card{
    margin-bottom: 6rem;
}
#adviser .card:last-child{
    margin-bottom: 0;
}
#adviser .card .card_img{
    margin-bottom: 2rem;
    width: 100%;
    height: 220px;
    border: solid 1px var(--bordercolor);
    border-radius: 1rem;
    box-sizing: border-box;
    overflow: hidden;
}
#adviser .card .card_img img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
}
#adviser .card h3{
    font-size: 2.4rem;
    line-height: 1.4;
    color: var(--pink_01);
    margin-bottom: 0.5rem;
}
#adviser .card .card_text{
    font-size: 1.6rem;
    line-height: 2;
}



/*
    マイナビ看護師ご利用の流れ（SP）
--------------------------------------------------------------------------*/
#service_flow{
    background-color: var(--bg_pink);
}

#service_flow .flow_container{
    position: relative;
}
#service_flow .flow_container .flow_container_item,
#service_flow .flow_container_pc .flow_container_item{
    background: #fff;
    border-radius: 2rem;
    margin-bottom: 5rem;
    padding: 2.4rem;
    position: relative;
    display: flex;
    filter: drop-shadow(0 0 12px #d6b4b4);
}
#service_flow .flow_container .flow_container_item::after{
    content: url(../img/arrow.svg);
    position: absolute;
    bottom: -4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4rem;
}
#service_flow .flow_container .flow_container_item:last-child:after{
    content: '';   
}
#service_flow .flow_container .flow_container_item .text,
#service_flow .flow_container_pc .flow_container_item .text{
    width: 70%;
    position: relative;
    z-index: 1;
}
#service_flow .flow_container .flow_container_item .text .step,
#service_flow .flow_container_pc .flow_container_item .text .step{
    width: 7rem;
}
#service_flow .flow_container .flow_container_item .text h3,
#service_flow .flow_container_pc .flow_container_item .text h3{
    font-size: 2.6rem;
    line-height: 1.25;
    color: var(--blue_01);
    margin: 0.25rem 0 1rem;
}
#service_flow .flow_container .flow_container_item .text p,
#service_flow .flow_container_pc .flow_container_item .text p{
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    padding-right: 3rem
}
#service_flow .flow_container .flow_container_item .img,
#service_flow .flow_container_pc .flow_container_item .img{
    width: 36%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}
#service_flow .flow_container .flow_container_item .img img,
#service_flow .flow_container_pc .flow_container_item .img img{
    width: 100%
}


/*
    看護師転職サポートブックプレゼント（SP）
--------------------------------------------------------------------------*/
#present .card{
    background-color: var(--bg_pink);
    margin: 1rem 0 2rem;
    padding: 2rem;
    border-radius: 2rem;
}
#present .card h3{
    width: 90%;
    margin: 0 auto 1rem;
}
#present .card .img_area{
    background: #FFF;
    margin-bottom: 1rem;
    padding: 2rem;
    border-radius: 1rem;
}
#present .card .img_area img{
    width: 100%;
}
#present .sub_text{
    font-size: 1.2rem;
    line-height: 1.5;
    color: Var(--pink_01);
}


/*————————————————————————————————————————————————————————————————————————

    footer
    
——————————————————————————————————————————————————————————————————————————*/
footer{
    background: var(--bg_pink);
    position: relative;
    margin-top: 6rem;
}
footer .inner{
    padding: 4rem 2rem 2rem;
}
footer .inner .mark_containar{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}
footer .inner .mark_containar .item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 1rem 1rem 1rem 1.5rem;
    background: #FFF;
    border-radius: 1rem;
    margin-bottom: 2rem;
}
footer .inner .mark_containar .item:last-child{
    margin-bottom: 0;

}
footer .inner .mark_containar .item img{
    width: 5rem;
}
footer .inner .mark_containar .item .text{
    width: 75%;
    padding: 0;
}
footer .inner .mark_containar .item .text h3{
    font-size: 1.4rem;
    margin: 0 0 0.25rem;
    color: var(--pink_01);
}
footer .inner .mark_containar .item .text h4{
    font-size: 1.2rem;
    margin: 0 0 0.2rem;
}
footer .inner .mark_containar .item .text p{
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}
footer .inner dl{
    background: #FFF;
    color: var(--pink_01);
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2rem;
    line-height: 1.5;
}
footer .inner dl dd{
    width: 80%;
}
footer a.top_btn{
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 6rem;
    background: var(--pink_01);
    border-radius: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFF;
}
footer .link{
    display: flex;
    justify-content: space-around;
}
footer .link a{
    color: #780045;
    text-decoration: underline;
}
footer p.copyright{
    margin-top: 2rem;
    line-height: 4;
    background: var(--pink_01);
    color: #FFF;
    text-align: center;
    padding-bottom: 8rem;
}
/*  
    固定CVボタン（SP）
--------------------------------------------------------------------------*/
.footer_cv{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #00000070;
    z-index: 50;
    opacity: 0;
    transition: .5s;
}
.footer_cv.active{
    opacity: 1;
}
.footer_cv .inner{
    padding: 1rem 2rem;
}
.footer_cv .inner .cv_button{
    filter: none;
}
.footer_cv .inner .cv_button:hover{
    top: 0;
}


/* -------------------------------------------------------------------
*
*
*  480px以上用（タブレット／スマートフォン用）の記述
*
*
* ---------------------------------------------------------------- */
@media screen and (min-width: 480px) {
    
}


/* -------------------------------------------------------------------
*
*
*  768px以上用（タブレット用）の記述
*
*
* ---------------------------------------------------------------- */
@media screen and (min-width: 768px) {

}

/* -------------------------------------------------------------------
*
*
*  980px以上用（PC用）の記述
*
*
* ---------------------------------------------------------------- */
@media screen and (min-width: 980px) {

    /*  
        CVボタン（PC）
    --------------------------------------------------------------------------*/
    .cv_area{
        padding: 4rem 0;
    }
    .cv_button{
        width: 640px;
        margin: 0 auto;
    }

    /*————————————————————————————————————————————————————————————————————————

        header（PC）
        
    ——————————————————————————————————————————————————————————————————————————*/
    #header .inner{
        width: 100%;
        max-width: 1080px;
        min-width: 960px;
        margin: 0 auto;
        justify-content: space-between;
    }
    #header .inner img{
        width: 200px;
    }
    #header .inner .message{
        font-size: 1.5rem;
        letter-spacing: 0.25rem;
        line-height: 1;
    }

    /*————————————————————————————————————————————————————————————————————————

        main_visual（PC）
        
    ——————————————————————————————————————————————————————————————————————————*/
    #main-visual{
        width: 100%;
        height: 40vw;
        max-height: 640px;
        background-size: 90px 100%, 90px 100% ,cover;
    }

    /*————————————————————————————————————————————————————————————————————————

        index.html（PC）
        
    ——————————————————————————————————————————————————————————————————————————*/

    /*  
        ページ全体のCSS（PC）
    --------------------------------------------------------------------------*/
    section{
        padding: 4rem 0;
    }
    section > .inner{
        width: 100%;
        max-width: 1080px;
        min-width: 960px;
        margin: 0 auto;
    }

    /*  
        各セクションの見出しの装飾（PC）
    --------------------------------------------------------------------------*/
    section > .inner h2.heading{
        width: 100%;
        margin-bottom: 4rem;

    }
    section > .inner h2 .heading_sub{
        margin-bottom: 1.5rem;
        height: 3rem;
    }
    section > .inner h2 .heading_main{
        width: 60%;
    }

    /*  
        セクションの区切り波線（PC）
    --------------------------------------------------------------------------*/
    .bg_wave_container {
        padding: 20rem 0;
        background-image: url(../img/bg_wave_top_white_pc.svg),
        url(../img/bg_wave_bottom_white_pc.svg);
    }
    .bg_wave_container02 {
        padding: 16rem 0 10rem;
        background-image: url(../img/bg_wave_top02_white_pc.svg),
        url(../img/bg_wave_bottom02_white_pc.svg);
    }
    #job_offer_introduction.bg_wave_container{
        padding: 8rem 0 24rem;
        background-image: url(../img/bg_wave_bottom03_white_pc.svg);
        background-size: 120%;
        background-position: 50% 100.1%;
    }
    #user_voice.bg_wave_container{
        margin: -6rem 0 0;
    }

    /*  
        求人のご紹介（PC）
    --------------------------------------------------------------------------*/
    #job_offer_introduction .inner .slider{
        display: none;
    }
    #job_offer_introduction .inner .card_container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #job_offer_introduction .inner .card_container .job_card{
        width: 30%;
    }
    #job_offer_introduction .caption{
        margin-top: 3rem;
        font-size: 1.4rem;
        text-align: center;
    }

    
    /*  
        マイナビ看護師の4つの特徴（PC）
    --------------------------------------------------------------------------*/
    #feature{
        padding: 0;
        margin: -4rem 0 0;
        z-index: 1;
        position: relative;
    }
    #feature > .inner{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 6rem;
    }
    #feature .card{
        width: 420px;
    }
    #feature .card:last-child{
        margin-bottom: 6rem;
    }
    #feature .card .card_img{
        height: 230px;
        margin-bottom: 6rem;
    }
    #feature .card .card_img img{
        height: 230px;
    }
    #feature .card h3{
        margin-bottom: 2rem;
    }
    #feature .card .card_text{
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
        line-height: 1.8;
    }
    #feature .card .number {
        width: 36%;
        top: 26rem;
    }

    /*  
        ご利用者の声（PC）
    --------------------------------------------------------------------------*/
    #user_voice .inner{
        overflow: hidden;
    }
    #user_voice .inner .slider{
        width: 100%;
        max-width: 1080px;
        min-width: 960px;
    }

    #user_voice .inner .card_container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #user_voice .inner .card_container .voice_card{
        width: 30%;
    }
    #user_voice .voice_card .comment{
        height: 170px;
    }

    /* slider */
    .slide-arrow{
        position: absolute;
        top: 50%;
        margin-top: -15px;
        width: 40px;
        height: 40px;
    }
    .prev-arrow{
        left: -50px;
    }
    .next-arrow{
        right: -50px;
    }

    /*  
        アドバイザーについて（PC）
    --------------------------------------------------------------------------*/
    #adviser{
        padding: 4rem 0 0;
        margin: -4rem 0 0;
    }
    #adviser > .inner{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #adviser .card{
        width: 300px;
        margin: 0;
    }
    #adviser .card .card_img{
        height: 200px;
    }
    #adviser .card h3{
        font-size: 2.2rem;
    }

    
    /*
        マイナビ看護師ご利用の流れ（PC）
    --------------------------------------------------------------------------*/
    #service_flow > .inner{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    #service_flow .flow_container{
        display: none;
    }
    #service_flow .flow_container_pc{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 4rem;
    }
    #service_flow .flow_container_pc .flow_container_item{
        width: 30%;
        margin-bottom: 12rem;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
    }
    #service_flow .flow_container_pc .flow_container_item::after{
        content: url(../img/arrow.svg);
        position: absolute;
        top: 50%;
        right: -3rem;
        transform: translateY(-50%) rotate(-90deg);
        width: 4rem;
    }
    #service_flow .flow_container_pc .flow_container_item:nth-child(3)::after{
        content: url(../img/arrow02.svg);
        position: absolute;
        top: auto;
        bottom: -10rem;
        left: -70%;
        transform: translateX(-50%) rotate(0deg);
        width: 700px;
    }
    #service_flow .flow_container_pc .flow_container_item:last-child::after{
        content: '';   
    }
    #service_flow .flow_container_pc .flow_container_item .text{
        width: 100%;
    }
    #service_flow .flow_container_pc .flow_container_item .text h3{
        font-size: 2.4rem;
        margin-bottom: 0.5rem;
    }
    #service_flow .flow_container_pc .flow_container_item .text p{
        font-size: 1.2rem;
        padding: 0;
    }
    #service_flow .flow_container_pc .flow_container_item .img{
        width: 80%;
        margin-bottom: 1rem;
        position: relative;
        top: auto;
        right: auto;
        transform: none;
    }

    

    /*
        看護師転職サポートブックプレゼント（PC）
    --------------------------------------------------------------------------*/
    #present .fukidashi{
        display: block;
        width: 480px;
        margin: 0 auto 3rem;
    }
    #present .pc_title{
        display: block;
        width: 640px;
        margin: 0 auto 4rem;
    }
    #present .img_area{
        position: relative;
        width: 700px;
        margin: 0 auto 6rem;
    }
    #present .img_area .circle{
        width: 28%;
        position: absolute;
        top: -20px;
        right: -20px;
    }
    #present .img_area img{
        width: 100%;
    }
    #present .cv_button{
        width: 480px;
        margin: 0 auto;
    }
    #present p.sub_text{
        font-size: 1.4rem;
        line-height: 1.5;
        color: var(--textcolor);
        margin-bottom: 4rem;
        text-align: center;
    }


    /*————————————————————————————————————————————————————————————————————————

        footer
        
    ——————————————————————————————————————————————————————————————————————————*/
    footer{
        background: #FFF;
        margin-top: 0;
        margin-bottom: 8rem;
    }
    footer .inner{
        width: 100%;
        max-width: 1080px;
        min-width: 960px;
        margin: 0 auto;
    }
    footer .inner .mark_containar{
        border: solid 4px #efefef;
        padding: 2rem;
        box-sizing: border-box;
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    footer .inner .mark_containar .item{
        margin: 0;
    }
    footer .inner .mark_containar .item .text{
        width: 80%;
    }
    footer .inner .mark_containar .item .text h3{
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    footer .inner .mark_containar .item .text h4{
        font-size: 1.6rem;
    }
    footer .inner .mark_containar .item .text p{
        font-size: 1.2rem;
    }
    footer .inner dl{
        width: 90%;
        margin: 0 auto;
        justify-content: center;
    }
    footer .inner dl dd{
        width: 90%;
    }
    footer .link{
        border-top: solid 4px #ff6e88;
        margin: 0 auto;
        padding-top: 1rem;
        font-size: 1.4rem;
        justify-content: center;
    }
    footer .link a{
        padding: 0 1rem;
        color: var(--textcolor);
    }
    footer p.copyright{
        background: #FFF;
        color: var(--textcolor);
        font-size: 1.2rem;
        margin-top: 1rem;
        padding-bottom: 0;
    }

    footer a.top_btn{
        display: none;
    }


    
}







/* -------------------------------------------------------------------
*
*
*  PC・SP表示切替 
*
*
* ---------------------------------------------------------------- */
.sp{
    display: block;
}
.pc{
    display: none;
}

@media screen and (min-width: 980px) {
    .sp{
        display: none;
    }
    .pc{
        display: block;
    }
}