/* -------------------
    仕事内容 environment
    -------------------*/
    .border-box{
        border-radius: 12px;
        border: solid 2px var(--green);
      } 
      #recruit_environment{
          
      }
      
      #training-system{
        width: 90%;
        margin: 0 auto 180px;
        max-width: 1440px;
      }
      #training-system .bg-blue{
        padding: 80px 0;
      }
      #training-system .first-line{
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        margin-bottom: 50px;
      }
      #training-system .first-line img{
        border-radius: 12px;
      }
      #training-system .first-line img,
      #training-system .first-line .border-box{
        width: calc((100% - 25px) / 2);
        object-fit: cover;
      }
      #training-system .second-line{
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        margin-bottom: 125px;
      }
      #training-system .second-line .border-box{
        width: calc((100% - 50px) / 3);
      }
      #training-system .border-box{
        padding: 40px;
      }
      #training-system .border-box .title{
        color: var(--green);
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 30px;
      }
      #training-system .border-box .text{
        font-size: 16px;
        letter-spacing: 0;
        line-height: 1.7;
      }
      #training-system .border-box .beige-bg{
        padding: 30px;
        letter-spacing: 0;
        line-height: 1.7;
        margin-top: 40px;
        font-size: 14px;
        background-color: #f4f4f4;
        border-radius: 12px;
      }
      @media (max-width: 768px) {
        #training-system{
          margin: 0 auto 90px;
        }
        #training-system .border-box{
          padding: 20px;
        }
        #training-system .first-line,
        #training-system .second-line{
          display: block;
          margin-bottom: 90px;
        }
        #training-system .first-line img{
          margin-bottom: 20px;
        }
        #training-system .first-line img,
      #training-system .first-line .border-box{
        width: 100%;
      }
      #training-system .border-box .text{
        font-size: 14px;
      }
      #training-system .border-box .title{
        font-size: 15px;
      }
      #training-system .second-line .border-box{
        width: 100%;
        margin-bottom: 20px;
      }
      #training-system .border-box .beige-bg{
        font-size: 11px;
      }
      }
      /* デビューまでの流れ */
      #debut.bg-blue{
        padding: 80px 0;
        margin-bottom: 125px;
      }
      #debut .debut-title{
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 50px;
      }
      #debut .debut-flow{
        display: flex;
        gap: 30px;
        justify-content: center;
        align-items: flex-start;
      }
      #debut .debut-flow li{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      #debut .debut-flow li .bg{
        background-color: #fff;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-bottom: 25px;
        display: flex;
        justify-content: center;
        align-items: center;  
      }
      #debut .debut-flow .arrow{
        margin-top: 60px;
      }
      #debut .debut-text{
        text-align: center;
        font-size: 14px;
        letter-spacing: 0;
        line-height: 1.7;
      }
      #debut .debut-text span{
        font-size: 14px;
        background-color: #000;
        color: #fff;
        padding: 2px 5px;
        margin-bottom: 10px;
        display: inline-block;
      }
      #debut .debut-flow .arrow{
        width: 7px;
        height: 7px;
        border: 1px solid;
        border-color: #3e3e3e #3e3e3e transparent transparent;
        transform: rotate(45deg);
      }
      .ja-title{
        text-align: center;
        margin-bottom: 50px;
        font-size: 22px;
      }
      @media (max-width: 768px) {
        .ja-title{
          font-size: 14px;
          margin-bottom: 30px;
        }
        #debut .debut-text{
          font-size: 13px;
        }
        #debut .debut-text span{
          font-size: 11px;
        }
        #debut.beige-bg{
          margin-bottom: 60px;
        }
        #debut .debut-flow{
          margin-left: auto;
          justify-content: flex-start;
          gap: 20px;
        }
        .debut-flow {
          overflow-x: auto;
          gap: 30px;
          padding: 0 20px;
        }
        #debut .debut-flow li .bg{
            width: 100px;
            height: 100px;
        }
        .debut-flow::-webkit-scrollbar {
          display: none; /* スクロールバー非表示（任意） */
        }
        
        .debut-flow li {
          flex: 0 0 auto; /* 要素の幅を固定化して横並びを維持 */
          text-align: center;
          scroll-snap-align: center;
        }
        
        #debut .debut-flow li img {
          width: 50%;
          height: 50%;
        }
        #debut .debut-flow .arrow{
          margin-top: 46px;
        }
      }
      /* -------------------
          キャリア支援 carrier
          -------------------*/
      .career-path-img{
        text-align: center;
        margin: 0 auto 80px;
        width: 90%;
      }
      #carrier .inner{
        width: 90%;
        margin: 0 auto;
      }
      #carrier .inner .career-path{
        width: 100%;
        margin-bottom: 80px;
      }
      #carrier .carrier-list{
        display: flex;
        gap: 25px;
        flex-flow: column;
        max-width: 1440px;
        margin: 0 auto;
      }
      #carrier .carrier-list li{
        display: flex;
        background-color: #fff;
        padding: 60px;
        gap: 65px;
        border-radius: 12px;
      }
      #carrier .carrier-list li img{
        height: auto;
        max-width: 100%; 
        flex-shrink: 0;
        object-fit: cover; 
        border-radius: 12px;
      }
      #carrier .carrier-list li .post{
        font-size: 18px;
        margin-bottom: 30px;
        font-weight: 500;
      }
      #carrier .carrier-list li .post-desc{
        font-size: 16px;
        letter-spacing: 0;
      }
      @media (max-width: 768px) {
        .career-path-img {
          overflow-x: auto; 
          width: 95%;
          margin: 0 0 40px auto;
        }
        .career-path-img img{
            display: block;
            width: 900px;
            height: auto;
            max-width: none;
            margin-right: 5%;
        }
        #carrier .career-path {
          display: block;
          width: 800px;
          height: auto;
          max-width: none;
          margin-right: 5%;
        }
        .career-path-img::-webkit-scrollbar {
          display: none;
        }
        #carrier .carrier-list li{
          padding: 0 0 30px 0;
          gap: 20px;
          flex-wrap: wrap;
        }
        #carrier .carrier-list li div{
          width: 85%;
          margin: 0 auto;
        }
        #carrier .carrier-list li img{
          width: 100%;
          object-fit: cover;
          object-position: top;
          display: block;
        }
        #carrier .carrier-list li .post{
          font-size: 15px;
          text-align: center;
          margin-bottom: 15px;
        }
        #carrier .carrier-list li .post-desc{
          font-size: 14px;
          line-height: 1.7;
          letter-spacing: 0;
        }
      }
      /* -------------------
          働き方
          -------------------*/
      #way-of-working{
        width: 90%;
        margin: 180px auto;
      }
      #way-of-working .center-title{
        text-align: left;
      }
      @media (max-width: 768px) {
        #way-of-working .center-title{
            text-align: center;
          }
        #way-of-working{
          margin: 90px auto;
        }
      }
      /* -------------------
          福利厚生 benefits
          -------------------*/
      #benefits{
        width: 90%;
        margin: 180px auto 0;
      }
      #benefits .benefits-box{
        display: flex;
        gap: 25px;
        max-width: 1440px;
        margin: 0 auto;
      }
      #benefits .benefits-box .bg-box{
        width: calc((100% - 50px) / 3);
        text-align: center;
        padding: 70px 40px;
        background-color: #f7f7f7;
        border-radius: 12px;
      }
      #benefits .benefits-box .bg-box img{
        margin-bottom: 55px;
        height: 79px;
      }
      #benefits .benefits-box .bg-box .label{
        font-size: 22px;
        margin-bottom: 40px;
        font-weight: 500;
      }
      #benefits .benefits-box .bg-box .detail{
        font-size: 16px;
        line-height: 2;
        text-align: left;
        letter-spacing: 0;
      }
      @media (max-width: 1160px) {
        #benefits{
          margin: 90px auto;
        }
        #benefits .benefits-box {
          display: block;
        }
        #benefits .benefits-box .bg-box{
          width: 100%;
          display: flex;
          margin-bottom: 25px;
          gap: 30px;
          padding: 50px;
          align-items: center;
        }
        #benefits .benefits-box .bg-box img{
          margin-bottom: 0;
        }
        #benefits .benefits-box .bg-box .text-item{
          text-align: left;
        }
        #benefits .benefits-box .bg-box .label{
          margin-bottom: 15px;
        }
      }
      
      @media (max-width: 768px) {
        #benefits .benefits-box .bg-box{
          padding: 30px;
          gap: 20px;
        }
        #benefits .benefits-box .bg-box img{
          width: 50px;
        }
        #benefits .benefits-box .bg-box .label{
          font-size: 14px;
        }
        #benefits .benefits-box .bg-box .detail{
          font-size: 14px;
          line-height: 1.7;
          letter-spacing: 0;
        }
      }

      .box-containerD {
        display: flex;
        position: relative;
        align-items: center;
        margin: auto;
        width: 100%;
        margin-bottom: 180px;
        max-width: 1600px;
      }
      
      /* PC時：画像を右側に配置 */
      #character .box-containerD__image {
        position: absolute;
        top: 0;
        right: 55%;
        width: 43%;
        height: 100%;
      }
      #character .box-containerD__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
      }
      
      /* テキストグループ（左側） */
      .box-containerD__group {
        position: relative;
        margin-left: 135px;
        max-width: 60%;
      }
      
      .box-containerD__head {
        text-align: left;
      }
      
      .box-containerD__ja-heading {
        margin-top: 26px;
        font-size: 26px;
      }
      
      .box-containerD__ja-mini-heading {
        margin-top: 25px;
        font-size: 1.4rem;
      }
      
      .box-containerD__en-heading {
        margin-top: 26px;
        font-size: 50px;
        font-family: var(--font);
        color: var(--green);
      }
      
      .box-containerD__text {
        margin: 70px auto 100px;
        width: 100%;
        font-size: 16px;
        line-height: 2;
        letter-spacing: 0.5px;
      }
      
      /* 背景別 */
      #character .box-containerD {
        padding: 0;
        max-width: 1440px;
      }
      
      /* ▼ スマホ対応 */
      @media screen and (max-width: 768px) {
        .box-containerD {
          flex-direction: column;
          margin-bottom: 50px;
        }
      
        .box-containerD__image {
          position: relative;
          width: 100%;
          height: auto;
        }
      
        .box-containerD__image img {
          object-fit: cover;
        }
      
        .box-containerD__group {
          margin: 50px auto 0;
          width: 100%;
          max-width: 100%;
          margin-left: 0;
          left: auto;
        }
      
        .box-containerD__head {
          text-align: center;
        }
      
        .box-containerD__ja-heading {
          margin-top: 14px;
          font-size: 18px;
        }
      
        .box-containerD__ja-mini-heading {
          margin-top: 14px;
          font-size: 14px;
        }
      
        .box-containerD__en-heading {
          margin-top: 14px;
          font-size: 31px;
        }
      
        .box-containerD__text {
          margin-top: 36px;
          font-size: 14px;
          margin-bottom: initial;
        }
      }