/* Tablet layout pass. Keep the existing <=800px and >=1201px layouts intact.
   Viewport widths, not device detection: narrow desktop windows also use this layout. */
@media (min-width: 801px) and (max-width: 1200px) {
  :root { --gutter: 36px; }

  .header__inner { padding-inline: var(--gutter); }
  .header__nav { gap: 20px; }
  .header__nav-link { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .header__logo { flex-shrink: 0; }
  .header__logo img { height: 25px; }
  .scroll-indicator { left: 10px; }
  .site-floating-banner { width: 144px; right: 8px; bottom: 16px; }
  .mv__logo { width: 48vw; }
  .mv__side { right: 20px; }

  /* Keep the original three text lines; use the mobile two-tier photo composition. */
  .message__lead--pc { font-size: clamp(24px, 2.6vw, 30px); }
  .message__scatter { min-height: 0; margin: 32px 0 0; }
  .message__scatter-track {
    height: calc((100vw - 32px) * .6);
    animation: tabletScatterMarquee 24s linear infinite;
  }
  .message__scatter-scene { width: calc(100vw - 32px); height: 100%; }
  .message__scatter-img--1 {
    content: url("../assets/images/home/intro-photo-02-sp.webp");
    left: 2%; top: 5%; width: 34%;
  }
  .message__scatter-img--2 {
    content: url("../assets/images/home/intro-photo-01-sp.webp");
    left: 46%; right: auto; top: 40%; width: 46%;
  }
  .message__scatter-img--3 { display: none; }
  @keyframes tabletScatterMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100vw + 32px)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .message__scatter-track { animation: none; }
  }
  .message__card { margin: 0 var(--gutter); padding: 20px 32px 32px; }
  .message__card > .section-title {
    height: calc(min(1080px, 100vw - 72px) * 878 / 3698);
    margin-bottom: 0;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }
  .message__card .section-title__en {
    align-self: flex-start;
    font-size: clamp(72px, 8vw, 92px);
    transform-origin: left center;
  }
  .message__card .section-title__ja { font-size: 20px; }
  .message__body { margin-top: 32px; min-height: 0; padding-top: 0; padding-bottom: 70px; }
  .message__text { max-width: 640px; }
  .message__catch { font-size: clamp(32px, 3.4vw, 38px); margin-bottom: 36px; }
  .message__desc { font-size: clamp(22px, 2.3vw, 26px); line-height: 1.9; }
  .message__text > .btn--entry { width: 220px; }
  .message__photo--left { top: -224px; right: -12px; width: 210px; }
  .message__photo--feature-left { top: clamp(310px, 32vw, 360px); bottom: auto; left: -12px; width: 190px; transform: translateY(-50%); }
  .message__photo--right { bottom: -76px; right: 0; width: 195px; }
  .strengths, .numbers { padding-block: 88px; }
  /* The artwork has a baked-in rounded bottom. Fade it into a full-height
     surface so taller cards cannot extend below that visible edge. */
  .strengths {
    border-radius: 48px 48px 0 0;
    background: linear-gradient(110deg, #e3e6e8 0%, #f7f8f9 32%, #e3e6e8 60%, #f7f8f9 100%);
  }
  .strengths::after {
    inset: 0 0 auto;
    aspect-ratio: 1920 / 3196;
    background-color: transparent;
    -webkit-mask-image: linear-gradient(#000 30%, transparent 75%);
    mask-image: linear-gradient(#000 30%, transparent 75%);
  }
  .paysystem { padding-top: 88px; padding-bottom: 80px; }
  .strengths__inner > .section-title, .strengths__lead,
  .paysystem__inner > .section-title, .paysystem__text,
  .numbers__inner > .section-title { margin-left: 0; }

  /* Match the Message card's title typography and text inset. */
  .strengths__inner > .section-title,
  .strengths__lead { margin-inline: 32px; }
  .strengths .section-title__en { font-size: clamp(72px, 8vw, 92px); }
  .strengths .section-title__ja { font-size: 20px; }
  .strengths__lead { font-size: clamp(22px, 2.3vw, 26px); line-height: 1.9; }
  .strengths__lead-block { line-height: inherit; }

  .strengths__list {
    width: 100%; margin-left: 0; transform: none;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px 36px;
    padding-bottom: 48px;
  }
  .strengths__item:nth-child(odd), .strengths__item:nth-child(even) { transform: none; min-width: 0; }
  .strengths__item:nth-child(even) { transform: translateY(48px); }
  .strengths__item:nth-child(n) .strengths__photo {
    width: calc(100% + 20px);
    height: clamp(190px, 23vw, 270px);
    margin-bottom: 24px;
    overflow: hidden;
  }
  .strengths__item:nth-child(odd) .strengths__photo {
    margin-left: 4px;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  }
  .strengths__item:nth-child(even) .strengths__photo {
    margin-left: 0;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  }
  .strengths__photo img {
    width: 100%; max-width: none; height: 100%;
    object-fit: cover; object-position: center;
  }
  .strengths__item:nth-child(odd) .strengths__photo img { width: 106.5%; margin-left: -6.5%; }
  .strengths__no, .strengths__item:nth-child(even) .strengths__no { left: 24px; font-size: 32px; }
  .strengths__item:nth-child(even) .strengths__no { left: 64px; }
  .strengths__title, .strengths__desc,
  .strengths__item:nth-child(even) .strengths__title,
  .strengths__item:nth-child(even) .strengths__desc { margin-inline: 16px; max-width: none; }
  .strengths__title { font-size: clamp(24px, calc(2.2vw + 2px), 28px); }
  .strengths__desc { font-size: clamp(20px, calc(1.7vw + 2px), 22px); line-height: 1.9; }
  .strengths__desc br { display: none; }
  .paysystem__inner > .section-title { margin-inline: 32px; }
  .paysystem .section-title__en { font-size: clamp(72px, 8vw, 92px); }
  .paysystem .section-title__ja { font-size: 20px; }
  .paysystem__title-bg { top: 48px; }
  .paysystem__lead,
  .paysystem__toggle { display: none; }
  .paysystem__details { padding-inline: 20px; }
  .paysystem__text { margin-inline: 12px; }
  .paysystem__row { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px; border-bottom: 0; }
  .paysystem__no { font-size: 32px; font-weight: 500; }
  .paysystem__title { font-size: clamp(32px, calc(3vw + 2px), 38px); margin-block: 6px 18px; }
  .paysystem__text p { font-size: clamp(24px, 2.3vw, 28px); line-height: 1.85; }
  .paysystem__marker {
    background: rgba(0, 218, 220, .28);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .paysystem__chart {
    --chart-card-bg: #f4f4f4;
    box-sizing: border-box; width: 82%; margin-inline: auto; padding: 24px;
    border-radius: 12px; background: var(--chart-card-bg); overflow: hidden;
  }
  .paysystem__conversion { padding: 32px 20px 0; }
  .paysystem__cta { padding-top: 32px; }
  .paysystem__cta-caption { font-size: 24px; line-height: 1.6; }
  .paysystem__cta-caption strong { font-size: 30px; }
  .paysystem__simulator-btn { width: 400px; }
  .paysystem__photos {
    width: 82%; height: auto; aspect-ratio: 930 / 435;
    margin: 48px auto 0; transform: none;
  }
  .paysystem__photo-set--left,
  .paysystem__photo-set--right,
  .paysystem__photo-set img:nth-child(2) { display: none; }
  .paysystem__photo-set img:nth-child(1) { left: 41.7%; top: 34.5%; width: 58.3%; }
  .paysystem__photo-set img:nth-child(3) { left: 0; top: 0; width: 36.5%; }
  .numbers__inner > .section-title { margin-inline: 32px; }
  .numbers__title-bg { left: 0; width: 150vw; transform: none; }
  .numbers .section-title__en { font-size: clamp(72px, 8vw, 92px); }
  .numbers .section-title__ja { font-size: 20px; }
  .numbers__grid { width: 100%; margin-left: 0; }
  .num-card__label { font-size: max(13px, 1.5cqw); }

  .cta#entry { padding-top: 64px; }
  /* Compensate for the card moving up 48px; keep the photo in place. */
  .cta__photo--left {
    top: -84px;
    left: 32px;
    width: clamp(180px, 20.4vw, 300px);
  }
  .cta__photo--right { width: clamp(156px, 16.8vw, 252px); }

  .footer__inner { padding-inline: var(--gutter); gap: 32px; }
  .footer__brand { margin-left: 0; }
  .footer__address { font-size: 14px; line-height: 1.8; }
  .footer__nav { font-size: 16px; }
  .footer__nav a { min-height: 44px; display: flex; align-items: center; }
  .footer__inner {
    width: calc(100% - 336px);
    max-width: 760px;
    padding-inline: 0;
    grid-template-columns: minmax(0, 1fr) 80px 156px;
    gap: 24px;
  }

  .sub-container,
  .sub-hero[data-word="About Us"] .sub-container,
  .company-page .sub-hero[data-word="Company"] .sub-container { width: calc(100% - 72px); }
  .sub-section { padding-block: 72px; }
  .sub-hero { padding-top: 88px; }
  .sub-heading__en { font-size: clamp(44px, 5vw, 60px); }
  .sub-lead { width: 100%; font-size: 16px; }
  .sub-copy { font-size: 16px; line-height: 2; }
  .about-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .about-hero-photo { display: none; }
  .sub-hero[data-word="About Us"] { min-height: 0; padding: 88px 0 64px; }
  .sub-hero[data-word="About Us"] .sub-container { width: calc(100% - 136px); }
  .sub-hero[data-word="About Us"] .sub-kicker { width: fit-content; font-size: clamp(72px, 8vw, 92px); }
  .sub-hero[data-word="About Us"] .sub-kicker-ja { margin-top: 16px; font-size: 20px; }
  .about-values-section { padding-top: 0; }
  body.about-page { overflow-x: clip; }
  .about-page .subpage-main { overflow: clip; }
  .about-values { display: grid; min-height: 0; overflow: clip; }
  .about-values__background {
    position: sticky;
    grid-area: 1 / 1;
    align-self: start;
    top: calc(var(--mobile-header-height, 174px) + 4px);
    left: auto;
    height: calc(100svh - var(--mobile-header-height, 174px) - 20px);
    min-height: 0;
    border-radius: inherit;
    overflow: hidden;
    background: none;
  }
  .about-values__background::before {
    content: "";
    position: absolute;
    inset: -16px;
    background-image: linear-gradient(rgba(128, 132, 136, .58), rgba(128, 132, 136, .58)), url("../assets/images/about/story-photo-sp.webp");
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .about-values__inner { grid-area: 1 / 1; min-width: 0; padding: 64px 40px; text-align: center; }
  .about-value { grid-template-columns: 1fr; min-height: 0; gap: 40px; align-items: start; margin-bottom: 48px; }
  .about-value h3 { justify-self: center; margin-right: 0; }
  .about-value h3 img { height: 52px; }
  .about-value > p { top: 0; margin: 0; font-size: 30px; font-weight: 700; line-height: 1.5; }
  .about-value > p::before {
    content: ""; position: absolute; top: -23px; left: calc(50% - 3px);
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  }
  .about-principles { width: 100%; margin: 16px 0 0; }
  .about-principle { margin-bottom: 48px; }
  .about-principle:last-child { margin-bottom: 0; }
  .about-principle__no { display: inline-block; width: auto; font-size: 26px; }
  .about-principle h4 { margin: 4px 0 16px; font-size: 30px; font-weight: 700; line-height: 1.4; }
  .about-principle__ja { font-size: 32px; }
  .about-principle p {
    margin-inline: clamp(32px, 4vw, 48px);
    font-size: 26px; font-weight: 500; line-height: 1.7;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  }
  .about-principle p br { display: none; }

  .company-hero-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .company-page .company-hero-grid > div:first-child { transform: none; }
  .company-page .sub-hero[data-word="Company"] { min-height: 580px; padding-top: 88px; }
  .company-page .sub-hero[data-word="Company"] .sub-container { width: calc(100% - 136px); }
  .company-page .sub-hero[data-word="Company"] .sub-kicker { width: fit-content; font-size: clamp(72px, 8vw, 92px); }
  .company-page .sub-hero[data-word="Company"] .sub-kicker-ja { margin-top: 16px; font-size: 20px; }
  .company-page .company-sp-break { display: inline; }
  .company-page .company-hero-nav .mv__side-link { font-size: 21px; }
  .company-page .sub-heading__en { font-size: clamp(50px, calc(5vw + 6px), 66px); }
  .company-page .sub-heading__ja { font-size: 23px; }
  .company-page .sub-copy, .company-page .company-message__signature span { font-size: 22px; }
  .company-page .faq-list summary, .company-page .faq-list p,
  .company-page .news-item time, .company-page .news-item p,
  .company-page .profile-table th, .company-page .profile-table td { font-size: 21px; }
  .company-page .company-social-card { font-size: 24px; }
  .company-hero-nav { margin-top: 32px; }
  .company-hero-nav .mv__side-link { min-height: 44px; }
  .company-message-section .sub-heading, #company-faq .sub-heading, #company-news .sub-heading { transform: none; }
  .company-message {
    left: auto; transform: none; width: 100%; margin-top: 72px;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start;
  }
  .company-message__body { width: 100%; min-width: 0; }
  .company-page .company-message { margin-top: 104px; }
  .company-page .company-message__photo { margin-top: 64px; }
  .company-message__body .sub-copy br { display: none; }
  #company-faq .faq-list, #company-news .news-list { margin-top: 96px; }
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
  .contact-page .sub-hero[data-word="Contact"] { min-height: 0; padding: 88px 0 64px; }
  .contact-page .sub-hero[data-word="Contact"] .sub-container { width: calc(100% - 136px); padding-left: 24px; }
  .contact-page .sub-hero[data-word="Contact"] .sub-kicker { width: fit-content; font-size: clamp(72px, 8vw, 92px); }
  .contact-page .sub-hero[data-word="Contact"] .sub-kicker-ja { margin-top: 16px; font-size: 20px; }
  .contact-guide { position: static; }
  .contact-guide .sub-lead { max-width: none; font-size: clamp(26px, 2.6vw, 30px); line-height: 1.8; text-align: center; }
  .contact-cta__robot { width: 240px; }

  .recruit-sticky-section { padding-block: 88px; }
  .recruit-hero__nav { display: none; }
  .recruit-page .sub-heading { margin-left: 32px; }
  .recruit-page .sub-heading__en { font-size: clamp(72px, 8vw, 92px); }
  .recruit-page .sub-heading__ja { margin-top: 16px; font-size: 20px; }
  .recruit-columns, .recruit-sticky-section .recruit-columns {
    width: calc(100% - 72px); grid-template-columns: minmax(0, 1fr); gap: 40px;
  }
  .recruit-sticky-heading, .recruit-sticky-section .sub-heading { position: static; }
  .recruit-sticky-heading .sub-heading { margin-bottom: 24px; }
  .recruit-sticky-heading > p { max-width: none; }
  .recruit-sticky-heading > p br { display: none; }
  .recruit-page .recruit-details,
  .recruit-page .benefit-groups,
  .recruit-page .job-listings,
  .recruit-page .recruit-sticky-heading > p { margin-inline: 32px; }
  .recruit-detail { padding-block: 36px; }
  .recruit-detail h3, .benefit-group > h3, .job-listing h3 { font-size: 26px; }
  .job-entry { width: calc(100% - 72px); }
  .salary-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .salary-layout .sub-heading { left: auto; margin-bottom: 24px; }
  .interview-section { padding: 72px 36px; }
  .interview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .recruit-image-transition__visual { position: relative; height: auto; max-height: none; aspect-ratio: 1153 / 477; }
  .recruit-image-transition__content { min-height: 0; backdrop-filter: none; }
  .recruit-section-photo { height: auto; max-height: none; aspect-ratio: 1153 / 477; }
  .recruit-page .recruit-detail__number,
  .recruit-page .benefit-group__number,
  .recruit-page .job-listing__number { font-size: 23px; }
  .recruit-page .recruit-detail h3,
  .recruit-page .benefit-group > h3,
  .recruit-page .job-listing h3 { font-size: 32px; }
  .recruit-page .benefit-item h4 { font-size: 26px; }
  .recruit-page .recruit-detail p,
  .recruit-page .recruit-sticky-heading > p { font-size: 22px; }
  .recruit-page .benefit-item p,
  .recruit-page .job-listing__roles { font-size: 21px; }
  .recruit-page .job-entry p { font-size: 24px; }
  .interview-modal blockquote { font-size: 26px; }
  .interview-modal__profile strong { font-size: 20px; }
  .interview-modal__profile p,
  .interview-modal__qa p { font-size: 17px; }
  .interview-modal__qa h3 { font-size: 32px; }
}