@charset "utf-8";

/* Recruitment branding */

/* photo-hero */
.photo-hero--brand .photo-hero__photos { top: -100px; left: 55%; width: 800px; gap: 16px; overflow: visible; }
.photo-hero--brand { min-height: 803px; overflow: hidden; }
.photo-hero--brand .photo-hero__column { overflow: visible; transform: skewX(-15deg); transform-origin: top left; }
.photo-hero--brand .photo-hero__tile { height: 245px; transform: none; }
.photo-hero--brand .photo-hero__tile img { transform: skewX(15deg) scale(1.2); }
.photo-hero--brand .photo-hero__content { width: min(650px, 55%); }
.photo-hero--brand h1 { font-size: 32px; line-height: 1.8; }
.photo-hero--brand h1 strong { display: inline-block; font-size: 40px; line-height: 1.25; }
@media screen and (max-width: 1200px) and (min-width: 861px) {
  .photo-hero--brand .photo-hero__photos { left: 59%; width: 650px; }
}
@media screen and (max-width: 860px) {
  .photo-hero--brand { min-height: 650px; }
  .photo-hero--brand .photo-hero__inner { min-height: 650px; align-items: flex-start; padding-top: 110px; }
  .photo-hero--brand .photo-hero__content { width: 250px; padding: 0; }
  .photo-hero--brand .photo-hero__photos { top: -40px; left: 69%; width: 100%; height: 690px; gap: 6px; clip-path: none; }
  .photo-hero--brand .photo-hero__tile { height: 115px; }
  .photo-hero--brand .photo-hero__tile--mobile-only { display: block; }
  .photo-hero--brand .photo-hero__group { gap: 5px; padding-bottom: 5px; }
  .photo-hero--brand .photo-hero__column--up .photo-hero__ticker, .photo-hero--brand .photo-hero__column--down .photo-hero__ticker { transform: none; }
  .photo-hero--brand h1 { font-size: 22px; line-height: 1.6; }
  .photo-hero--brand h1 strong { font-size: 23px; white-space: nowrap; }
  .photo-hero--brand h1 .photo-hero__brand-ending { display: block; }
  .photo-hero--brand p { max-width: 180px; margin-top: 32px; font-size: 14px; line-height: 1.8; }
  .photo-hero--brand .service-actions { display: flex; flex-direction: column; align-items: flex-start; width: 190px; margin-top: 20px; gap: 12px; }
  .photo-hero--brand .service-actions .c-btn { width: 100%; flex: none; }
}
@media screen and (max-width: 540px) {
  .photo-hero--brand h1 { font-size: 20px; }
  .photo-hero--brand h1 strong { padding-inline: 8px; font-size: 21px; }
}
@media screen and (min-width: 600px) and (max-width: 860px) {
  .photo-hero--brand .photo-hero__content { width: min(42vw, 330px); }
  .photo-hero--brand h1 { font-size: 27px; }
  .photo-hero--brand h1 strong { font-size: 28px; }
  .photo-hero--brand p { max-width: 300px; font-size: 15px; }
  .photo-hero--brand .service-actions { width: 230px; }
}
.photo-hero--brand h1 strong { color: var(--service-dark); background: #fff; }
.photo-hero--brand h1 strong span, .brand-detail__body > .service-shell > p strong span, .brand-detail__compare p strong span { color: transparent; background: var(--service-gradient); background-clip: text; -webkit-background-clip: text; }
@media screen and (max-width: 360px) {
  .photo-hero--brand .photo-hero__photos { left: 80%; }
  .photo-hero--brand::after { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #002735 0%, rgb(0 39 53 / .98) 66%, transparent 94%); content: ''; }
}

/* brand-detail */
.brand-detail { position: relative; color: #fff; }
.brand-detail__eyebrow { display: block; font: 700 14px/1.4 var(--barlow); letter-spacing: .06em; }
.brand-detail h2 { display: block; padding: 0; font-size: 32px; line-height: 1.5; }
.brand-detail h2::after { display: block; width: 48px; height: 3px; margin-top: 16px; border-radius: 2px; background: #fff; content: ''; }
.brand-detail__mobile-break { display: none; }
.brand-detail__goals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 64px; }
.brand-detail__goals article { min-height: 284px; padding: 22px; background: #fff; color: var(--black1); }
.brand-detail__goals h3 { margin: 10px 0 18px; color: var(--main1); }
.brand-detail__goals mark { background: linear-gradient(transparent 59%, rgb(255 196 0 / 50%) 59%); color: inherit; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.brand-detail__process { margin-top: 40px; background: #fff; }
.brand-detail__process img { display: block; }
.brand-detail__compare { display: grid; align-items: center; margin-top: 80px; }
.brand-detail__compare > div:first-child > span { font: 700 14px/1.4 var(--barlow); }
.brand-detail__compare-lead { font-size: 20px; font-weight: 600; line-height: 1.6; }
.brand-detail__compare-chart { position: relative; margin-inline: auto; text-align: center; }
@media screen and (max-width: 860px) {
  .brand-detail h2 { font-size: 25px; }
  .brand-detail__mobile-break { display: block; }
  .brand-detail__desktop-break { display: none; }
  .brand-detail__goals { grid-template-columns: 1fr; margin-top: 40px; }
  .brand-detail__goals article { min-height: 0; padding: 16px; }
  .brand-detail__goals article > span b { font-size: 28px; }
  .brand-detail__goals article:nth-child(-n+2) p { max-width: 290px; }
  .brand-detail__process { padding: 0; }
  .brand-detail__process img { max-width: none; }
  .brand-detail__compare { margin-top: 40px; }
}
.brand-detail { --brand-slope: clamp(60px, 8vw, 110px); --brand-band: clamp(24px, 3.2vw, 45px); isolation: isolate; padding: 0; background: transparent; clip-path: none; }
.brand-detail__accent { position: absolute; z-index: -1; inset: 0; background: var(--gradient2); clip-path: polygon(0 var(--brand-slope), 100% 0, 100% calc(100% - var(--brand-slope)), 0 100%); }
.brand-detail__body { position: relative; z-index: 0; padding-block: calc(var(--brand-slope) + 50px) calc(var(--brand-slope) + 10px); background: var(--service-gradient); clip-path: polygon(0 var(--brand-slope), 100% var(--brand-band), 100% calc(100% - var(--brand-slope)), 0 calc(100% - var(--brand-band))); }
.brand-detail__body > .service-shell > p { margin-top: 48px; line-height: 35.6px; }
.brand-detail__body > .service-shell > p strong, .brand-detail__compare p strong { padding: 0 4px; background: #fff; color: var(--service-dark); font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.brand-detail__goals article > span { color: transparent; background: var(--gradient2); background-clip: text; -webkit-background-clip: text; }
.brand-detail__goals h3 { font-size: 28px; line-height: 1.6; }
.brand-detail__process { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.brand-detail__process picture { display: block; width: 100%; min-width: 1200px; }
.brand-detail__process img { width: 100%; min-width: 1200px; height: auto; }
.brand-detail__compare { grid-template-columns: minmax(0, 760px) minmax(0, 450px); justify-content: space-between; gap: 40px; }
.brand-detail__compare > div:first-child { display: flex; flex-direction: column; align-items: center; }
.brand-detail__compare > div:first-child > span { display: block; text-align: center; }
.brand-detail__compare h3 { display: block; margin: 8px 0 0; padding: 0; border: 0; text-align: center; font-size: 40px; line-height: 1.6; }
.brand-detail__compare h3::after { display: block; width: 48px; height: 3px; margin: 16px auto 0; border-radius: 2px; background: #fff; content: ''; }
.brand-detail__compare p { align-self: stretch; margin-top: 40px; }
.brand-detail__compare .brand-detail__compare-lead { margin-top: 64px; font-size: 28px; line-height: 1.6; }
.brand-detail__compare-lead strong { white-space: nowrap; }
.brand-detail__compare-chart { width: 100%; max-width: 450px; height: auto; aspect-ratio: 889 / 835; }
.brand-detail__compare-chart img { position: static; display: block; width: 100%; height: auto; padding: 0; border-radius: 0; background: none; }
@media screen and (max-width: 860px) {
  .brand-detail__body { padding-block: calc(var(--brand-slope) + 60px) calc(var(--brand-slope) + 10px); }
  .brand-detail__body > .service-shell > p { margin-top: 40px; line-height: 25.2px; }
  .brand-detail__goals h3 { margin: 0 0 16px; font-size: 20px; }
  .brand-detail__process { width: calc(100% + var(--service-padding)); margin-left: 0; }
  .brand-detail__process picture, .brand-detail__process img { width: 700px; min-width: 700px; height: auto; }
  .brand-detail__compare { grid-template-columns: 1fr; gap: 30px; }
  .brand-detail__compare h3 { font-size: 24px; }
  .brand-detail__compare .brand-detail__compare-lead { margin-top: 40px; font-size: 20px; }
  .brand-detail__compare-chart { width: min(350px, 100%); max-width: 350px; }
}
@media screen and (max-width: 360px) {
  .brand-detail__compare-lead strong { white-space: normal; }
}
.brand-detail__goals article > span b, .brand-reasons__list article > div > span b { color: transparent; background: var(--gradient2); background-clip: text; -webkit-background-clip: text; }
.brand-detail__compare { margin-bottom: 40px; }
@media screen and (max-width: 860px) {
  .brand-detail__compare { margin-bottom: 24px; }
}

/* brand-problems */
.brand-problems { background: #f5faff; }
.brand-problems__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 80px; }
.brand-problems__grid article { display: flex; flex-direction: column; border-radius: 8px; color: #fff; }
.brand-problems__grid article > span { font: 700 14px/1.4 var(--barlow); letter-spacing: .05em; }
.brand-problems__grid p { color: var(--black1); }
@media screen and (max-width: 860px) {
  .brand-problems__grid { grid-template-columns: 1fr; gap: 18px; margin-top: 50px; }
}
.brand-problems__grid article { min-height: 391px; padding: 32px 24px 24px; background: var(--service-gradient); }
.brand-problems__grid article > span b { font-size: 40px; }
.brand-problems__grid h3 { min-height: 65px; margin-top: 8px; font-size: 18px; line-height: 32.4px; }
.brand-problems__grid p { position: relative; flex: 1; margin-top: 8px; padding: 16px; background: #fff; font-size: 16px; line-height: 32px; letter-spacing: .005em; }
.brand-problems__grid p::after { position: absolute; inset: 16px; pointer-events: none; content: ''; background: repeating-linear-gradient(90deg, #8aaeb7 0 4px, transparent 4px 8px); mask-image: repeating-linear-gradient(to bottom, transparent 0 31px, #000 31px 32px); -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 31px, #000 31px 32px); }
@media screen and (max-width: 860px) {
  .brand-problems__grid article { min-height: 363px; padding: 32px 16px; }
  .brand-problems__grid h3 { min-height: 52px; line-height: 26px; }
  .brand-problems__grid p { font-size: 14px; }
}

/* brand-solutions */
.brand-solutions__layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; margin-top: 70px; }
.brand-solutions__cards { display: grid; gap: 30px; }
.brand-solutions__cards article { border: 2px solid var(--service-dark); }
.brand-solutions__cards h3 { display: block; padding: 15px 20px; color: #fff; background: var(--service-gradient); font-size: 24px; line-height: 1.4; }
.brand-solutions__cards h3 span { display: block; font: 700 12px/1.2 var(--barlow); }
.brand-solutions__cards h3 b { padding-right: 8px; font: 700 30px/1 var(--barlow); }
.brand-solutions__cards p { padding: 24px; }
.brand-solutions__photos { display: block; width: 100%; aspect-ratio: 516 / 484; }
.brand-solutions__photos img { display: block; width: 100%; height: auto; }
@media screen and (max-width: 860px) {
  .brand-solutions__layout { display: flex; flex-direction: column-reverse; gap: 40px; margin-top: 40px; }
  .brand-solutions__photos { aspect-ratio: 350 / 329; }
  .brand-solutions__cards { gap: 24px; }
  .brand-solutions__cards h3 { padding: 8px 16px; }
  .brand-solutions__cards h3 span { font-size: 14px; }
  .brand-solutions__cards h3 b { font-size: 32px; }
}
@media screen and (max-width: 540px) {
  .brand-solutions__cards h3 { font-size: 20px; }
}

/* brand-services */
.brand-services { padding-top: 60px; }
.brand-services__matrix { margin: 64px auto 0; }
.brand-services__matrix table { border-collapse: collapse; text-align: center; }
.brand-services__matrix thead th, .brand-services__matrix tbody th { color: #fff; }
.brand-services__list { display: grid; gap: 56px; margin-top: 64px; }
.brand-services__item { display: grid; grid-template-columns: minmax(0,700fr) minmax(0,532fr); gap: 48px; align-items: center; min-height: 0; }
.brand-services__item:nth-child(even) { grid-template-columns: minmax(0,532fr) minmax(0,700fr); }
.brand-services__item:nth-child(even) .brand-services__image { order: -1; }
.brand-services__title { display: grid; grid-template-columns: auto 1fr; }
.brand-services__title b { grid-row: span 2; font: 700 56px/1 var(--barlow); }
.brand-services__title span { font: 700 14px/1.2 var(--barlow); }
.brand-services__text > p strong { background: linear-gradient(transparent 68%, rgba(255,196,0,.5) 68%); font-weight: 700; }
.brand-services__lists { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.brand-services__lists > div { min-width: 0; }
.brand-services__lists h4 { width: 247px; max-width: 100%; padding: 0 16px; color: #fff; }
.brand-services__lists > div:nth-child(2) h4 { width: 119px; }
.brand-services__lists ul { display: grid; gap: 8px; padding: 24px 16px; border: 1px solid #d9d9d9; border-radius: 2px; background: #f4f8fa; }
.brand-services__lists li { position: relative; min-height: 28px; padding-left: 32px; }
.brand-services__lists li::before { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; background: url('../img/brand-services-pc-check2.svg') center / contain no-repeat; content: ''; }
.brand-services__image { min-height: 0; }
.brand-services__image img { display: block; width: 100%; height: auto; }
.brand-services__image small { display: block; margin-top: 16px; font-size: 12px; line-height: 23px; text-align: right; }
@media screen and (max-width: 1200px) and (min-width: 861px) {
  .brand-services__item { gap: 45px; }
}
@media screen and (max-width: 860px) {
  .brand-services { padding-top: 64px; }
  .brand-services__matrix { margin-top: 40px; }
  .brand-services__list { margin-top: 40px; }
  .brand-services__item, .brand-services__item:nth-child(even) { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .brand-services__item:nth-child(even) .brand-services__image { order: 0; }
  .brand-services__title b { line-height: 20px; }
  .brand-services__title span { font-size: 12px; line-height: 17px; }
  .brand-services__item:first-child .brand-services__text > p { max-width: 335px; }
  .brand-services__lists { grid-template-columns: 1fr; }
  .brand-services__image { display: block; }
}
.brand-services__matrix { max-width: 1204px; overflow-x: auto; overflow-y: hidden; border: 2px solid var(--main1); border-radius: 4px; }
.brand-services__matrix table { width: 100%; min-width: 1200px; height: auto; table-layout: fixed; font-size: 15px; line-height: 1.4; }
.brand-services__matrix-label { width: 15%; }
.brand-services__matrix th, .brand-services__matrix td { height: 72px; padding: 10px 8px; border: .5px solid var(--black1); }
.brand-services__matrix thead th { height: 64px; }
.brand-services__matrix thead th:not(:first-child), .brand-services__matrix tbody th { color: #fff; background: var(--main1); }
.brand-services__matrix thead th:first-child { background: var(--service-gradient); }
.brand-services__matrix tbody td { background: #f2f5f8; }
.brand-services__matrix td img { display: block; width: 32px; height: 32px; margin-inline: auto; }
.brand-services__title { column-gap: 33px; align-items: center; }
.brand-services__title b, .brand-services__title span { color: transparent; background: var(--gradient2); background-clip: text; -webkit-background-clip: text; }
.brand-services__title b { font-size: 72px; letter-spacing: .08em; }
.brand-services__title h3 { font-size: 28px; line-height: 1.6; }
.brand-services__text > p { margin-top: 16px; line-height: 1.8; }
.brand-services__lists { gap: 16px; margin-top: 24px; }
.brand-services__lists h4 { font-size: 18px; }
@media screen and (max-width: 860px) {
  .brand-services__matrix table { width: 857px; min-width: 857px; font-size: 11px; }
  .brand-services__matrix th, .brand-services__matrix td { height: 52px; padding: 8px; }
  .brand-services__matrix thead th { height: 46px; }
  .brand-services__matrix td img { width: 23px; height: 23px; }
  .brand-services__title b { font-size: 28px; }
  .brand-services__title h3 { font-size: 20px; line-height: 32px; }
  .brand-services__lists h4 { font-size: 16px; }
}
.brand-services__lists > div { display: flex; flex-direction: column; }
.brand-services__lists h4 { height: 33px; line-height: 33px; clip-path: none; background: transparent url('../img/brand-services-pc-label-bg.svg') left top / 100% 100% no-repeat; }
.brand-services__lists > div:nth-child(2) h4 { background-image: url('../img/brand-services-pc-label-bg1.svg'); }
.brand-services__lists ul { flex: 1; }
.brand-services__lists li { font-size: 16px; line-height: 28.8px; }
.brand-services__lists li strong { font-weight: 700; }
@media screen and (max-width: 860px) {
  .brand-services__lists li { font-size: 14px; line-height: 25.2px; }
}

/* brand-reasons */
.brand-reasons { padding-top: 60px; background: #f5faff; }
.brand-reasons__list { display: grid; gap: 56px; margin-top: 64px; }
.brand-reasons__list article { display: grid; grid-template-columns: minmax(0,666fr) minmax(0,550fr); gap: 64px; align-items: center; }
.brand-reasons__list article:nth-child(even) { grid-template-columns: minmax(0,550fr) minmax(0,666fr); }
.brand-reasons__list article:nth-child(even) img { order: -1; }
.brand-reasons__list article > div > span { display: block; font: 700 14px/1.3 var(--barlow); color: transparent; background: var(--gradient2); background-clip: text; -webkit-background-clip: text; }
.brand-reasons__list article > div > span b { font-size: 46px; }
.brand-reasons__list h3 { font-size: 24px; line-height: 1.6; }
.brand-reasons__list p { margin-top: 16px; }
.brand-reasons__list p strong { background: linear-gradient(transparent 68%, rgba(255,196,0,.5) 68%); font-weight: 700; }
.brand-reasons__list img { display: block; width: 100%; height: 480px; object-fit: cover; border-radius: 4px; }
.brand-reasons__list article:nth-child(2) img { object-fit: contain; }
@media screen and (max-width: 860px) {
  .brand-reasons { padding-top: 64px; }
  .brand-reasons__list { gap: 48px; margin-top: 40px; }
  .brand-reasons .service-heading h2 { max-width: 240px; margin-inline: auto; }
  .brand-reasons__list article { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .brand-reasons__list article:nth-child(even) img { order: 0; }
  .brand-reasons__list article > div > span { font-size: 12px; line-height: 20px; }
  .brand-reasons__list article > div > span b { font-size: 28px; line-height: 20px; }
  .brand-reasons__list h3 { font-size: 20px; line-height: 32px; }
  .brand-reasons__list img { height: 230px; }
}

/* brand-sp-break */
.brand-sp-break { display: none; }
@media screen and (max-width: 860px) {
  .brand-sp-break { display: block; }
}

/* service-new-info */
.service-new-info--brand { background-color: var(--service-dark); background-image: linear-gradient(rgb(0 39 53 / .7), rgb(0 39 53 / .7)), url('../img/brand-info-pc-14-final-cta.webp'); background-position: center; background-size: cover; }
.service-new-info--brand::before { display: none; }
@media screen and (max-width: 860px) {
  .service-new-info--brand { background-image: linear-gradient(rgb(0 39 53 / .7), rgb(0 39 53 / .7)), url('../img/brand-info-sp-final-cta-infobg-branding-team-happy-jpg.webp'); }
  .service-new-info--brand h2 { font-size: 24px; line-height: 1.6; }
}