@charset "UTF-8";

/* ===================================
	File Name   : yell.css
	Description : yell Page Layout CSS
	Editor      : Bface Otake
	Last Editor : Bface Saeki
	
	Update Description :
	[2026/07/02] 「エール採用」への改修
	[2026/02/09] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
	2. Section [yell_intro] Setting
	3. Section [interview] Setting
	4. Div [eyell_entry] Setting
	
====================================== */



/*===== ■1. Individual Redefinition =====*/
#visual {
  background: url('../img/yell/img-visual.jpg') no-repeat 0 80% / cover;
}


@media (max-width: 768px) {
  #visual {
    background: url('../img/yell/img-visual.jpg') no-repeat left top / cover;
  }
}

/*===== ■2. Section [yell_intro] Setting =====*/
#yell_intro {
  h2 {
    margin-bottom: 2rem;
    font-weight: bold;
    font-size: 3rem;
  }
  p {
    font-weight: 500;
    line-height: 1.7;
    &:not(:last-child) {
      margin-bottom: 1.5rem;
    }
    b {
      font-weight: bold;
      font-size: 2rem;
    }
  }
  #intro_merit {
    position: relative;
    margin: 2rem 0 0;
    padding: 1.5rem;
    border: 1px dotted var(--AC);
    em {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 1.5rem;
      padding: 1rem 0;
      background: url(../img/career/img-career-challenge-bg.jpg) no-repeat left top / cover;
      color: #fff;
      font-weight: 700;
      font-size: 2rem;
    }
    ul {
      li {
        position: relative;
        padding-left: 1.8em;
        color: var(--AC);
        font-weight: 500;
        font-size: 1.8rem;
        background: url(../img/common/ico_check.svg) no-repeat left center / auto 100%;
        color: var(--AC);
        &:not(:last-child) {
          margin-bottom: 1rem;
        }
      }
    }
  }
}


@media (max-width: 768px) {
  #yell_intro {
    h2 {
      margin-bottom: 2rem;
      font-size: 2.4rem;
    }
    p {
      font-size: 1.4rem;
      b {
        font-size: 1.4rem;
      }
    }
    #intro_merit {
      margin: 2rem 0 0;
      em {
        font-size: 1.6rem;
      }
      ul {
        li {
          background: url(../img/common/ico_check.svg) no-repeat left .1em / 1.4em auto;
          font-size: 1.4rem;
        }
      }
    }
  }
}

/*===== ■3. Section [interview] Setting =====*/
.interview {
  #interview_intro {
    h2 {
      margin-bottom: 2.5rem;
      font-weight: bold;
      font-size: 3rem;
      line-height: 1;
    }
    p {
      padding-bottom: 4rem;
      font-weight: 500;
      line-height: 1.7;
    }
  }
  .card {
    display: flex;
    flex-direction: row-reverse;
    gap: 4rem;
    padding: 2rem;
    background: #f1eeea;
    border-radius: 1.5rem;
    &:nth-child(even){
      flex-direction: row;
    }
    &:not(:last-child) {
      margin-bottom: 3rem;
    }
    div {
      flex: 1;
      h3 {
        margin-bottom: 3rem;
        color: var(--AC);
        font-size: 2.6rem;
        font-weight: bold; 
        line-height: 1.2;
        span {
          display: block;
          margin-bottom: 1rem;
          color: #242424;
          font-size: 1.8rem;
        }
      }
      p {
        font-weight: 500;
        line-height: 1.8;
        &:not(:last-child) {
          margin-bottom: 4rem;
        }
      }
    }
    figure {
      overflow: hidden;
      width: 100%;
      max-width: 40%;
      border-radius: 1.5rem;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
      }
    }
  }
}


@media (max-width: 768px) {
  .interview {
    #interview_intro {
      h2 {
        margin-bottom: 2rem;
        font-size: 2.2rem;
      }
      p {
        padding-bottom: 2rem;
        font-size: 1.4rem;
      }
    }
    .card {
      flex-direction: column;
      gap: 1rem;
      &:nth-child(even){
        flex-direction: column;
      }
      &:not(:last-child) {
        margin-bottom: 2rem;
      }
      div {
        h3 {
          font-size: 2rem;
          margin-bottom: 1.5rem;
          span {
            font-size: 1.6rem;
          }
        }
        p {
          font-size: 1.4rem;
          &:not(:last-child) { margin-bottom: 3rem;}
        }
      }
      figure {
        max-width: 100%;
        aspect-ratio: 1/1;
      }
    }
  }
}



/*===== ■4. Div [yell_entry] Setting =====*/
#yell_entry {
  padding: 6rem 0;
  text-align: center;
  a.boxlink {
    max-width: 270px;
    line-height: 1.25;
    margin: 0 2rem 1rem;
  }
  p {
    font-size: 1.4rem;
  }
}


@media (max-width: 768px) {
  #yell_entry {
    padding: 4rem 0;
    a.boxlink {
      width: auto;
      max-width: 100%;
      line-height: 1.25;
    }
  }
}