/*------------------------------------------------------------
common
------------------------------------------------------------*/
body {
    font-family: 'Noto Sans JP', 'Century Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック体, YuGothic, "Yu Gothic Medium", 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
}

#jobs .futura-sb {
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-style: normal;
}


#jobs {
    font-size: 13px;
    font-weight: 500;
    color: #5E5F5F;
    overflow: hidden;
    background: #fff;
    position: relative;
    line-height: 1.6;
}

#jobs * {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

#jobs a {
    transition: opacity .3s;
}

#jobs a[href^="tel:"] {
    display: inline-block;
    transition: none;
}

#jobs a:hover {
    text-decoration: none;
}

#jobs a:focus-visible {
    outline: none;
}

#jobs img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

#jobs .js-fadein {
    opacity: 0;
    transform: translate(0, 20px);
    transition-property: opacity, transform;
    transition-duration: 1s;
}

#jobs .scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}

#jobs .pc-br {
    display: block;
}

#jobs .sp-br {
    display: none;
}

#jobs .inner {
    width: 100%;
    max-width: 1224px;
    margin: 0 auto;
    padding: 0 12px;
}

#jobs .purple {
    color: #6969D1;
}
#jobs .green {
    color: #5DC6C9;
}
#jobs .orange {
    color: #F19169;
}
#jobs {
    background: #F5F5F5;
    padding: 125px 0px 100px;
}

#jobs .flex {
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
}
#jobs  .inner-list {
    margin-bottom: min(150px, 12.5vw);
}

#jobs .item-list {
    width: calc(100% / 3 - min(20px, 1.67vw));
    height: min(100px, 8.33vw);
    position: relative;
    font-size: min(20px, 1.67vw);
    font-weight: 500;
    color: #FFAC2F;
    transition: 1s; 
}

#jobs .item-list .icon-01 {
    position: absolute;
    top: min(10px, 0.83vw);
    left: min(40px, 3.33vw);
}
#jobs .item-list .icon-arow {
    position: absolute;
    top: min(35px, 2.92vw);
    right: min(30px, 2.5vw);
    transition: transform 0.5s ease; 
}
#jobs .item-list:hover .icon-arow  {
    transform: translateY(min(5px, 0.42vw));
}

#jobs .item-list a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: min(60px, 5vw);
    background: white;
}
#jobs .item-list:nth-child(1) a{
    padding-left: min(163px, 13.58vw);
    border: min(2px, 0.17vw) solid #F08558;
    color: #F08558;
    padding-top: min(35px, 2.92vw);
}
#jobs .item-list:nth-child(2) a{
    padding-left: min(113px, 9.42vw);
    border: min(2px, 0.17vw) solid #6969D1;
    color: #6969D1;
    padding-top: min(35px, 2.92vw);
}
#jobs .item-list:nth-child(3) a{
    padding-left: min(117px, 9.75vw);
    border: min(2px, 0.17vw) solid #5DC6C9;
    color: #5DC6C9;
    padding-top: min(21px, 1.75vw);
}
#jobs .item-list:nth-child(1):hover a{
    background: #FDF3EE;
}
#jobs .item-list:nth-child(2):hover a{
    background: #EEEEF9;
}
#jobs .item-list:nth-child(3):hover a{
    background: #EFF9FA;
}

#jobs .item-list:nth-child(1) .icon-01  {
    position: absolute;
    top: min(20px, 1.67vw);
    left: min(95px, 7.92vw);
}
#jobs .item-list:nth-child(2) .icon-01  {
    position: absolute;
    top: min(20px, 1.67vw);
    left: min(45px, 3.75vw);
}
#jobs .item-list:nth-child(3) .icon-01  {
    position: absolute;
    top: min(20px, 1.67vw);
    left: min(39px, 3.25vw);
}

#jobs .item-list .text-link {
    line-height: 1.4;
}

#jobs  .block-content {
    border-radius: min(50px, 4.17vw);
    background: white;
    padding: min(80px, 6.67vw) min(60px, 5vw);
    margin-bottom: min(82px, 6.83vw);
}

#jobs  .block-content .title-page {
    text-align: center;
    margin-bottom: min(20px, 1.67vw);
}

#jobs  .block-content .title-page .icon-title{
  width: 40px;
  margin: 0 auto;
}

#jobs  .block-content .title-page .text-title {
    font-size: min(30px, 2.5vw);
    line-height: 1.8;
    margin-top: max(-5px, -0.42vw);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
}

#jobs  .block-content .content-item {
    padding: min(58px, 4.83vw) 0 min(60px, 5vw);
    border: none; 
    border-bottom: min(2px, 0.17vw) dashed #ccc
}
#jobs  .block-content .content-item.last {
    padding-bottom: 0px;
    border-bottom:none
}

#jobs  .block-content .box-img {
   width: min(280px, 23.33vw);
}

#jobs  .block-content .dl-content {
    width: calc(100% - min(280px, 23.33vw));
    padding-left: min(60px, 5vw);
}
 
#jobs  .block-content .dt-content {
    font-size: min(24px, 2.17vw);
    position: relative;
    font-weight: 500;
    margin-bottom: min(49px, 4.08vw);
    font-family: "Zen Kaku Gothic New", sans-serif;
}
#jobs  .block-content .dt-content::after {
    position: absolute;
    content: "";
    background: #C2C1C1;
    width: min(8px, 0.67vw);
    height: min(8px, 0.67vw);
    left: 0px;
    bottom: max(-20px, -1.67vw);
    z-index: 9;
    border-radius: 50%;
}
#jobs  .block-content .dt-content::before {
    position: absolute;
    content: "";
    background: #5E5F5F;
    width: min(8px, 0.67vw);
    height: min(8px, 0.67vw);
    left: min(18px, 1.5vw);
    bottom: max(-20px, -1.67vw);
    z-index: 9;
    border-radius: 50%;
}

#jobs  .block-content .dd-content {
    font-size: min(18px, 1.5vw);
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: min(30px, 2.5vw);
}

#jobs  .block-content .dd-link {
    position: relative;
    width: min(275px, 22.92vw);
    height: min(50px, 4.17vw);
    line-height: min(46px, 3.83vw);
}
#jobs  .block-content .dd-link a {
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    padding-left: min(30px, 2.5vw);
    font-size: min(18px, 1.5vw);
    border: min(2px, 0.17vw) solid #F19169;
    border-radius: min(30px, 2.5vw);
    transition: 0.5s;
}
#jobs  .block-content .dd-link a.two {
    border: min(2px, 0.17vw) solid #6969D1
}
#jobs  .block-content .dd-link a.three {
    border: min(2px, 0.17vw) solid #5DC6C9
}

#jobs  .block-content .dd-link:hover a{
    background: #F19169;
    color: white;
}
#jobs  .block-content .dd-link:hover a.two{
    background: #6969D1;
}
#jobs  .block-content .dd-link:hover a.three{
    background: #5DC6C9;
}

#jobs  .block-content .dd-link svg {
    transition: transform 0.5s ease; 
}
#jobs  .block-content .dd-link:hover svg {
    transform: translateX(min(3px, 0.25vw));
}
#jobs  .block-content .dd-link:hover path{
    stroke: #fff;
}

#jobs  .block-content .dd-link .arow02 {
    position: absolute;
    right: min(33px, 2.75vw);
    top: min(3px, 0.25vw);
}


#jobs .item-list .icon-01 svg {
    width: min(60px, 5vw);
}





 @media print,
screen and (max-width: 1100px) {

    #jobs .item-list:nth-child(1) .icon-01 {
        top: min(12px, 1.17vw);
    }
    #jobs .item-list:nth-child(2) .icon-01 {
        top: min(13px, 1.27vw);
        left: min(30px, 3.75vw);
    }
    #jobs .item-list:nth-child(3) .icon-01 {
        top: min(12px, 1.17vw);
    }

} 


@media print,
screen and (max-width: 900px) {

    #jobs .item-list:nth-child(1) .icon-01 {
        top: 4px;
    }
    #jobs .item-list:nth-child(2) .icon-01 {
        top:5px;
      
    }
    #jobs .item-list:nth-child(3) .icon-01 {
        top: 4px;
    }

} 




@media print,
screen and (max-width: 767px) {

    #jobs .sp-br {
        display: block;
    }
    
    #jobs .pc-br {
        display: none;
    }
    #jobs .item-list {
        width: 100%;
    }
    #jobs .block-content .dl-content {
        width: 100%;
        padding-left: 0;
    }
    #jobs .block-content {
        border-radius: min(30px, 8vw);
        background: white;
        padding: min(35px, 9.33vw) min(17px, 4.53vw) min(35px, 9.33vw) min(20px, 5.33vw);
        margin-bottom: min(42px, 11.2vw);
        text-align: justify;
    }
    #jobs .item-list {
        width: min(300px, 80vw);
        height: min(75px, 20vw);
        font-size: min(18px, 4.8vw);
        margin: auto;
        margin-bottom: min(15px, 4vw);
    }
    #jobs {
        background: #F5F5F5;
        padding: min(63px, 16.8vw) 0 min(30px, 8vw);
    }
    
    #jobs .item-list:nth-child(1) .icon-01 svg {
        width: min(30px, 8vw);
    }
    #jobs .item-list:nth-child(1) a {
        padding-left: min(128px, 34.13vw);
        border: 1px solid #FFAC2F;
        padding-top: min(24px, 6.4vw);
    }
    #jobs .item-list a {
        border-radius: min(50px,13.33vw)
    }
    #jobs .item-list:nth-child(1) .icon-01 {
        top: min(7px, 1.87vw);
        left: min(89px, 23.73vw);
    }
    #jobs .item-list .icon-arow svg {
        width: min(13px, 3.47vw);
    }
    #jobs .item-list .icon-arow {
        top: min(25px, 6.67vw);
        right: min(29px, 7.73vw);
    }
    #jobs .item-list:nth-child(2) a {
        padding-left: min(80px, 21.33vw);
        border: 1px solid #6969D1;
        color: #6969D1;
        padding-top: min(23px, 6.13vw);
    }
    #jobs .item-list:nth-child(3) a {
        padding-left: min(83px, 22.13vw);
        border: 1px solid #5DC6C9;
        color: #5DC6C9;
        padding-top: min(13px, 3.47vw);
    }
    #jobs .item-list .text-link {
        line-height: 1.3;
    }
    #jobs .item-list:nth-child(2) .icon-01 svg {
        width: min(30px, 8vw);
    }
    #jobs .item-list:nth-child(3) .icon-01 svg {
        width: min(35px, 9.33vw);
    }
    #jobs .item-list:nth-child(2) .icon-01 {
        position: absolute;
        top: min(7px, 1.87vw);
        left: min(47px, 12.53vw);
    }
    #jobs .item-list:nth-child(3) .icon-01 {
        position: absolute;
        top: min(8px, 2.13vw);
        left: min(42px, 11.2vw);
    }
    #jobs .inner-list {
        margin-bottom: min(60px, 16vw);
    }
    #jobs .inner {
        padding: 0 min(17px, 4.53vw);
    }
    #jobs .block-content .title-page svg {
        width: min(30px, 8vw);
    }
    #jobs  .block-content .title-page .icon-title{
      width: 40px;
      margin-bottom: 10px;
    }
    #jobs .block-content .title-page .text-title {
        font-size: min(20px, 5.33vw);
        line-height: 1.8;
        margin-top: min(-10px, -2.67vw);
    }
    #jobs .block-content .box-img {
        width: min(200px, 53.33vw);
        margin: auto;
        margin-bottom: min(10px, 2.67vw);
    }
    #jobs .block-content .dt-content {
        font-size: min(18px, 4.8vw);
        position: relative;
        font-weight: 700;
        margin-bottom: min(20px, 5.33vw);
        text-align: center;
    }
    #jobs .block-content .dd-content {
        font-size: min(14px, 3.73vw);
        line-height: 1.8;
        font-weight: 500;
        margin-bottom: min(13px, 3.47vw);
    }
    #jobs .block-content .dd-link {
        position: relative;
        width: min(250px, 66.67vw);
        height: min(40px, 10.67vw);
        line-height: min(38px, 10.67vw);
        margin: auto;
    }
    #jobs .block-content .dd-link a {
        padding-left: min(42px, 11.2vw);
        font-size: min(13px, 3.47vw);
        border: 1px solid #F19169;
        border-radius: min(40px, 10.67vw);
        transition: 0.5s;
    }
    #jobs .block-content .dd-link .arow02 {
        right: min(47px, 12.53vw);
        top: min(2px, 0.8vw);
    }
    
    #jobs .block-content .dt-content::after {
        width: min(5px, 1.33vw);
        height: min(5px, 1.33vw);
        left: calc(50% - min(8px, 2.13vw));
        bottom: min(-10px, -2.67vw);
    }
    #jobs .block-content .dt-content::before {
        width: min(5px, 1.33vw);
        height: min(5px, 1.33vw);
        left: calc(50% + min(3px, 0.8vw));
        bottom: min(-10px, -2.67vw);
    }
    #jobs .block-content .content-item {
        padding: min(40px, 10.67vw) 0 min(40px, 10.67vw);
        border-bottom: 1px dashed #ccc;
    }
    #jobs .block-content .title-page {
        margin-bottom: min(-10px, -2.67vw);
    }



    
}




@media print,
screen and (max-width: 370px) {

    #jobs .item-list:nth-child(1) .icon-01, 
    #jobs .item-list:nth-child(2) .icon-01,
    #jobs .item-list:nth-child(3) .icon-01
    {
        top: 2px;
    }

}



/*--------- #titlebannerpage-------- */

#banner-page img {
    width: 100%;
  }
  #banner-page {
    position: relative;
  }
  #banner-page .title-banner {
    position: absolute;
    left: 0px;
    bottom: -5px;
    width: 100%;
  }
  
  #banner-page .title-banner .inner-banner {
    max-width: min(90vw, 1200px);
    margin: auto;
    position: relative;
    z-index: 99;
  }
  
  #banner-page .title-banner .inner-banner::after {
    position: absolute;
    content: "";
    background: #F5F5F5;
    width: min(28.13vw, 540px);
    height: min(7.29vw, 140px);
    left: max(-3.13vw, -60px);
    top: max(-1.93vw, -37px);
    z-index: -1;
    border-top-right-radius: min(3.13vw, 60px);
    border-top-left-radius: min(3.13vw, 60px);
  }
  #banner-page  .mv-slider {
    padding: min(2.34vw, 45px) min(3.13vw, 60px) 0px min(3.13vw, 60px);
    background: #F5F5F5;
  }
  
  #banner-page  .mv-slide {
    border-radius: 40px;
    overflow: hidden;
  
  }
  
  #banner-page .futura-sb {
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  
  
  #banner-page .mv-title-jp {
    font-size: min(2.4vw, 46px);
    color: #2C4198;
    font-weight: 500;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #5E5F5F;
    line-height: min(3.91vw, 75px);
    padding-left: min(2.08vw, 40px);
  }
  #banner-page .mv-title-en {
    font-size: min(1.35vw, 26px);
    color: #2C4198;
    font-weight: 500;
    color: #EB779E;
    position: relative;
    padding-left: min(4.38vw, 84px);
    line-height: min(1.72vw, 33px);
  }
  
  #banner-page .mv-title-en::after {
    position: absolute;
    content: "";
    background: #C2C1C1;
    width: min(0.42vw, 8px);
    height: min(0.42vw, 8px);
    left: min(2.29vw, 44px);
    top: min(0.78vw, 15px);
    z-index: 9;
    border-radius: 50%
  }
  #banner-page .mv-title-en::before {
    position: absolute;
    content: "";
    background: #5E5F5F;
    width: min(0.42vw, 8px);
    height: min(0.42vw, 8px);
    left: min(3.23vw, 62px);
    top: min(0.78vw, 15px);
    z-index: 9;
    border-radius: 50%
  }
  
  
  
  @media (max-width: 768px) { 
  
    #banner-page .mv-title-jp {
        font-size: 27px;
        line-height: 19px;
        padding-left: 9px;
        letter-spacing: 0px;
    }
    #banner-page .mv-title-en {
        font-size: 16px;
        margin-top: 2px;
        letter-spacing: 0px;
        line-height: 33px;
        padding-left: 31px;
    }
    #banner-page .title-banner {
        position: absolute;
        left: 40px;
        bottom: 8px;
        top: unset;
        width: auto;
    }
  
    #banner-page .mv-slider {
        padding: 22px 15px 0px;
        background: #F5F5F5;
    } 
    #banner-page .mv-slide {
        border-radius: 20px;
        overflow: hidden;
    }
    #banner-page .title-banner .inner-banner::after {
        height: 75px;
        left: -40px;
        top: unset;
        z-index: -1;
        border-top-right-radius: 30px;
        border-top-left-radius: 30px;
        width: 270px;
        bottom: -10px;
    }
    #banner-page .mv-title-en::before {
        width: 4px;
        height: 4px;
        left: 21px;
        top: 14px;
    }
  
    #banner-page .mv-title-en::after {
        width: 4px;
        height: 4px;
        left: 10px;
        top: 14px;
  }
  
  
  }