/* ホームページ・LP制作 service page: calm AI brand system, with a compact service-detail rhythm. */
.web-production-page {
  --webprod-ink: #292929;
  --webprod-muted: #6b6b68;
  --webprod-line: #d5d5d1;
  --webprod-soft: #f5f5f5;
  --webprod-card: #fafafa;
  background: #f7f7f5;
  color: var(--webprod-ink);
}

.webprod-shell { width: min(100% - 40px, 1080px); margin: 0 auto; }
.webprod-hero { padding: clamp(50px, 7.2vw, 97px) 0; background: linear-gradient(135deg, #1e1e1e 0%, #202020 100%); color: #fff; text-align: center; }
.webprod-hero__inner { max-width: 820px; }
.webprod-kicker { margin: 0 0 16px; color: #71857a; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: none; }
.webprod-hero .webprod-kicker { color: #8ce0d9; }
.webprod-hero h1, .webprod-section h2 { margin: 0; font-weight: 400; letter-spacing: .035em; line-height: 1.35; text-wrap: balance; }
.webprod-hero h1 { width: 100%; max-width: none; font-size: clamp(2.35rem, 4.8vw, 4rem); }
.webprod-hero__lead { margin: 24px 0 0; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.9; text-wrap: balance; }
.webprod-hero__button { margin-top: 30px; border-color: #fff; background: #fff; color: #222; }
.webprod-hero__button:hover { border-color: #f5f5f5; background: #f5f5f5; color: #222; }
.webprod-section { padding: clamp(65px, 7.7vw, 99px) 0 clamp(76px, 9vw, 116px); background: #fff; }
.webprod-section--soft { background: var(--webprod-soft); }
.webprod-section#plans { scroll-margin-top: 92px; }
.webprod-section h2 { max-width: 860px; margin-right: auto; margin-left: auto; color: var(--webprod-ink); font-size: clamp(1.8rem, 3.5vw, 2.65rem); text-align: center; }
.webprod-section > .webprod-shell > .webprod-kicker { text-align: center; }
.webprod-mobile-break, .webprod-concept-service-break, .webprod-faq-summary-break, .webprod-faq-summary-break--narrow, .webprod-faq-summary-break--compact, .webprod-contact-break--narrow-first, .webprod-contact-break--sentence, .webprod-contact-break--narrow-final { display: none; }
.webprod-concept-break { display: none; }
.webprod-section-lead { max-width: 720px; margin: 18px auto 0; color: var(--webprod-muted); line-height: 1.85; text-align: center; text-wrap: pretty; }

.webprod-prose { max-width: 760px; text-align: center; }
.webprod-prose p:not(.webprod-kicker) { margin: 24px auto 0; max-width: 720px; color: #526d7c; line-height: 1.9; text-wrap: pretty; }
.webprod-prose p:not(.webprod-kicker) + p:not(.webprod-kicker) { margin-top: 14px; }

.webprod-problem-grid, .webprod-benefit-grid, .webprod-plan-grid, .webprod-flow-grid { display: grid; gap: 16px; margin-top: 42px; }
.webprod-problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.webprod-problem-grid article { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 24px; border: 1px solid var(--webprod-line); background: var(--webprod-card); }
.webprod-problem-break { display: inline; }
.webprod-problem-grid span, .webprod-flow-grid span { color: #71857a; font-size: .76rem; font-weight: 700; letter-spacing: .12em; }
.webprod-problem-grid p, .webprod-benefit-grid p, .webprod-flow-grid p { margin: 0; color: #526d7c; line-height: 1.75; text-wrap: pretty; }
.webprod-benefit-grid p, .webprod-flow-grid p { font-size: .94rem; text-wrap: wrap; }
.webprod-copy-segment { white-space: nowrap; }

.webprod-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.webprod-benefit-grid article { padding: 28px; border-top: 1px solid #9db7ad; border-bottom: 1px solid var(--webprod-line); }
.webprod-benefit-grid span { color: var(--webprod-ink); font-size: 1.08rem; font-weight: 500; }
.webprod-benefit-grid p { margin-top: 12px; }

.webprod-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin: 42px auto 0; }
.webprod-choice-grid article { padding: 30px; border: 1px solid var(--webprod-line); background: #fafafa; }
.webprod-choice-title { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; margin: 0; color: var(--webprod-ink); font-size: 1.18rem; font-weight: 500; line-height: 1.55; }
.webprod-choice-title__type { display: inline-flex; width: max-content; box-sizing: border-box; align-items: center; justify-content: center; padding: 6px 10px 7px; border: 1px solid #9db7ad; color: var(--webprod-ink); font-size: 1.65rem; font-weight: 500; letter-spacing: .04em; line-height: 1; }
.webprod-choice-grid ul { display: grid; gap: 9px; margin: 24px 0 0; padding: 0 0 0 1.1em; color: #526d7c; line-height: 1.75; }
.webprod-reassurance { max-width: 760px; margin: 30px auto 0; color: var(--webprod-muted); line-height: 1.8; text-align: center; }
.webprod-reassurance-break { display: none; }

@media (min-width: 760px) {
  .webprod-choice-title { column-gap: 28px; }
  .webprod-choice-title > span:last-child { min-width: 0; }
}

.webprod-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.webprod-plan { display: flex; min-width: 0; flex-direction: column; padding: 30px; border: 1px solid var(--webprod-line); background: #fff; }
.webprod-plan__main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.webprod-plan__title { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--webprod-ink); font-size: 1.4rem; font-weight: 600; letter-spacing: .015em; line-height: 1.45; }
.webprod-plan__title span { color: #71857a; font-size: 1rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.webprod-plan__headline { margin: 14px 0 0; font-size: 1.24rem; font-weight: 500; line-height: 1.5; text-wrap: balance; }
.webprod-plan__for { margin: 8px 0 20px; color: var(--webprod-muted); font-size: .9rem; line-height: 1.6; text-wrap: balance; }
.webprod-plan-term { white-space: nowrap; }
.webprod-plan dl { display: grid; margin: 0; }
.webprod-plan dl div { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid #e5e5e1; }
.webprod-plan dt, .webprod-plan dd { margin: 0; font-size: .87rem; line-height: 1.55; }
.webprod-plan dt { color: #71857a; white-space: nowrap; }
.webprod-plan dd { color: #526d7c; }
.webprod-plan dd small { color: var(--webprod-muted); font-size: .78rem; white-space: nowrap; }
.webprod-plan .tk-button { width: 100%; box-sizing: border-box; min-height: 48px; margin-top: auto; }
.webprod-plan .tk-button { flex-wrap: wrap; }
.webprod-plan-cta-phrase { white-space: nowrap; }
.webprod-plan-support { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--webprod-line); }
.webprod-plan-support__heading { text-align: center; }
.webprod-plan-support__intro { margin: 0; color: var(--webprod-muted); font-size: .8rem; }
.webprod-plan-support h3 { margin: 6px 0 0; font-size: 1.15rem; font-weight: 500; line-height: 1.5; }
.webprod-plan-support__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 840px; margin: 22px auto 0; }
.webprod-plan-support__option { min-width: 0; padding: 20px; border: 1px solid var(--webprod-line); background: var(--webprod-card); }
.webprod-plan-support__option h4 { margin: 0; font-size: .96rem; font-weight: 600; }
.webprod-plan-support__option p { margin: 6px 0 0; color: #526d7c; font-size: .88rem; line-height: 1.7; text-wrap: pretty; }
.webprod-plan-support__option .webprod-plan-support__price { color: var(--webprod-muted); font-size: .84rem; }
.webprod-plan-support__link { display: table; margin: 20px auto 0; border-bottom: 1px solid currentColor; color: var(--webprod-ink); font-size: .88rem; font-weight: 600; text-decoration: none; }
.webprod-plan-support__link:hover { color: #71857a; }
.webprod-plan-notes { max-width: 840px; margin: 26px auto 0; color: var(--webprod-muted); text-align: center; }
.webprod-plan-notes p { margin: 0; line-height: 1.8; text-wrap: balance; }
.webprod-plan-notes p + p { margin-top: 8px; font-size: .82rem; }
.webprod-plan-note-keep { white-space: nowrap; }

@media (min-width: 760px) and (max-width: 1023px) {
  .webprod-plan-grid { grid-template-columns: 1fr; max-width: 860px; margin: 32px auto 0; }
}

.webprod-works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin: 42px auto 0; }
.webprod-work-card { display: block; padding: 30px; border: 1px solid var(--webprod-line); background: #fafafa; color: inherit; transition: border-color 180ms ease, transform 180ms ease; }
.webprod-work-card:hover { border-color: #71857a; transform: translateY(-2px); }
.webprod-work-card img { display: block; width: calc(100% + 60px); aspect-ratio: 4 / 3; margin: -30px -30px 24px; object-fit: cover; }
.webprod-work-card__type { color: #71857a; font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
.webprod-work-card h3 { margin: 16px 0 0; font-size: 1.24rem; font-weight: 500; }
.webprod-work-card p { margin: 10px 0 0; color: #526d7c; line-height: 1.75; }
.webprod-text-link { display: inline-block; margin-top: 22px; border-bottom: 1px solid currentColor; color: var(--webprod-ink); font-size: .9rem; font-weight: 600; }
.webprod-section-action { margin: 32px 0 0; text-align: center; }
.webprod-section-action .tk-button { border-color: #292929; background: #292929; color: #fff; }

.webprod-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.webprod-flow-grid article { padding: 24px; border-top: 1px solid #9db7ad; }
.webprod-flow-grid h3 { margin: 12px 0 0; font-size: 1.06rem; font-weight: 500; line-height: 1.55; }
.webprod-flow-grid p { margin-top: 10px; }

.webprod-faq { display: grid; max-width: 720px; margin: 42px auto 0; }
.webprod-faq details { border-top: 1px solid var(--webprod-line); }
.webprod-faq details:last-child { border-bottom: 1px solid var(--webprod-line); }
.webprod-faq summary { cursor: pointer; padding: 20px 0; color: var(--webprod-ink); font-weight: 600; line-height: 1.7; }
.webprod-faq p { margin: 0; padding: 0 0 20px; color: var(--webprod-muted); line-height: 1.85; }

.webprod-section--contact { border-top: 1px solid var(--webprod-line); background: #e3edf0; text-align: center; }
.webprod-contact .webprod-kicker { color: #245966; }
.webprod-contact > p:not(.webprod-kicker) { max-width: 680px; margin: 22px auto 0; color: #526d7c; line-height: 1.9; }
.webprod-contact .tk-button { margin-top: 30px; border-color: #222; background: #222; color: #fff; }
.webprod-contact .tk-button:hover { border-color: #333; background: #333; color: #fff; }
.webprod-contact .tk-contact__links { margin-top: 18px; color: #526d7c; }

@media (min-width: 760px) and (max-width: 1023px) {
  .webprod-shell { width: min(100% - 56px, 900px); }
  .webprod-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webprod-choice-grid { grid-template-columns: 1fr; }
  .webprod-choice-grid article { width: 100%; max-width: 452px; box-sizing: border-box; margin-inline: auto; }
  .webprod-reassurance-break { display: inline; }
}

@media (max-width: 759px) {
  .webprod-shell { width: min(100% - 40px, 640px); }
  .webprod-hero { padding: 48px 0 54px; }
  .webprod-hero h1 { font-size: clamp(1.625rem, 8.3vw, 2.25rem); }
  .webprod-hero__lead { margin-top: 20px; font-size: 1rem; }
  .webprod-mobile-break { display: inline; }
  .webprod-section { padding: 61px 0 72px; }
  .webprod-section h2 { font-size: clamp(1.4rem, 6vw, 1.75rem); letter-spacing: .025em; }
  .webprod-section-lead { margin-top: 16px; }
  .webprod-prose p { margin-top: 20px; }
  .webprod-problem-grid, .webprod-benefit-grid, .webprod-choice-grid, .webprod-works-grid, .webprod-flow-grid { grid-template-columns: 1fr; }
  .webprod-problem-grid, .webprod-benefit-grid, .webprod-flow-grid { margin-top: 32px; }
  .webprod-problem-grid article, .webprod-benefit-grid article, .webprod-choice-grid article, .webprod-work-card, .webprod-flow-grid article { padding: 22px 20px; }
  .webprod-work-card img { width: calc(100% + 40px); margin: -22px -20px 20px; }
  .webprod-choice-grid, .webprod-works-grid, .webprod-faq { margin-top: 32px; }
  .webprod-choice-grid article { width: 100%; max-width: 452px; box-sizing: border-box; margin-inline: auto; }
  .webprod-reassurance-break { display: inline; }
  .webprod-plan-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .webprod-plan { padding: 22px 20px; }
  .webprod-plan dl div { grid-template-columns: 4.9em minmax(0, 1fr); gap: 4px; }
  .webprod-plan dt { font-size: .8rem; }
  .webprod-plan__title { font-size: 1.28rem; }
  .webprod-plan__title span { font-size: .92rem; }
  .webprod-plan__headline { margin-top: 12px; font-size: 1.16rem; }
  .webprod-plan__for { margin-bottom: 14px; }
  .webprod-plan .tk-button { min-height: 48px; }
  .webprod-plan-support { margin-top: 30px; padding-top: 22px; }
  .webprod-plan-support__options { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
  .webprod-plan-support__option + .webprod-plan-support__option { margin-top: 14px; }
  .webprod-plan-notes { margin-top: 22px; text-align: center; }
  .webprod-faq summary { padding: 18px 0; }
  .webprod-contact > p:not(.webprod-kicker) { margin-top: 18px; }
  .webprod-contact-break--sentence { display: inline; }
}

@media (max-width: 369px) {
  #benefits-title { font-size: 1.2rem; }
}

@media (max-width: 329px) {
  .webprod-hero__lead { font-size: .95rem; }
  .webprod-benefit-grid article > span { font-size: 1rem; }
}

@media (max-width: 327px) {
  .webprod-plan-notes p:first-child { font-size: .96rem; }
}

@media (min-width: 760px) and (max-width: 1023px) {
  .webprod-plan { padding: 26px 22px; }
}

@media (max-width: 1023px) {
  .webprod-plan .tk-button { padding-inline: 12px; font-size: .9rem; }
}

@media (max-width: 479px) {
  .webprod-concept-service-break { display: inline; }
}

@media (max-width: 359px) {
  .webprod-faq-summary-break { display: inline; }
  .webprod-choice-title { column-gap: 14px; font-size: 1rem; }
  .webprod-choice-title__type { padding: 5px 8px 6px; font-size: 1.45rem; }
}

@media (max-width: 409px) {
  .webprod-faq-summary-break { display: inline; }
  .webprod-faq-summary-break--narrow { display: inline; }
  .webprod-contact-break--sentence { display: none; }
  .webprod-contact-break--narrow-first, .webprod-contact-break--narrow-final { display: inline; }
}

@media (max-width: 339px) {
  .webprod-faq-summary-break--compact { display: inline; }
}

@media (max-width: 359px) {
  .webprod-contact-break--sentence { display: inline; }
}

@media (min-width: 760px) and (max-width: 1099px) {
  .webprod-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 736px; margin-inline: auto; }
}

@media (max-width: 1099px) {
  .webprod-problem-grid article { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 360px; box-sizing: border-box; margin-inline: auto; text-align: center; }
  .webprod-problem-grid p { width: 100%; box-sizing: border-box; }
}

@media (max-width: 1023px) {
  .webprod-concept-break { display: block; }
}

@media (min-width: 1024px) {
  #concept .webprod-prose { max-width: 1080px; }
  #concept-title { max-width: none; font-size: clamp(1.85rem, 3vw, 2.35rem); }
}

@media (prefers-reduced-motion: reduce) {
  .webprod-work-card { transition: none; }
}