@charset "utf-8";

/* Service pages: shared components */

/* Photo marquee animation */
@keyframes photo-hero-up {
  to { transform: translateY(-50%); }
}
@keyframes photo-hero-down {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

/* service-landing */
.service-landing { overflow: clip; font-size: var(--service-font-16-14); line-height: 1.8; }

/* Indeed・AI・費用: 放射状グラデーションの広がりを共通化 */
.service-landing--indeed, .service-landing--ai, .service-landing--pricing { --service-gradient: radial-gradient(ellipse 48.4% 48.4% at 50% 50%, #005a6c 0%, #00414e 50%, #002735 100%); }
.service-landing p, .service-landing li { text-wrap: pretty; line-break: strict; overflow-wrap: break-word; word-break: normal; }
.service-landing h1, .service-landing h2, .service-landing h3, .service-landing h4 { line-break: strict; word-break: normal; }
.service-landing mark { color: inherit; background: linear-gradient(transparent 60%, rgb(255 196 0 / 50%) 60%); font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.service-landing--site .service-section, .service-landing--brand .service-section { scroll-margin-top: 90px; }
.service-landing--site .service-section:not(.site-strategy):not(.site-support), .service-landing--brand .service-section:not(.brand-detail) { color: var(--black1); }

/* service-shell */
.service-shell { width: min(calc(100% - 160px), var(--service-content-width)); margin-inline: auto; }
@media screen and (max-width: 1200px) {
  .service-shell { width: calc(100% - 80px); }
}
@media screen and (max-width: 860px) {
  .service-shell { width: calc(100% - 2 * var(--service-padding)); }
}
.site-overview__intro strong { padding: 2px 4px; color: #fff; background: var(--service-dark); font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* service-section */
.service-section { padding-block: 120px; }
@media screen and (max-width: 860px) {
  .service-section { padding-block: 64px; }
}

/* service-heading */
.service-heading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.service-heading > span { color: transparent; background: var(--gradient2); background-clip: text; -webkit-background-clip: text; font: 700 14px/1.4 var(--barlow); letter-spacing: .08em; }
.service-heading h2 { font-size: var(--service-font-40-24); font-weight: 700; line-height: 1.6; }
.service-heading::after { content: ''; width: 48px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--gradient1); }
.service-heading--light > span, .service-heading--light h2 { color: white; }
.service-heading--light > span { background: none; -webkit-text-fill-color: currentColor; }
.service-heading--light::after { background: white; }
.service-heading--left { align-items: flex-start; text-align: left; }
@media screen and (max-width: 860px) {
  .service-heading > span { font-size: 12px; }
}

/* service-actions */

/* Indeed・AI・費用: 白背景の資料DLラベルは、背景を保ち文字だけグラデーション */
body.has-service-text-gradients :is(.c-btn--outline, .c-btn--white) > .c-btn__label { color: transparent; background: var(--gradient2); background-clip: text; -webkit-background-clip: text; }
body.has-service-text-gradients :is(.c-btn--outline, .c-btn--white):hover > .c-btn__label { color: inherit; background: none; }
.service-actions { justify-content: center; gap: 24px; }
.service-actions .c-btn { min-width: 0; width: 208px; height: 54px; padding: 12px 16px; font-family: var(--noto-sans); font-weight: 700; white-space: nowrap; }
.service-actions .c-btn--outline { width: 200px; }
@media screen and (max-width: 540px) {
  .service-actions { width: 100%; gap: 12px; flex-wrap: nowrap; }
  .service-actions .c-btn, .service-actions .c-btn--outline { flex: 1 1 0; width: auto; padding-inline: 8px; gap: 6px; font-size: 13px; }
  .service-actions .c-btn img { max-width: 18px; }
}

/* Closing banners: the same large pair across service pages. */
.service-final-banner .service-actions { width: 100%; max-width: 820px; margin-inline: auto; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 20px; }
.service-final-banner .service-actions > a.c-btn { flex: 1 1 0; width: 400px; max-width: 400px; min-width: 0; height: 88px; padding: 12px 24px; gap: 8px; font-size: 20px; font-weight: 500; line-height: 1.45; }
.service-final-banner .service-actions > a.c-btn:first-child { border: 1px solid var(--main1); color: var(--main1); background: white; }
.service-final-banner .service-actions > a.c-btn:first-child > span { color: transparent; background: var(--gradient2); background-clip: text; -webkit-background-clip: text; }
.service-final-banner .service-actions > a.c-btn:first-child:hover { color: white; background: var(--gradient2); }
.service-final-banner .service-actions > a.c-btn:first-child:hover > span { color: white; background: none; -webkit-text-fill-color: currentColor; }
.service-final-banner .service-actions > a.c-btn + .c-btn { color: white; border: 2px solid white; background: transparent; }
.service-final-banner .service-actions > a.c-btn + .c-btn:hover { color: var(--main1); background: white; }
.service-final-banner .service-actions > a.c-btn > img { width: 40px; height: 40px; max-width: none; max-height: none; flex: none; object-fit: contain; }
.service-final-banner .service-actions > a.c-btn + .c-btn > img { filter: brightness(0) invert(1); }
.service-final-banner .service-actions > a.c-btn + .c-btn:hover > img { filter: brightness(0) saturate(100%) invert(25%) sepia(75%) saturate(1200%) hue-rotate(149deg) brightness(90%) contrast(101%); }
@media screen and (max-width: 860px) {
  .service-final-banner .service-actions { gap: 12px; }
  .service-final-banner .service-actions > a.c-btn { height: 54px; padding-inline: 8px; gap: 6px; font-size: clamp(12px, 3.5vw, 15px); }
  .service-final-banner .service-actions > a.c-btn > img { width: 24px; height: 24px; }
  .service-final-banner .service-actions.ai-actions { flex-direction: column; align-items: center; gap: 10px; }
  .service-final-banner .service-actions.ai-actions > a.c-btn { flex: none; width: min(100%, 350px); max-width: 350px; }
}
@media screen and (max-width: 375px) {
  .service-final-banner .service-actions > a.c-btn { padding-inline: 6px; gap: 4px; }
  .service-final-banner .service-actions > a.c-btn > img { width: 20px; height: 20px; }
}

/* has-service-landing */
body.has-service-landing .header { position: fixed; top: 0; width: 100%; height: auto; background: transparent; border: 0; opacity: 1; visibility: visible; transform: none; }
body.has-service-landing .header:not(.is-scrolled) .header__brand-color { display: none; }
body.has-service-landing .header:not(.is-scrolled) .header__brand-white { display: block !important; }
body.has-service-landing .header:not(.is-scrolled) .header__nav { color: white; }
body.has-service-landing .header:not(.is-scrolled) .burger { color: white; }
body.has-service-landing .header:not(.is-scrolled) .burger span { background: white; }
body.has-service-landing .header.is-scrolled { background: rgb(255 255 255 / 97%); }
body.has-service-landing.is-menu-open .header { background: white; border-bottom: 1px solid rgb(0 95 115 / 12%); }
body.has-service-landing.is-menu-open .header .header__brand-color { display: block !important; }
body.has-service-landing.is-menu-open .header .header__brand-white { display: none !important; }
body.has-service-landing.is-menu-open .header .burger { color: var(--black1); }
body.has-service-landing.is-menu-open .header .burger span { background: var(--black1); }

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

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

/* service-final-cta */
.service-final-cta { position: relative; isolation: isolate; color: white; text-align: center; background: url('../img/service-final-cta.webp') center / cover; }
.service-final-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--service-gradient); opacity: .6; }
.service-final-cta h2 { font-size: var(--service-font-40-24); font-weight: 700; line-height: 1.6; }
.service-final-cta .service-actions { margin-top: 40px; }
@media screen and (max-width: 860px) {
  .service-final-cta h2 { font-size: 24px; }
  .service-final-cta .service-actions { margin-top: 32px; }
}
@media screen and (max-width: 375px) {
  .service-final-cta h2 { font-size: 21px; }
}

/* service-chip-heading */
.service-chip-heading { width: fit-content; max-width: 100%; margin-inline: auto; padding: 14px 40px; color: white; background: var(--gradient1); font-size: 28px; line-height: 1.6; font-weight: 600; text-align: center; }
@media screen and (max-width: 860px) {
  .service-chip-heading { font-size: 16px; font-weight: 700; padding: 17px 32px; }
}

/* service-carousel */
.service-carousel__track { display: flex; gap: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(20px,calc((100% - 706px)/2)); margin-top: 40px; }
.service-carousel__track::-webkit-scrollbar { display: none; }
.service-carousel__slide { flex: 0 0 706px; scroll-snap-align: center; }
.service-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.service-carousel__dots button { width: 10px; height: 10px; border: 0; border-radius: 50%; padding: 0; background: #d2dbde; cursor: pointer; }
.service-carousel__dots button[aria-current='true'] { background: var(--main1); }
@media screen and (max-width: 860px) {
  .service-carousel__track { gap: 16px; padding-inline: max(20px,calc((100% - 320px)/2)); margin-top: 32px; }
  .service-carousel__slide { flex-basis: 320px; }
  .service-carousel__dots { margin-top: 16px; }
  .service-carousel__dots button { width: 8px; height: 8px; }
}

/* service-keep */
.service-keep { display: inline-block; }

/* service-pricing */
.service-pricing__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; margin-top: 88px; }
.service-pricing__notes { margin-top: 32px; font-size: 13px; line-height: 1.7; }
.service-pricing--rpo .service-pricing__grid { margin-top: 96px; }
.service-pricing--rpo .service-price-table th, .service-pricing--rpo .service-price-table td { padding-block: 10px; }
@media screen and (max-width: 860px) {
  .service-pricing__grid, .service-pricing--rpo .service-pricing__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .service-pricing__notes { font-size: 12px; margin-top: 30px; }
}

/* service-price-card */
.service-price-card { display: flex; flex-direction: column; min-height: 853px; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 10px rgb(0 0 0 / 5%); }
.service-price-card > header { padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: white; background: var(--gradient1); }
.service-price-card > header h3 { font-size: 28px; line-height: 1.6; font-weight: 600; }
.service-price-card > header span { padding: 2px 18px; color: var(--main1); background: white; border-radius: 99px; font-weight: 700; }
.service-price-card__body { padding: 24px 32px; display: flex; flex-direction: column; flex: 1; gap: 64px; }
.service-price-card__intro { text-align: center; }
.service-price-card__amount { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 24px; line-height: 1; font-weight: 700; }
.service-price-card__amount strong { font: 700 80px/1 var(--barlow); background: var(--gradient1); background-clip: text; color: transparent; }
.service-price-card__amount b { font-size: 26px; }
.service-price-card__term { display: table; margin: 16px auto 0; border: 1px solid var(--main1); border-radius: 99px; padding: 6px 20px; font-size: 13px; font-weight: 700; color: var(--main1); line-height: 1.2; }
.service-price-card__intro h4 { margin: 32px 0 16px; font-size: 18px; line-height: 1.8; color: var(--main1); font-weight: 700; }
.service-price-card__recommend { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.service-price-card__checklist { position: relative; flex: 1; min-height: 272px; border: 1px solid var(--main1); border-radius: 12px; padding: 40px 24px; }
.service-price-card__checklist h4 { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); padding: 6px 22px; border-radius: 99px; color: white; background: var(--main1); font-size: 18px; font-weight: 700; line-height: 1.8; white-space: nowrap; }
.service-price-card__checklist ul { display: grid; gap: 12px; }
.service-price-card__checklist li { display: flex; align-items: flex-start; gap: 6px; }
.service-price-card__checklist img { width: 20px; height: 20px; margin-top: 4px; flex-shrink: 0; }
@media screen and (max-width: 1200px) and (min-width: 861px) {
  .service-price-card__body { padding-inline: 24px; }
  .service-price-card__intro .service-pc-only { display: none; }
  .service-price-card__checklist { padding-inline: 16px; }
}
@media screen and (max-width: 860px) {
  .service-price-card { min-height: 0; border-radius: 14px; }
  .service-price-card > header { gap: 8px; padding: 18px 16px 16px; }
  .service-price-card > header h3 { font-size: 20px; }
  .service-price-card > header span { padding: 4px 14px; font-size: 12px; line-height: 1.2; }
  .service-price-card__body { padding: 20px 20px 24px; gap: 32px; }
  .service-price-card__amount { gap: 6px; font-size: 18px; line-height: 1.2; }
  .service-price-card__amount strong { font-size: 56px; line-height: 1.2; }
  .service-price-card__amount b { font-size: 20px; }
  .service-price-card__term { padding: 5px 16px; font-size: 12px; margin-top: 4px; }
  .service-price-card__intro h4 { margin: 16px 0 7px; line-height: 1.6; }
  .service-price-card__intro > p:last-child { text-align: left; }
  .service-price-card__recommend { gap: 12px; }
  .service-price-card__checklist { min-height: 0; padding: 32px 16px 18px; border-color: rgb(0 95 115 / 40%); border-radius: 10px; }
  .service-price-card__checklist h4 { top: -13px; padding: 5px 18px; font-size: 13px; line-height: 1.2; }
  .service-price-card__checklist ul { gap: 8px; }
  .service-price-card__checklist img { width: 16px; height: 16px; margin-top: 5px; }
}
@media screen and (max-width: 375px) {
  .service-price-card__body { padding-inline: 16px; }
  .service-price-card__checklist { padding-inline: 12px; }
}
.service-price-card__sp-break { display: none; }
.service-price-card__intro h4 > span { white-space: nowrap; }
@media screen and (max-width: 860px) {
  .service-price-card__sp-break { display: block; }
  .service-price-card__intro h4 { font-size: 16px; }
}

/* service-plan-contact */
.service-plan-contact { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 10px; color: white; background: var(--gradient1); font-weight: 700; line-height: 1.2; }
.service-plan-contact img { width: 20px; height: 20px; }
@media screen and (max-width: 860px) {
  .service-plan-contact { gap: 10px; font-size: 15px; line-height: 21px; padding: 14px; border-radius: 8px; }
}

/* service-price-table */
.service-price-table { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 10px rgb(0 0 0 / 5%); }
.service-price-table h3 { margin: 0; padding: 24px 16px; color: white; background: var(--gradient1); text-align: center; font-size: 18px; font-weight: 700; line-height: 1.8; }
.service-price-table table { flex: 1; width: 100%; border-collapse: collapse; }
.service-price-table th { text-align: left; font-weight: 400; padding: 14px 0 14px 63px; }
.service-price-table td, .service-price-table thead th:last-child { width: 144px; text-align: center; padding: 14px 63px 14px 0; }
.service-price-table thead { border-bottom: 1.5px solid rgb(0 95 115 / 60%); color: var(--main1); }
.service-price-table thead th { font-weight: 700; padding-block: 16px; }
.service-price-table tbody tr:nth-child(even) { background: var(--gray1); }
.service-price-table__dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--main1); }
@media screen and (max-width: 1200px) and (min-width: 861px) {
  .service-price-table th { padding-left: 24px; }
  .service-price-table td, .service-price-table thead th:last-child { width: 80px; padding-right: 24px; }
}
@media screen and (max-width: 860px) {
  .service-price-table h3 { font-size: 14px; padding: 13px 12px; }
  .service-price-table th { padding: 11px 0 11px 15px; }
  .service-price-table td, .service-price-table thead th:last-child { width: 63px; padding: 11px 15px 11px 0; }
  .service-price-table thead th, .service-pricing--rpo .service-price-table th, .service-pricing--rpo .service-price-table td { padding-block: 10px; }
  .service-price-table__dot { width: 8px; height: 8px; }
}
@media screen and (max-width: 375px) {
  .service-price-table h3 { font-size: 12px; }
}
@media screen and (max-width: 860px) {
  .service-price-table tbody tr { height: 47.6px; }
}

/* service-flow */
.service-flow { background: var(--gray1); }
.service-flow__steps { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,250px)); gap: 56px; justify-content: center; margin-top: 64px; isolation: isolate; }
.service-flow__steps::before { content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; top: 50%; height: 10px; background: var(--main1); }
.service-flow__steps > li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 128px 16px 24px; border-radius: 8px; background: white; box-shadow: 0 4px 10px rgb(0 0 0 / 10%); min-height: 360px; }
.service-flow__badge { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; color: white; background: var(--main1); border-radius: 8px 8px 0 0; font-family: var(--barlow); font-weight: 700; letter-spacing: .08em; }
.service-flow__badge span { font-size: 24px; line-height: 19.6px; }
.service-flow__badge b { font-size: 40px; line-height: 1; }
.service-flow__badge::after { content: ''; position: absolute; top: 100%; left: calc(50% - 7px); border-top: 12px solid var(--main1); border-inline: 7px solid transparent; }
.service-flow__steps > li > img { width: 64px; height: 64px; }
.service-flow__steps h3 { font-size: 18px; font-weight: 700; line-height: 1.8; margin-top: 16px; text-align: center; }
.service-flow__steps p { margin-top: 8px; letter-spacing: .005em; width: 100%; }
@media screen and (max-width: 1200px) and (min-width: 861px) {
  .service-flow__steps { gap: 24px; }
  .service-flow__steps h3 { font-size: 16px; }
}
@media screen and (max-width: 860px) {
  .service-flow__steps { grid-template-columns: minmax(0,350px); gap: 24px; margin-top: 40px; }
  .service-flow__steps::before { inset: 5% auto 5% calc(50% - 3px); height: auto; width: 6px; }
  .service-flow__steps > li { min-height: 324px; }
}

/* service-cases */
.service-cases { position: relative; isolation: isolate; background: var(--gradient1); border-radius: 50% 50% 0 0 / 140px 140px 0 0; }
.service-cases::before { content: ''; position: absolute; inset: 0; background: var(--gray1); z-index: -2; }
.service-cases::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--gradient1); z-index: -1; }
.service-cases__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 64px; }
@media screen and (max-width: 860px) {
  .service-cases { border-radius: 50% 50% 0 0 / 40px 40px 0 0; }
  .service-cases__grid { grid-template-columns: 1fr; margin-top: 40px; gap: 24px; }
}
.service-cases__intro { margin-top: 24px; text-align: center; color: white; }
@media screen and (max-width: 860px) {
  .service-cases__intro { margin-top: 20px; text-align: left; }
}

/* service-case */
.service-case { border-radius: 12px; background: white; }
.service-case > a { display: block; padding: 24px; height: 100%; }
.service-case__number { display: block; color: var(--main1); font: 700 14px/1.4 var(--barlow); letter-spacing: .08em; }
.service-case__tag { display: table; margin-top: 12px; color: white; background: var(--main1); padding: 4px 12px; border-radius: 99px; font-size: 14px; font-weight: 700; }
.service-case h3 { margin: 4px 0 20px; font-size: 18px; line-height: 1.8; font-weight: 500; }
.service-case h4 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--main1); font-size: 28px; line-height: 1.6; color: var(--main1); }
@media screen and (max-width: 860px) {
  .service-case h3 { font-size: 16px; }
  .service-case h4 { font-size: 24px; }
}

/* service-info-cta */
.service-info-cta { position: relative; isolation: isolate; padding: 120px 0; color: white; background: url('../img/sns-info-cta-14-final-cta.webp') center / cover; }
.service-info-cta::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--service-gradient); opacity: .7; }
.service-info-cta h2 { font-size: 40px; font-weight: 700; line-height: 1.6; text-align: center; }
.service-info-cta .c-btn { display: flex; margin: 40px auto 0; width: 250px; height: 60px; }
@media screen and (max-width: 860px) {
  .service-info-cta { padding: 122px 0 113px; }
  .service-info-cta h2 { font-size: 24px; }
  .service-info-cta .c-btn { margin-top: 28px; }
}
.service-info-cta .c-btn { flex-shrink: 0; min-height: 60px; }

/* service-faq */
.service-faq__intro { margin-top: 64px; text-align: center; }
@media screen and (max-width: 860px) {
  .service-faq__intro { margin-top: 32px; }
}
.service-faq__list { max-width: 800px; margin: 64px auto 0; margin-top: 56px; }
.service-faq .service-actions { margin-top: 56px; }
@media screen and (max-width: 860px) {
  .service-faq__list, .service-faq .service-actions { margin-top: 40px; }
  .service-faq .service-actions .c-btn { height: 54px; }
}

/* service-faq-item */
.service-faq-item { border-block: 1px solid #d1d5db; }
.service-faq-item summary { display: flex; align-items: center; gap: 20px; padding: 24px 16px; border-bottom: 1px solid #e5e7eb; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.6; font-weight: 500; }
.service-faq-item summary::-webkit-details-marker { display: none; }
.service-faq-item__q { flex-shrink: 0; color: var(--main1); font: 700 20px/1.2 var(--barlow); letter-spacing: .08em; }
:is(.service-landing--indeed, .service-landing--ai, .service-landing--pricing) .service-faq-item__q { color: transparent; background: var(--gradient2); background-clip: text; -webkit-background-clip: text; }
.service-faq-item summary > span:nth-child(2) { flex: 1; }
.service-faq-item summary b { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.service-faq-item summary b::before, .service-faq-item summary b::after { content: ''; position: absolute; width: 14px; height: 2px; top: 9px; left: 3px; background: var(--main1); border-radius: 1px; }
.service-faq-item summary b::after { transform: rotate(90deg); }
.service-faq-item[open] summary b::after { transform: none; }
.service-faq-item__answer { padding: 16px; border-bottom: 1px solid #e5e7eb; background: var(--gray1); }
.service-faq-item__answer > span { display: block; font: 700 20px/1.2 var(--barlow); letter-spacing: .08em; color: var(--accent1); margin-bottom: 8px; }
@media screen and (max-width: 860px) {
  .service-faq-item summary { gap: 12px; }
  .service-faq-item { border-bottom: 0; }
  .service-faq-item:last-child { border-bottom: 1px solid #d1d5db; }
  .service-faq-item summary { padding: 16px; min-height: 83px; font-size: 16px; border-bottom: 0; }
}
@media screen and (min-width: 861px) {
  .service-faq-item { border: 0; box-shadow: inset 0 -1px #d1d5db; }
  .service-faq-item:first-child { box-shadow: inset 0 1px #d1d5db, inset 0 -1px #d1d5db; }
  .service-faq-item summary { border: 0; min-height: 77px; }
}
.service-faq-item__answer p { display: block; }
.service-faq-item__answer p br + br { display: none; }
.service-faq-item__answer p { white-space: normal; }
.service-faq-item__list { display: grid; gap: 4px; margin-block: 10px; }
.service-faq-item__list li { position: relative; display: block; padding-left: 1em; text-indent: 0; }
.service-faq-item__list li::before { content: '・'; position: absolute; left: 0; }

/* service-pc-only */
@media screen and (max-width: 860px) {
  .service-pc-only { display: none; }
}

/* photo-hero */
.photo-hero { position: relative; isolation: isolate; min-height: 803px; color: #fff; background: var(--service-gradient); }
.photo-hero__inner { position: relative; z-index: 2; min-height: 803px; display: flex; align-items: center; }
.photo-hero__content { width: min(650px, 51%); }
.photo-hero h1 { font-size: 40px; line-height: 1.58; font-weight: 800; letter-spacing: .015em; }
.photo-hero h1 strong { display: inline-block; margin-block: 3px; padding: 0 16px; color: var(--service-dark); background: #fff; font-size: 40px; font-weight: 800; }
.photo-hero p { max-width: 610px; margin-top: 24px; font-size: 16px; line-height: 1.8; }
.photo-hero__phrase { white-space: nowrap; }
.photo-hero__brand-ending { display: inline; }
.photo-hero .service-actions { justify-content: flex-start; margin-top: 28px; }
.photo-hero__kicker { display: block; margin-bottom: 18px; font: 700 18px/1.3 var(--barlow); letter-spacing: .06em; }
.photo-hero__photos { position: absolute; z-index: 1; top: -55px; left: calc(50% - 10px); display: flex; gap: 12px; width: 660px; height: calc(100% + 160px); overflow: hidden; pointer-events: none; }
.photo-hero__column { flex: 1 1 0; min-width: 0; overflow: hidden; }
.photo-hero__ticker { display: flex; flex-direction: column; will-change: transform; }
.photo-hero__column--up .photo-hero__ticker { animation: photo-hero-up 72s linear infinite; }
.photo-hero__column--down .photo-hero__ticker { animation: photo-hero-down 72s linear infinite; }
.photo-hero__group { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; flex: none; }
.photo-hero__tile { display: block; height: 245px; overflow: hidden; flex: none; background: #fff; transform: rotate(-5deg) skewX(-5deg); }
.photo-hero__tile--mobile-only { display: none; }
.photo-hero__tile picture { display: block; width: 100%; height: 100%; }
.photo-hero__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transform: skewX(5deg) rotate(5deg) scale(1.16); }
@media (prefers-reduced-motion: reduce) {
  .photo-hero__ticker { animation: none !important; }
}
@media screen and (max-width: 1200px) and (min-width: 861px) {
  .photo-hero__content { width: 55%; }
  .photo-hero__photos { left: 54%; width: 580px; }
  .photo-hero h1 { font-size: clamp(30px,3vw,40px); }
}
@media screen and (max-width: 860px) {
  .photo-hero { overflow: hidden; }
  .photo-hero__ticker { animation: none !important; }
  .photo-hero h1 { font-size: clamp(26px,6vw,34px); }
  .photo-hero h1 strong { font-size: inherit; }
  .photo-hero p { font-size: 15px; }
  .photo-hero .service-actions { margin-top: 24px; }
  .photo-hero--site .photo-hero__column--up .photo-hero__ticker, .photo-hero--brand .photo-hero__column--up .photo-hero__ticker { transform: none; animation: photo-hero-up 72s linear infinite !important; }
  .photo-hero--site .photo-hero__column--down .photo-hero__ticker, .photo-hero--brand .photo-hero__column--down .photo-hero__ticker { transform: none; animation: photo-hero-down 72s linear infinite !important; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-hero--site .photo-hero__ticker, .photo-hero--brand .photo-hero__ticker { animation: none !important; }
}

/* service-diagonal-divider */
.service-diagonal-divider { position: relative; height: 60px; background: #fff; }
.service-diagonal-divider::before { position: absolute; inset: 0; content: ''; }
.service-diagonal-divider--pale-to-white::before { background: #f5faff; clip-path: polygon(0 0,100% 0,0 100%); }
.service-diagonal-divider--white-to-pale { background: #f5faff; }
.service-diagonal-divider--white-to-pale::before { background: #fff; clip-path: polygon(0 0,100% 0,0 100%); }
@media screen and (max-width: 860px) {
  .service-diagonal-divider { display: none; }
}

/* base */
.site-strategy__cards article > span, .brand-detail__goals article > span { display: block; color: var(--main1); font: 700 14px/1.4 var(--barlow); letter-spacing: .05em; }
.site-strategy__cards article > span b, .brand-detail__goals article > span b { font-size: 32px; }
.site-contents__scroll, .brand-services__matrix { max-width: 100%; overflow-x: auto; }

/* service-new-info */
.service-new-info { position: relative; isolation: isolate; padding: 130px 0; background: var(--service-gradient); color: #fff; }
.service-new-info::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('../img/site-lineup-pc-thumbnail-placeholder.webp') center 30% / cover; opacity: .12; }
.service-new-info h2 { font-size: 40px; line-height: 1.6; text-align: center; }
.service-new-info .c-btn { display: flex; width: 260px; height: 60px; margin: 40px auto 0; }
@media screen and (max-width: 860px) {
  .service-new-info { padding-block: 108px; }
  .service-new-info h2 { font-size: 26px; }
}
@media screen and (max-width: 540px) {
  .service-new-info .c-btn { width: 220px; }
}

/* service-new-final */
.service-new-final { padding: 100px 0; background: var(--service-banner-gradient); color: #fff; text-align: center; }
.service-new-final h2 { font-size: 40px; line-height: 1.5; }
@media screen and (max-width: 860px) {
  .service-new-final h2 { font-size: 26px; }
}
.service-new-final p { margin-top: 22px; }
.service-new-final .service-actions { margin-top: 40px; }
@media screen and (max-width: 860px) {
  .service-new-final { padding-block: 55px; }
}

/* ==========================================================================
   Layered slopes: recruitment site strategy / AI case
   ========================================================================== */
:is(.site-strategy, .ai-case) { --service-slope: clamp(60px, 8vw, 110px); --service-band: clamp(24px, 3.2vw, 45px); position: relative; isolation: isolate; padding: 0; color: white; background: transparent; }
:is(.site-strategy__accent, .ai-case__accent) { position: absolute; z-index: -1; inset: 0; background: var(--gradient2); clip-path: polygon(0 var(--service-slope), 100% 0, 100% calc(100% - var(--service-slope)), 0 100%); }
:is(.site-strategy__body, .ai-case__body) { position: relative; z-index: 0; padding-block: calc(var(--service-slope) + 60px); background: var(--service-gradient); clip-path: polygon(0 var(--service-slope), 100% var(--service-band), 100% calc(100% - var(--service-slope)), 0 calc(100% - var(--service-band))); }
@media screen and (max-width: 860px) {
  :is(.site-strategy__body, .ai-case__body) { padding-block: calc(var(--service-slope) + 30px); }
}