:root { --detail-width: 1012px; --narrow-width: 850px; --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); }

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

.detail-button { width: 100%; max-width: 410px; min-height: 54px; padding: 15px 15px 15px 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: 9px; }
.detail-button:hover,.detail-button:focus-visible { opacity: .8; transform: translateY(-2px); }

.translation-overview { padding: 24px 0 0; text-align: center; }
.translation-overview h2,.steps h2 { margin: 0; font-size: 34px; line-height: 1.55; }
.translation-overview__features { width: min(100%,900px); margin: 31px auto 69px; display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.translation-overview__features li { display: flex; flex-direction: column; align-items: center; }
.translation-overview__features li > span { width: 185px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; color: #fff; border-radius: 50%; background: #333; box-shadow: 0 5px 9px rgb(0 0 0/18%); }
.translation-overview__features img { width: auto; height: 76px; object-fit: contain; }
.translation-overview__features b { font-size: 20px; line-height: 1.35; font-weight: 600; }
.translation-overview__features strong { color: #2478e9; font-size: 29px; line-height: 1.55; font-weight: 700; }
.translation-overview__features sup { margin-left: 4px; font-size: 11px; vertical-align: .65em; }
.translation-overview h3 { margin: 0 0 25px; font-size: 34px; }
.translation-overview__problems { width: min(100%,1000px); margin: 0 auto; padding: 22px 35px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px 20px; text-align: left; border-radius: 10px; background: #f7f7f7; font-size: 18px; font-weight: 600; }
.translation-overview__problems li { display: flex; align-items: center; }
.translation-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/phone-number/down-arrow.webp") center/contain no-repeat; }

.translation-flow { padding: 60px 0 95px; color: #fff; background: var(--detail-blue); }
.translation-flow > .detail-container > h2 { margin: 0 0 38px; text-align: center; font-size: 34px; line-height: 1.45; }
.translation-flow__panel { padding: 20px 55px; color: #333; border-radius: 12px; background: #fff; }
.translation-step { min-height: 270px; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 30px; padding: 45px 0; border-bottom: 2px solid #e8e8e8; }
.translation-step:last-child { border-bottom: 0; }
.translation-step__text > b { display: block; color: var(--detail-blue); font-size: 56px; line-height: 1; font-weight: 600; }
.translation-step h3 { margin: 15px 0 7px; font-size: 28px; line-height: 1.55; }
.translation-step p { margin: 0; font-size: 13px; line-height: 1.8; }
.translation-step > img { width: 100%; border-radius: 7px; }
.translation-step--analysis { display: block; padding-top: 38px; }
.translation-step--analysis .translation-step__text { display: flex; align-items: center; gap: 34px; }
.translation-step--analysis .translation-step__text > b { flex: 0 0 auto; }
.translation-step--analysis h3 { margin: 0; font-size: 28px; }
.analysis-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px 32px; }
.analysis-grid li { min-height: 185px; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; border: 2px solid #287ff0; border-radius: 10px; background: #fff; }
.analysis-grid h4 { width: 100%; height: 60px; margin: 0; padding: 7px 5px; display: grid; place-items: center; color: #fff; background: #287ff0; font-size: 20px; line-height: 1.3; }
.analysis-grid p { width: 100%; height: 66px; margin: 0; padding: 10px 8px 3px; display: grid; place-items: start center; color: #111; font-size: 14px; line-height: 1.6; }
.analysis-grid img { width: auto; height: 78px; margin: 10px auto 15px; object-fit: contain; }

.use-cases { padding: 75px 0 80px; }
.use-cases .narrow-container { max-width: 950px; }
.use-cases h2 { margin: 0 0 35px; text-align: center; font-size: 34px; line-height: 1.5; }
.use-cases__list { display: grid; gap: 38px; }
.use-case { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 4px 17px rgb(0 0 0/8%); }
.use-case h3 { margin: 0; padding: 15px 20px; color: #fff; background: #0f6ae6; text-align: center; font-size: 24px; }
.use-case > div { display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: 32px; padding: 22px 34px; }
.use-case img { width: 100%; border-radius: 4px; }
.use-case__text h4 { margin: 0 0 10px; font-size: 18px; line-height: 1.65; }
.use-case__text p { margin: 0; font-size: 16px; line-height: 1.8; }

.steps { position: relative; padding: 6rem 0 7rem; text-align: center; }
.steps .narrow-container { max-width: 760px; }
.steps h2 { margin-bottom: 18px; color: #3a3a3a; font-size: 2.25rem; font-weight: 700; }
.steps__lead { margin: 0 0 56px; font-size: 1.125rem; 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; gap: 1.5rem; grid-template-columns: 1fr 2fr 4fr; align-items: center; overflow: visible; text-align: left; 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; font-size: 1.75rem; line-height: 1.5; }
.step-card p { margin: 0; font-size: .9375rem; line-height: 2; }

.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-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)); }
  .translation-hero__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .translation-overview h3 { font-size: 29px; line-height: 1.5; }
  .translation-overview__problems { grid-template-columns: 1fr; padding: 18px; font-size: 16px; }
  .translation-step { gap: 25px; }
}

@media (max-width:700px) {
  .translation-hero { padding: 22px 0 40px; }
  .translation-hero__inner { display: flex; flex-direction: column; min-height: 0; gap: 0; }
  .translation-hero__content { display: contents; }
  .translation-hero h1 { order: 2; margin-bottom: 22px; }
  .translation-hero h1 span { font-size: clamp(42px,14vw,58px); }
  .translation-hero h1 small { font-size: 22px; }
  .translation-hero__image { order: 3; margin: 0 0 28px; }
  .translation-hero__content > p { order: 4; margin-bottom: 22px; font-size: 14px; }
  .translation-hero__content > p br { display: none; }
  .translation-hero .detail-button { order: 5; }
  .detail-button { max-width: 390px; margin-inline: auto; padding-left: 18px; font-size: 16px; }
  .translation-overview h2 { font-size: 28px; }
  .translation-overview__features { max-width: 420px; grid-template-columns: 1fr; gap: 28px; }
  .translation-overview__features li > span { width: 175px; }
  .translation-overview__features strong { font-size: 26px; }
  .translation-flow { padding-block: 50px 65px; }
  .translation-flow > .detail-container > h2 { font-size: 27px; }
  .translation-flow__panel { padding: 8px 20px; }
  .translation-step { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .translation-step > img { grid-row: 1; }
  .translation-step__text > b { font-size: 34px; }
  .translation-step h3 { font-size: 19px; }
  .translation-step--analysis .translation-step__text { gap: 18px; }
  .translation-step--analysis h3 { font-size: 19px; }
  .analysis-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .analysis-grid h4 { height: 52px; font-size: 12px; }
  .analysis-grid p { height: 64px; font-size: 10px; }
  .use-cases { padding-block: 58px 70px; }
  .use-cases h2 { font-size: 23px; }
  .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 { font-size: 16px; }
}

@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; }
}