.lp03-workstyle,
.lp03-workstyle *,
.lp03-workstyle *::before,
.lp03-workstyle *::after {
  box-sizing: border-box;
}

.lp03-workstyle {
  --workstyle-ink: #012530;
  --workstyle-blue: #00526b;
  color: var(--workstyle-ink);
  font-family: "Noto Serif JP", serif;
}

.lp03-workstyle__problems {
  min-height: 0;
  background: url("/assets/img/lp/03/workstyle/problem-background-pc.webp") center top / 100% 100% no-repeat;
}

.lp03-workstyle__problems-inner,
.lp03-workstyle__careers-inner {
  width: min(1000px, calc(100% - 64px));
  margin-inline: auto;
}

.lp03-workstyle__problems-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding-top: 80px;
}

.lp03-workstyle__heading {
  text-align: center;
}

.lp03-workstyle__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 24px;
  color: #b3d6e1;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.lp03-workstyle__eyebrow span {
  width: 100px;
  border-top: 3px solid currentColor;
}

.lp03-workstyle__heading h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin: 0;
  font-weight: 700;
}

.lp03-workstyle__title-line {
  display: block;
  letter-spacing: 0.02em;
  line-height: 1;
}

.lp03-workstyle__title-line--first {
  font-size: 64px;
}

.lp03-workstyle__title-line--second {
  font-size: 52px;
}

.lp03-workstyle__heading h2 small {
  font-size: 0.875em;
}

.lp03-workstyle__heading h2 > strong {
  color: var(--workstyle-blue);
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.lp03-workstyle__heading h2 > strong small {
  font-size: 1em;
}

.lp03-workstyle__problem-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp03-workstyle__problem {
  display: grid;
  grid-template-columns: minmax(0, 362px) minmax(0, 554px);
  aspect-ratio: 4 / 1;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 5.84vw, 84px);
  min-height: 0;
}

.lp03-workstyle__problem--reverse {
  grid-template-columns: minmax(0, 554px) minmax(0, 362px);
}

.lp03-workstyle__problem--reverse .lp03-workstyle__problem-copy {
  grid-column: 2;
  grid-row: 1;
}

.lp03-workstyle__problem--reverse > img {
  grid-column: 1;
  grid-row: 1;
}

.lp03-workstyle__problem-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.lp03-workstyle__problem-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #d9d9d9;
  font-weight: 700;
  line-height: 1.3;
}

.lp03-workstyle__problem-label b {
  color: #e8eff5;
  font-size: 40px;
}

.lp03-workstyle__problem-label span {
  width: 120px;
  border-top: 1px solid currentColor;
}

.lp03-workstyle__problem-label small {
  font-size: 14px;
}

.lp03-workstyle__problem-copy h3 {
  margin: 0;
  font-size: clamp(28px, 2.78vw, 40px);
  font-weight: 700;
  line-height: 1.3;
}

.lp03-workstyle__problem:nth-child(3) h3,
.lp03-workstyle__career-list h4 {
  white-space: nowrap;
}

.lp03-workstyle__problem-copy > p:last-child {
  margin: 0;
  color: #626262;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(15px, 1.39vw, 20px);
  line-height: 1.3;
}

.lp03-workstyle__problem > img {
  display: block;
  width: 100%;
  height: auto;
  align-self: start;
  filter: drop-shadow(4px 4px 4px rgb(0 82 107 / 20%));
}

.lp03-workstyle__requirement {
  position: relative;
  display: flex;
  width: 100%;
  height: 282px;
  flex-direction: column;
  align-items: center;
  margin-top: -32px;
  padding-top: 88px;
  text-align: center;
}

.lp03-workstyle .lp03-workstyle__line {
  position: absolute;
  left: 50%;
  display: block;
  width: 3px;
  height: 64px;
  transform: translateX(-50%);
}

.lp03-workstyle__line--top {
  top: 0;
}

.lp03-workstyle .lp03-workstyle__line--bottom {
  bottom: 0;
  height: 56px;
}

.lp03-workstyle__requirement p {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
}

.lp03-workstyle__requirement p + p {
  display: flex;
  width: max-content;
  align-items: center;
  white-space: nowrap;
}

.lp03-workstyle__requirement strong,
.lp03-workstyle__requirement b {
  flex: none;
}

.lp03-workstyle__requirement strong {
  background: linear-gradient(90deg, #14bbbb, #328ce6);
  background-clip: text;
  color: transparent;
  font-size: 44px;
}

.lp03-workstyle__requirement b {
  font-size: 40px;
}

.lp03-workstyle .lp03-workstyle__arrow {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: block;
  width: 13px;
  height: 61px;
  /* SVG内の縦軸（x=1.5）をセクション中央へ揃える。 */
  transform: translateX(-11.5385%);
}

.lp03-workstyle__careers {
  position: relative;
  min-height: 731px;
  background: url("/assets/img/lp/03/workstyle/career-background-pc.webp") center top / 100% 100% no-repeat;
}

.lp03-workstyle__careers-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding-top: 80px;
}

.lp03-workstyle__careers-inner > h3 {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
}

.lp03-workstyle__careers-inner > h3 strong {
  color: #b9904d;
}

.lp03-workstyle__career-list {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 5.76vw, 83px);
  margin: -16px 0 0;
  padding: 0;
  list-style: none;
}

.lp03-workstyle__career-list li {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.lp03-workstyle__career-icon {
  display: grid;
  width: 100px;
  height: 100px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: #fff;
}

.lp03-workstyle__career-icon img {
  display: block;
  max-width: 43px;
  max-height: 40px;
}

.lp03-workstyle__career-list h4,
.lp03-workstyle__career-list p {
  margin: 0;
}

.lp03-workstyle__career-list h4 {
  color: var(--workstyle-blue);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}

.lp03-workstyle__career-list p {
  color: #626262;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.3;
}

.lp03-workstyle__career-summary {
  display: flex;
  width: min(672px, 100%);
  height: 105px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 0;
}

.lp03-workstyle__career-summary p {
  display: flex;
  width: min(660px, 100%);
  height: 31px;
  flex: none;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--workstyle-blue);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

.lp03-workstyle__career-summary p span {
  width: 100px;
  flex: none;
  border-top: 1px solid currentColor;
}

.lp03-workstyle__career-summary p b {
  width: 452px;
  flex: none;
  font: inherit;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.lp03-workstyle__career-summary > strong {
  width: 100%;
  height: 62px;
  flex: none;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.lp03-workstyle__summary-break--sp {
  display: none;
}

@media (min-width: 568px) {
  .lp03-workstyle__career-summary > strong {
    white-space: nowrap;
  }
}

@media (max-width: 1023.98px) and (min-width: 768px) {
  .lp03-workstyle__problems-inner,
  .lp03-workstyle__careers-inner {
    width: calc(100% - 64px);
  }

  .lp03-workstyle__heading h2 > strong {
    font-size: 96px;
  }

  .lp03-workstyle__title-line--first {
    font-size: 54px;
  }

  .lp03-workstyle__title-line--second,
  .lp03-workstyle__careers-inner > h3 {
    font-size: 44px;
  }

  .lp03-workstyle__problem {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.1fr);
  }

  .lp03-workstyle__problem--reverse {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.72fr);
  }

  .lp03-workstyle__problem-label span {
    width: 64px;
  }

  .lp03-workstyle__requirement strong {
    font-size: 36px;
  }

  .lp03-workstyle__requirement b {
    font-size: 32px;
  }

  .lp03-workstyle__career-list h4 {
    font-size: 26px;
  }

  .lp03-workstyle__career-summary > strong {
    font-size: 40px;
  }
}

@media (max-width: 767.98px) {
  .lp03-workstyle__problems {
    min-height: 595px;
    background-image: url("/assets/img/lp/03/workstyle/problem-background-sp.webp");
  }

  .lp03-workstyle__problems-inner,
  .lp03-workstyle__careers-inner {
    width: calc(100% - 32px);
  }

  .lp03-workstyle__problems-inner {
    min-height: 595px;
    gap: 24px;
    padding-top: 56px;
  }

  .lp03-workstyle__eyebrow {
    gap: 5.73px;
    margin-bottom: 8.59px;
    font-size: 10px;
  }

  .lp03-workstyle__eyebrow span {
    width: 36px;
    border-top-width: 1px;
  }

  .lp03-workstyle__heading h2 {
    gap: 11.46px;
  }

  .lp03-workstyle__title-line--first {
    font-size: 22px;
  }

  .lp03-workstyle__title-line--second {
    font-size: 18px;
  }

  .lp03-workstyle__heading h2 > strong {
    font-size: 40px;
  }

  .lp03-workstyle__problem-list {
    gap: 4px;
  }

  .lp03-workstyle__problem,
  .lp03-workstyle__problem--reverse {
    grid-template-columns: minmax(0, 44.6006%) minmax(0, 55.3994%);
    gap: 0;
    min-height: 0;
  }

  .lp03-workstyle__problem--reverse {
    grid-template-columns: minmax(0, 55.3994%) minmax(0, 44.6006%);
  }

  .lp03-workstyle__problem-copy {
    gap: clamp(4.3px, calc(2.042vw - 3.664px), 12px);
  }

  .lp03-workstyle__problem-label {
    gap: clamp(4.3px, calc(2.042vw - 3.664px), 12px);
  }

  .lp03-workstyle__problem-label b {
    font-size: clamp(14px, calc(3.714vw - 0.485px), 28px);
  }

  .lp03-workstyle__problem-label span {
    width: clamp(40px, calc(6.366vw + 15.17px), 64px);
    border-top-width: 0.5px;
  }

  .lp03-workstyle__problem-label small {
    font-size: clamp(8px, calc(1.061vw + 3.862px), 12px);
  }

  .lp03-workstyle__problem-copy h3 {
    font-size: clamp(16px, calc(3.183vw + 3.586px), 28px);
  }

  .lp03-workstyle__problem-copy > p:last-child {
    font-size: clamp(8px, calc(1.857vw + 0.758px), 15px);
    letter-spacing: 0.04em;
  }

  .lp03-workstyle__problem > img {
    width: 100%;
    filter: drop-shadow(1.432px 1.432px 1.432px rgb(0 82 107 / 20%));
  }

  .lp03-workstyle .lp03-workstyle__line {
    width: 1.5px;
    height: 24px;
  }

  .lp03-workstyle__requirement {
    min-height: 106px;
    height: auto;
    flex-grow: 1;
    margin-top: -16px;
    padding-top: 32px;
  }

  .lp03-workstyle__requirement p {
    font-size: 12px;
  }

  .lp03-workstyle__requirement strong {
    font-size: 16px;
  }

  .lp03-workstyle__requirement b {
    font-size: 14px;
  }

  .lp03-workstyle .lp03-workstyle__arrow {
    width: 7px;
    height: 32px;
  }

  .lp03-workstyle__careers {
    min-height: 657px;
    background-image: url("/assets/img/lp/03/workstyle/career-background-sp.webp");
  }

  .lp03-workstyle__careers-inner {
    gap: 24px;
    padding-top: 56px;
  }

  .lp03-workstyle__careers-inner > h3 {
    font-size: 26px;
  }

  .lp03-workstyle__career-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: -8px 0 0;
  }

  .lp03-workstyle__career-list li {
    height: 175px;
    gap: 12px;
    padding-block: 8px;
  }

  .lp03-workstyle__career-icon {
    width: 80px;
    height: 80px;
  }

  .lp03-workstyle__career-icon img {
    width: auto;
    max-width: 32px;
    height: auto;
    max-height: 32px;
  }

  .lp03-workstyle__career-list h4 {
    font-size: 18px;
  }

  .lp03-workstyle__career-list p {
    font-size: 12px;
  }

  .lp03-workstyle__career-summary {
    width: 240.58px;
    height: 79px;
    gap: 4px;
    margin-top: 0;
  }

  .lp03-workstyle__career-summary p {
    width: 222.86px;
    height: 13px;
    gap: 1.43px;
    font-size: 10px;
  }

  .lp03-workstyle__career-summary p span {
    width: 16px;
  }

  .lp03-workstyle__career-summary p b {
    width: 188px;
  }

  .lp03-workstyle__career-summary > strong {
    width: 240.58px;
    height: 62px;
    font-size: 24px;
  }
}

@media (max-width: 567.98px) {
  .lp03-workstyle__summary-break--sp {
    display: block;
  }
}

@media (min-width: 568px) and (max-width: 767.98px) {
  .lp03-workstyle__careers {
    min-height: 0;
    background-image: url("/assets/img/lp/03/workstyle/career-background-pc.webp");
  }

  .lp03-workstyle__careers-inner {
    width: calc(100% - 64px);
    gap: clamp(28px, calc(14.07vw - 51.92px), 56px);
    padding-top: clamp(56px, calc(12.06vw - 12.5px), 80px);
    padding-bottom: clamp(48px, calc(12.06vw - 20.5px), 72px);
  }

  .lp03-workstyle__careers-inner > h3 {
    font-size: clamp(30px, calc(7.035vw - 9.96px), 44px);
  }

  .lp03-workstyle__career-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, calc(8.04vw - 37.67px), 24px);
    margin-top: -8px;
  }

  .lp03-workstyle__career-list li {
    height: auto;
    gap: clamp(12px, calc(4.02vw - 10.84px), 20px);
    padding-block: 0;
  }

  .lp03-workstyle__career-icon {
    width: clamp(64px, calc(18.09vw - 38.75px), 100px);
    height: clamp(64px, calc(18.09vw - 38.75px), 100px);
  }

  .lp03-workstyle__career-icon img {
    max-width: clamp(28px, calc(7.54vw - 14.83px), 43px);
    max-height: clamp(28px, calc(6.03vw - 6.25px), 40px);
  }

  .lp03-workstyle__career-list h4 {
    font-size: clamp(16px, calc(5.025vw - 12.54px), 26px);
  }

  .lp03-workstyle__career-list p {
    font-size: clamp(10px, calc(3.015vw - 7.13px), 16px);
  }

  .lp03-workstyle__career-summary {
    width: clamp(320px, calc(176.88vw - 684.85px), 672px);
    height: auto;
    gap: clamp(8px, calc(2.01vw - 3.42px), 12px);
  }

  .lp03-workstyle__career-summary p {
    width: 100%;
    height: auto;
    font-size: clamp(12px, calc(4.02vw - 10.84px), 20px);
  }

  .lp03-workstyle__career-summary p span {
    width: auto;
    flex: 1;
  }

  .lp03-workstyle__career-summary p b {
    width: auto;
  }

  .lp03-workstyle__career-summary > strong {
    width: 100%;
    height: auto;
    font-size: clamp(22px, calc(9.045vw - 29.38px), 40px);
  }
}

@media (max-width: 359.98px) {
  .lp03-workstyle__problems-inner,
  .lp03-workstyle__careers-inner {
    width: calc(100% - 24px);
  }

  .lp03-workstyle__problem,
  .lp03-workstyle__problem--reverse {
    grid-template-columns: minmax(0, 44.7%) minmax(0, 55.3%);
  }

  .lp03-workstyle__problem > img {
    width: 100%;
  }

  .lp03-workstyle__problem-copy h3 {
    font-size: 14px;
  }

  .lp03-workstyle__problem:nth-child(3) h3 {
    white-space: normal;
  }

  .lp03-workstyle__problem-copy > p:last-child {
    font-size: 7px;
  }
}