:root { --detail-width: 1012px; --narrow-width: 780px; --detail-blue: #0080ec; }

.detail-container,
.narrow-container { width: min(calc(100% - 48px), var(--detail-width)); margin-inline: auto; }
.narrow-container { max-width: var(--narrow-width); }

.auto-hero { padding: 31px 0 42px; }
.auto-hero__inner { min-height: 405px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; width: 100%; max-width: 1060px; }
.auto-hero h1 { margin: 0 0 30px; line-height: 1; }
.auto-hero h1 span { display: block; font-size: clamp(48px, 5vw, 65px); }
.auto-hero h1 small { display: block; margin-top: 10px; font-size: 34px; letter-spacing: .05em; }
.auto-hero__content > p { margin: 0 0 29px; font-size: 18px; line-height: 1.88; letter-spacing: .025em; }
.auto-hero__image { width: 100%; align-self: start; margin: 34px -19px 0 -24px; }

.detail-button { width: fit-content; min-width: 324px; min-height: 54px; padding: 11px 15px 11px 28px; display: inline-flex; align-items: center; justify-content: center; gap: 25px; color: #fff; border-radius: 999px; background: var(--detail-blue); font-size: 20px; font-weight: 700; transition: opacity .2s, transform .2s; }
.detail-button span { width: 20px; height: 20px; display: grid; place-items: center; color: var(--detail-blue); border-radius: 50%; background: #fff; font-size: 8px; }
.detail-button:hover,.detail-button:focus-visible { opacity: .8; transform: translateY(-2px); }

.auto-overview { padding: 32px 0 0; text-align: center; }
.auto-overview .detail-container { width: min(calc(100% - 48px), 1160px); }
.auto-overview h2,.before-after h2,.steps h2 { margin: 0; font-size: 34px; line-height: 1.5; }
.auto-overview__features { width: min(100%, 650px); margin: 31px auto 69px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; justify-content: center; }
.auto-overview__features li { aspect-ratio: 1; padding: 10px; display: flex; gap: 0.5rem; flex-direction: column; align-items: center; justify-content: center; color: #fff; border-radius: 50%; background: #333; }
.auto-overview__features li span { height: 57px; display: grid; place-items: center; }
.auto-overview__features img { width: 54px; max-height: 54px; object-fit: contain; }
.auto-overview__features b { font-size: 18px; line-height: 1.4; }
.auto-overview h3 { margin: 0 0 25px; font-size: 34px; }
.auto-overview__problems { width: min(100%, 1120px); margin: 0 auto; padding: 22px 35px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px 25px; text-align: left; border-radius: 10px; background: #f7f7f7; font-size: 18px; font-weight: 600; }
.auto-overview__problems li { display: flex; align-items: center; }
.auto-overview__problems li::before { content: "✓"; width: 22px; height: 22px; flex: 0 0 auto; display: inline-grid; place-items: center; margin-right: 8px; padding-top: 4px; color: #fff; border-radius: 50%; background: #333; font-size: 16px; font-weight: 700; line-height: 1; vertical-align: -2px; }
.down-arrow { width: 80px; aspect-ratio: 118 / 74; display: block; margin: 35px auto 21px; background: url("/service/ibeeconnect/images/ai-response/down-arrow.webp") center / contain no-repeat; }

.auto-points { padding: 58px 0 100px; color: #fff; background: var(--detail-blue); }
.auto-points > .detail-container > h2 { margin: 0 0 38px; text-align: center; font-size: 28px; line-height: 1.45; }
.auto-points__panel { padding: 20px 56px; border-radius: 12px; color: #333; background: #fff; }
.point-card { min-height: 275px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; gap: 45px; padding: 60px 0; border-bottom: 2px solid #e6e6e6; }
.point-card:last-child { border-bottom: 0; }
.point-card__text > b { display: block; color: var(--detail-blue); font-size: 56px; line-height: 1; font-weight: 600; }
.point-card h3 { margin: 13px 0 12px; font-size: 28px; line-height: 1.55; }
.point-card p { margin: 0; font-size: 16px; line-height: 1.8; }
.point-card > img { width: 100%; }

.before-after { padding: 72px 0 65px; text-align: center; }
.before-after h2 { margin-bottom: 35px; }
.before-after__table-wrap { width: min(100%, 720px); margin-inline: auto; overflow: hidden; border: 1px solid #e1e5e8; border-radius: 14px; background: #fff; }
.before-after__table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #333; }
.before-after__table th,.before-after__table td { width: 50%; text-align: center; vertical-align: middle; }
.before-after__table th + th,.before-after__table td + td { border-left: 1px solid #e1e5e8; }
.before-after__table thead th { height: 70px; padding: 12px; font-size: 18px; font-weight: 500; }
.before-after__table thead span { min-width: 76px; padding: 7px 18px; display: inline-block; color: #fff; background: #333; line-height: 1.2; }
.before-after__table thead th:last-child span { background: var(--detail-blue); }
.before-after__table tbody tr { border-top: 1px solid #e1e5e8; }
.before-after__table tbody td { height: 61px; padding: 12px 18px; font-size: 18px; font-weight: 600; line-height: 1.45; }
.before-after__table tbody td:last-child { color: #0876df; }

.use-cases { padding: 48px 0 80px; }
.use-cases .narrow-container { max-width: 850px; }
.use-cases h2 { margin: 0 0 28px; text-align: center; font-size: 34px; }
.use-cases__list { display: grid; gap: 38px; }
.use-case { overflow: hidden; border-radius: 7px; background: #fff; box-shadow: 0 4px 17px rgb(0 0 0 / 8%); }
.use-case h3 { margin: 0; padding: 8px 20px; color: #fff; background: #248df0; text-align: center; font-size: 20px; }
.use-case > div { display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 32px; padding: 22px 34px; }
.use-case img { width: 100%; border-radius: 4px; }
.use-case__features { margin: 0 0 16px; font-size: 18px; line-height: 1.65; }
.use-case__features li::before { content: "・"; }
.use-case__description { margin: 0; font-size: 16px; line-height: 1.75; }

.steps { position: relative; padding: 6rem 0 7rem; text-align: center; }
.steps .narrow-container { max-width: 760px; }
.steps h2 { margin: 0 0 18px; color: #3a3a3a; font-size: 2.25rem; line-height: 1.55; font-weight: 700; }
.steps__lead { margin: 0 0 56px; color: #3a3a3a; font-size: 1.125rem; line-height: 1.7; font-weight: 600; }
.steps__list { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.step-card { min-height: 160px; position: relative; padding: 35px 30px 70px; display: grid; grid-template-columns: 1fr 2fr 4fr; align-items: center; gap: 1.5rem; overflow: visible; text-align: left; background: transparent; filter: drop-shadow(0 7px 10px rgb(0 0 0 / 14%)); }
.step-card:last-child { padding-bottom: 3rem; }
.step-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%); }
.step-card:last-child::before { clip-path: none; }
.step-card__number,.step-card > img,.step-card > div { position: relative; z-index: 2; }
.step-card__number { color: #0f6ae6; font-size: 3.75rem; line-height: 1; font-weight: 600; }
.step-card > img { width: 100%; }
.step-card h3 { margin: 0; padding-bottom: .5rem; color: #3a3a3a; font-size: 1.75rem; line-height: 1.5; font-weight: 700; }
.step-card p { margin: 0; color: #3a3a3a; font-size: .9375rem; line-height: 2; font-weight: 500; }

.detail-cta { padding: 65px 0 72px; color: #fff; background: var(--detail-blue); text-align: center; }
.detail-cta h2 { margin: 0 0 15px; font-size: 34px; line-height: 1.55; }
.detail-cta p { margin: 0 0 27px; font-size: 18px; line-height: 1.8; }
.detail-cta .detail-button { width: 100%; max-width: 410px; padding: 15px 15px 15px 28px; font-size: 20px; }
.detail-button--white { color: var(--detail-blue); background: #fff; }
.detail-button--white span { color: #fff; background: var(--detail-blue); }

@media (max-width: 800px) {
  .detail-container,.narrow-container { width: min(calc(100% - 36px), var(--detail-width)); }
  .auto-overview .detail-container { width: calc(100% - 36px); }
  .auto-hero__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .detail-button { min-width: 0; width: min(100%, 340px); font-size: 17px; }
  .auto-overview h2,.before-after h2 { font-size: 28px; }
  .auto-overview__features { max-width: 410px; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .auto-overview__features li { width: 100%; max-width: 170px; justify-self: center; }
  .auto-overview__problems { grid-template-columns: 1fr; padding: 20px; font-size: 16px; }
  .point-card { gap: 25px; }
}

@media (max-width: 700px) {
  .auto-hero { padding: 22px 0 40px; }
  .auto-hero__inner { display: flex; flex-direction: column; min-height: 0; gap: 0; }
  .auto-hero__content { display: contents; }
  .auto-hero h1 { order: 2; margin-bottom: 22px; }
  .auto-hero h1 span { font-size: clamp(42px, 14vw, 58px); }
  .auto-hero h1 small { font-size: 18px; }
  .auto-hero__image { order: 3; margin: 0 0 28px; }
  .auto-hero__content > p { order: 4; margin-bottom: 22px; font-size: 14px; }
  .auto-hero__content > p br { display: none; }
  .auto-hero .detail-button { order: 5; }
  .auto-overview h3 { font-size: 29px; line-height: 1.5; }
  .auto-points { padding-block: 50px 65px; }
  .auto-points > .detail-container > h2 { font-size: 30px; }
  .auto-points__panel { padding: 8px 20px; }
  .point-card { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
  .point-card > img { grid-row: 1; }
  .point-card__text > b { font-size: 29px; }
  .before-after__table-wrap { width: 100%; border-radius: 10px; }
  .before-after__table thead th { height: 58px; padding: 9px 6px; font-size: 16px; }
  .before-after__table thead span { min-width: 68px; padding: 6px 12px; }
  .before-after__table tbody td { height: 58px; padding: 10px 8px; font-size: 14px; }
  .use-case > div { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .use-case img { max-width: 390px; margin-inline: auto; }
  .detail-cta { padding-block: 55px 62px; }
  .detail-cta h2 { font-size: 21px; }
  .detail-cta .detail-button { width: min(100%, 390px); margin-inline: auto; padding-left: 18px; font-size: 18px; }
}

@media (max-width: 768px) {
  .steps { padding: 0 20px 80px; }
  .steps .narrow-container { width: 100%; }
  .steps h2 { margin-bottom: 0; padding-top: 5rem; }
  .steps__lead { margin-bottom: 40px; }
  .step-card { grid-template-columns: 1fr; gap: 18px; padding: 32px 24px 48px; text-align: center; }
  .step-card::before { clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); }
  .step-card:last-child { padding-bottom: 3rem; }
  .step-card:last-child::before { clip-path: none; }
  .step-card__number { font-size: 3rem; }
  .step-card > img { width: min(100%, 260px); margin-inline: auto; }
  .step-card h3 { font-size: 1.5rem; }
  .step-card p { padding-bottom: 2rem; font-size: 1rem; text-align: left; }
  .step-last-card p { padding-bottom: 0; }
}