/* ============================================================
   responsive.css — REKS  v55
   ============================================================ */

/* ============================================================
   グローバル共通 (全幅)
   ============================================================ */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* SP専用改行ユーティリティ: PCでは非表示、SP(768px以下)で改行 */
.sp-br {
  display: none;
}
.sp-only {
  display: none;
}
@media (max-width: 768px) {
  .sp-br {
    display: block;
  }
  .sp-only {
    display: inline;
  }
}

/* ============================================================
   タブレット (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .container { padding-inline: 32px; }
  .header__inner { padding-inline: 32px; }
  .hero__content { padding-inline: 32px; }
  .page-hero__content { padding-inline: 32px; }
  .footer__upper-inner { grid-template-columns: 1fr; gap: 48px; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); }
  .cycle-inner { gap: 48px; }
  .feature-split { grid-template-columns: 1fr; }
  .feature-split__img { min-height: 300px; }
  .feature-split__img::after { display: none; }
  .feature-split--rev { direction: ltr; }
  .feature-split__body { padding: 40px 36px; }
  .service-block__inner { grid-template-columns: 1fr; gap: 40px; }
  .service-block--rev .service-block__inner { direction: ltr; }
  .service-block__img-clip::before { display: none; }
  .recruit-message { grid-template-columns: 1fr; gap: 40px; }
  .recruit-message__img-clip::before { display: none; }
  .contact-wrap { grid-template-columns: 1fr; }
  .message-inner { grid-template-columns: 1fr; gap: 48px; }
  .entry-cta__inner { grid-template-columns: 1fr; gap: 32px; }
  .news-section-inner { grid-template-columns: 1fr; gap: 48px; }
  .wanted-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   スマートフォン (max 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ── 1. ヘッダー・ナビゲーション ── */
  .header__inner { padding: 0 16px; height: 60px; }
  .header__nav { display: none !important; }
  .header__actions { display: none !important; }
  .header__hamburger { display: flex !important; }
  .hamburger { display: flex !important; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

  /* モバイルナビ閉じるボタン(X) → 画面右下に配置 */
  .mobile-nav__close {
    position: fixed;
    bottom: 40px;
    right: 24px;
    top: auto;
    width: 56px;
    height: 56px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cyan);
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 20px rgba(0,180,216,0.45);
    cursor: pointer;
    z-index: 1100;
  }

  /* ── 2. fade-up アニメーション無効化 (SP) ── */
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fade-up.visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── ベース ── */
  .container { padding-inline: 16px; }
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 32px; }

  /* ── 3. ヒーローセクション ── */
  .hero { height: 100svh; min-height: 600px; }
  .hero__photo img { width: 100%; transform: none; object-position: center center; }
  .hero__content { padding: 0 20px; max-width: 100%; }
  .hero__catch { font-size: clamp(28px, 10vw, 56px); line-height: 0.95; }
  .hero__catch-sub { font-size: clamp(28px, 10vw, 56px); line-height: 0.95; margin-bottom: 20px; }
  .hero__jp { font-size: clamp(18px, 5vw, 26px); margin-bottom: 28px; padding-left: 12px; line-height: 1.6; }
  .hero__cta { flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; }
  .hero__cta .btn-primary,
  .hero__cta .btn-outline { width: 100%; max-width: 300px; justify-content: center; padding: 16px 24px; }
  .hero__scroll { display: none; }

  /* ── ページヒーロー (下層) ── */
  .page-hero { height: 300px; }
  .page-hero--sm { height: 180px; }
  .page-hero__content { padding-inline: 16px; }
  .page-hero__title { font-size: clamp(20px, 5.5vw, 30px); }
  /* FVグラデーション棒を細く */
  .page-hero::after { height: 3px; }

  /* ── セクション見出し ── */
  .sec-head { margin-bottom: 36px; }
  .sec-head__title { font-size: clamp(20px, 5.5vw, 30px); }
  .sec-head__lead { font-size: 14px; }

  /* ── 4. OUR MESSAGE セクション ── */
  .lead-msg { padding: 56px 0; }
  .lead-msg__inner { padding: 0 20px; }
  .lead-msg__text { font-size: 16px; line-height: 1.8; }
  .lead-msg__accent { padding: 20px 20px; font-size: clamp(16px, 4.5vw, 20px); }

  /* ── 5. ABOUT REKS (テキスト+画像2カラム) ── */
  .about-intro { padding: 56px 0; }
  .about-intro__grid { grid-template-columns: 1fr; gap: 28px; flex-direction: column; }
  .about-intro__img-frame { order: -1; }
  .about-intro__img-frame img { width: 100%; max-height: 280px; object-fit: cover; height: 280px; }
  .about-intro__body { order: 1; }
  .about-intro__body .btn-primary,
  .about-intro__body .btn-outline { width: 100%; max-width: 320px; justify-content: center; }
  .about-intro__cta { display: flex; justify-content: center; }
  .about-intro__cta .btn-primary { width: 100%; max-width: 320px; justify-content: center; }

  /* ── CEO Section ── */
  .ceo-section { padding: 48px 0 56px; }
  .ceo-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 28px; }
  .ceo-img-frame img { height: 300px; width: 100%; object-fit: cover; }
  .ceo-lead { font-size: clamp(13px, 3.7vw, 16px); line-height: 1.85; }
  .ceo-lead span { display: block; white-space: nowrap; }

  /* ── 6. OUR FEATURES (3カード) ── */
  .company-features { padding: 56px 0; }
  .company-features__grid { grid-template-columns: 1fr; gap: 20px; display: flex; flex-direction: column; }
  .cf-card { padding: 28px 20px 24px; margin-bottom: 0; }
  .cf-card__num { font-size: 44px; }
  .cf-card__title { font-size: 16px; line-height: 1.5; }
  .cf-card__text { font-size: 15px; line-height: 1.75; }

  /* ── MVV Section ── */
  .mvv-section { padding: 56px 0; }
  .mvv-cards { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .mvv-card { padding: 32px 20px; }
  .mvv-card__text { font-size: clamp(16px, 4.5vw, 20px); }
  .mvv-catch__inner { padding: 28px 20px; width: 100%; display: block; }
  .mvv-catch__text { font-size: clamp(18px, 5vw, 24px); }

  /* ── 7. OUR PHILOSOPHY ── */
  .reks-stands-for { width: 100%; }
  /* R E KS を横一列に配置 */
  .reks-stands-for__items { flex-direction: row; gap: 0; justify-content: center; }
  .reks-stands-for__item {
    border-right: 1px solid rgba(0,180,216,0.20);
    border-bottom: none;
    padding: 8px 10px;
    flex: 1;
    min-width: 0;
  }
  .reks-stands-for__item:last-child { border-right: none; }
  .reks-stands-for__letter { font-size: clamp(22px, 7vw, 36px); }
  .reks-stands-for__meaning { font-size: 11px; }
  .reks-stands-for__body { padding: 16px 12px; }
  .key-concept-block { padding: 20px 20px; }
  .cycle-section { padding: 48px 0 28px; }
  .cycle-svg-wrap { max-width: 100%; padding: 0 8px; }
  .value-section { margin-top: 40px; }
  .value-grid { grid-template-columns: 1fr; gap: 16px; }
  .value-item { padding: 24px 20px; }

  /* ── 8. OUR SERVICES (2カード) ── */
  .services-preview { padding: 56px 0; }
  .services-preview__grid { grid-template-columns: 1fr; gap: 24px; display: flex; flex-direction: column; }
  .svc-card__img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; }
  .svc-card__img img { width: 100%; height: 100%; object-fit: cover; }
  .svc-card__body { padding: 24px 20px; }
  .svc-card__body .btn-primary,
  .svc-card__body .btn-outline { width: 100%; max-width: 320px; justify-content: center; }

  /* ── 9. WHY REKS (3つの理由) ── */
  .features { padding: 56px 0; }
  .feature-block { grid-template-columns: 1fr; }
  .feature-block--rev { direction: ltr; }
  .feature-block__img { height: 220px; width: 100%; object-fit: cover; }
  .feature-block:not(.feature-block--rev) .feature-block__img,
  .feature-block--rev .feature-block__img { clip-path: none; }
  .feature-block__body { padding: 28px 20px; }
  .feature-block__num { font-size: 52px; }
  .feature-block__icon { width: 64px; height: 64px; }

  /* ── Service Page ── */
  .service-intro { padding: 56px 0; }
  .service-detail { padding: 0 0 64px; }
  .service-block { grid-template-columns: 1fr; gap: 0; padding: 40px 0; }
  .service-block--rev { direction: ltr; }
  .service-block__img img { width: 100%; height: 220px; object-fit: cover; }
  .service-block__num { font-size: 52px; }
  .service-catch__inner { padding: 28px 20px; width: 100%; display: block; }
  .service-catch__text { font-size: 14px; }

  /* ── 10. JOIN OUR TEAM (CTA) ── */
  .recruit-banner { padding: 56px 0; }
  .recruit-banner__bg img { object-fit: contain; object-position: center center; }
  .recruit-banner::before { display: none; }
  .recruit-banner__btns { flex-direction: column; gap: 12px; align-items: center; }
  .recruit-banner__btns .btn-primary,
  .recruit-banner__btns .btn-outline,
  .recruit-banner__btns .btn-navy { width: 100%; max-width: 320px; justify-content: center; }
  .recruit-banner__title { font-size: clamp(18px, 5vw, 26px); }

  /* ── Recruit Page ── */
  .recruit-intro { padding: 56px 0; }
  .recruit-intro__grid { grid-template-columns: 1fr; gap: 36px; }
  .recruit-intro__img img { width: 100%; height: 260px; object-fit: cover; }
  .recruit-catch__inner { padding: 28px 20px; width: 100%; display: block; }
  .recruit-catch__text { font-size: 14px; }
  .jobs-section { padding: 56px 0; }
  .job-card { padding: 0; }
  .job-card__head { padding: 18px 16px; gap: 10px; flex-wrap: wrap; }
  .job-card__title { font-size: 15px; }
  .job-table th { width: 100px; padding: 12px 10px 12px 14px; font-size: 12px; white-space: normal; }
  .job-table td { padding: 12px 14px; font-size: 13px; }
  .recruit-entry { padding: 48px 0; }

  /* ── 11. NEWS & TOPICS ── */
  .news-section { padding: 56px 0; }
  .news-grid { grid-template-columns: 1fr; gap: 20px; display: flex; flex-direction: column; }
  .news-card__img { width: 100%; height: 160px; object-fit: cover; }
  .news-card__img img { width: 100%; height: 100%; object-fit: cover; }
  .news-section .btn-primary,
  .news-section .btn-outline { margin-top: 16px; max-width: 320px; }

  /* ── News List Page ── */
  .news-page { padding: 48px 0 72px; }
  .news-list-item { flex-direction: column; gap: 12px; padding: 20px 0; }
  .news-list-item__img { width: 100%; height: 160px; object-fit: cover; }
  .news-list-item:hover { padding-left: 0; }

  /* ── 12. お問い合わせ CTA ── */
  .contact-cta { padding: 60px 20px; }
  .contact-cta__bg img { object-position: 64% 24%; }
  .contact-cta__title { font-size: clamp(18px, 5vw, 26px); }
  /* contact-ctaボタンは共通ルールで統一済み */

  /* ── Company Info Table ── */
  .company-info { padding: 56px 0; }
  .info-table th { width: 100px; padding: 14px 12px; font-size: 13px; }
  .info-table td { padding: 14px 12px; font-size: 13px; }

  /* ── 13. フッター ── */
  .site-footer { padding: 44px 0 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .footer__links { flex-direction: column; gap: 12px; align-items: flex-start; }
  .footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer__bottom-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .footer__copy { font-size: 13px; line-height: 1.7; }
  .footer__nav-link { font-size: 13px; line-height: 1.7; min-height: 44px; display: flex; align-items: center; }

  /* ── 14. 共通ボタン・タップターゲット ── */
  .btn-primary,
  .btn-outline,
  .btn-navy {
    padding: 14px 24px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
    max-width: 320px;
    min-height: 44px;
  }
  .hero__cta .btn-primary,
  .hero__cta .btn-outline { width: 100%; max-width: 300px; justify-content: center; padding: 16px 24px; }
  .recruit-banner__cta { flex-direction: column; gap: 12px; align-items: center; }
  .news-section__more { display: flex; justify-content: center; }
  .news-section__more .btn-primary { max-width: 320px; }
  .contact-cta__btns { flex-direction: column; align-items: center; gap: 12px; }
  .contact-cta__btns .btn-primary,
  .contact-cta__btns .btn-outline {
    width: 100% !important;
    max-width: 320px !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .recruit-banner__cta .btn-primary,
  .recruit-banner__cta .btn-outline {
    width: 100% !important;
    max-width: 320px !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .btn--large { padding: 16px 24px; font-size: 14px; }
  a { min-height: 44px; }
  .header__nav-link,
  .footer__nav-link { min-height: 44px; display: inline-flex; align-items: center; }

  /* ── SP固定CTAバー ── */
  .sp-cta-bar { display: flex; }
  body { padding-bottom: 60px; }

  /* ── パンくず ── */
  .page-breadcrumb { font-size: 11px; overflow: hidden; }
  .page-breadcrumb .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .page-breadcrumb a,
  .page-breadcrumb span {
    font-size: 11px !important;
    line-height: 1.4 !important;
    display: inline !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .page-breadcrumb span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 1 !important;
  }
}

/* ============================================================
   超小型 (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  .container { padding-inline: 14px; }
  .footer__nav { grid-template-columns: 1fr; }

  /* ヒーロー */
  .hero__catch { font-size: clamp(32px, 11vw, 52px); }
  .hero__catch-sub { font-size: clamp(32px, 11vw, 52px); }
  .hero__jp { font-size: clamp(16px, 4.5vw, 20px); }

  /* ページヒーロー */
  .page-hero__title { font-size: clamp(17px, 5vw, 24px); }

  /* ボタン全幅 */
  .btn-primary,
  .btn-outline,
  .btn-navy { max-width: 100%; }

  /* 会社情報テーブル ブロック表示 */
  .info-table { display: block; }
  .info-table tbody { display: block; }
  .info-table tr { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid var(--gray-200); }
  .info-table th,
  .info-table td { display: block; width: 100%; padding: 4px 0; border: none; background: none; }
  .info-table th { font-size: 12px; color: var(--cyan); font-weight: 700; }
  .info-table td { font-size: 13px; }

  /* MVV */
  .mvv-card { padding: 24px 16px; }
  .mvv-card__text { font-size: 15px; }

  /* Features */
  .cf-card { padding: 24px 16px 20px; }

  /* 採用 */
  .job-card__head { padding: 14px; }
  .job-table, .job-table tbody, .job-table tr, .job-table th, .job-table td { display: block; width: 100%; }
  .job-table th { border-right: none; border-bottom: 2px solid var(--cyan); white-space: normal; font-size: 12px; padding: 10px 12px; }
  .job-table td { font-size: 13px; padding: 10px 12px; }
  .salary-highlight { padding: 16px 14px; }
  .income-examples { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-steps::before { display: none; }
  .recruit-feat-grid { grid-template-columns: 1fr; }

  /* お知らせ */
  .news-list-item__title { font-size: 14px; }

  /* サービス */
  .service-card__body { padding: 24px 16px; }
  .service-catch__inner,
  .recruit-catch__inner { padding: 20px 14px; }

  /* お問い合わせ */
  .contact-form-card__inner { padding: 20px 14px; }
  /* タブは480pxでも横一列を維持 */
  .form-tabs { flex-direction: row !important; }
  .form-tab { font-size: 12px; padding: 12px 8px; min-height: 52px; }
  .form-tab:first-child { border-right: 1px solid var(--cyan); border-bottom: none; }
  .entry-cta { padding: 56px 0; }
}

/* ============================================================
   SP final polish
   ============================================================ */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    padding-bottom: 0 !important;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 18px !important;
  }

  .site-header {
    height: 60px;
  }

  .header__inner {
    height: 60px;
    padding-inline: 16px !important;
  }

  .header__logo-img {
    height: 42px;
    max-width: 50px;
  }

  .hamburger {
    width: 44px;
    height: 44px;
    padding: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1220;
  }

  .mobile-nav {
    display: flex !important;
    z-index: 1200;
    padding: calc(84px + env(safe-area-inset-top, 0px)) 24px calc(96px + env(safe-area-inset-bottom, 0px));
    gap: 18px;
    justify-content: flex-start;
  }

  .mobile-nav__link {
    width: min(100%, 320px);
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    font-size: 17px;
    line-height: 1.4;
  }

  .mobile-nav__close {
    z-index: 1230;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }

  .hero {
    display: flex;
    min-height: 620px;
    height: 88svh;
    padding-top: 60px;
    padding-bottom: 34px;
    align-items: flex-end;
    background: var(--white);
  }

  .hero__top-bar,
  .hero__svg-deco {
    display: none;
  }

  .hero__photo {
    position: absolute;
    inset: 60px 0 0;
    height: auto;
    overflow: hidden;
  }

  .hero__photo img {
    width: 100% !important;
    max-width: none !important;
    height: calc(100% + 116px);
    object-fit: cover;
    object-position: 44% top !important;
    margin-left: 0;
    margin-top: 0;
    transform: translateY(-92px) !important;
  }

  .hero__photo::after {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.76) 22%, rgba(255,255,255,0.22) 52%, rgba(255,255,255,0.02) 100%);
  }

  .hero__content {
    position: relative;
    z-index: 5;
    width: calc(100% - 36px);
    max-width: none;
    margin: 0 auto;
    padding: 0 0 20px !important;
    transform: none;
    background: transparent;
  }

  .hero__content::before {
    display: none;
  }

  .hero__eyebrow {
    margin-bottom: 18px;
  }

  .hero__eyebrow-text {
    color: rgba(10,22,40,0.72);
    letter-spacing: 0.18em;
    text-shadow:
      0 0 2px rgba(255,255,255,1),
      0 0 12px rgba(255,255,255,0.96),
      0 4px 14px rgba(10,22,40,0.22);
  }

  .hero__catch,
  .hero__catch-sub {
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .hero__catch {
    color: var(--navy);
    -webkit-text-stroke: 12px rgba(255,255,255,0.86);
    text-shadow:
      0 0 3px rgba(255,255,255,1),
      0 0 14px rgba(255,255,255,0.95),
      0 5px 0 rgba(255,255,255,0.44),
      0 14px 26px rgba(10,22,40,0.36),
      0 24px 44px rgba(10,22,40,0.22);
  }

  .hero__catch-sub {
    color: var(--navy);
    -webkit-text-stroke: 12px rgba(255,255,255,0.86);
    text-shadow:
      0 0 3px rgba(255,255,255,1),
      0 0 14px rgba(255,255,255,0.95),
      0 5px 0 rgba(255,255,255,0.44),
      0 14px 26px rgba(10,22,40,0.36),
      0 24px 44px rgba(10,22,40,0.22);
  }

  .hero__jp {
    color: var(--navy);
    max-width: 320px;
    -webkit-text-stroke: 3px rgba(255,255,255,0.82);
    paint-order: stroke fill;
    text-shadow:
      0 0 3px rgba(255,255,255,1),
      0 0 14px rgba(255,255,255,0.92),
      0 8px 20px rgba(10,22,40,0.25);
  }

  .hero__cta .btn-outline {
    color: var(--navy);
    border-color: rgba(10,22,40,0.48);
  }

  .hero__cta .btn-recruit-green {
    background: #06C755;
    border-color: #06C755;
    color: var(--white);
  }

  .page-hero {
    height: clamp(260px, 62vw, 340px) !important;
    min-height: 260px;
    padding-top: 60px;
  }

  .page-hero__bg img {
    object-position: center center;
  }

  .page-hero__overlay {
    background: rgba(10,22,40,0.36);
  }

  .page-hero__content {
    padding-inline: 18px !important;
  }

  .page-hero__en {
    font-size: 10px;
    letter-spacing: 0.22em;
    margin-bottom: 10px;
  }

  .page-hero__title {
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .sec-head {
    margin-bottom: 32px !important;
  }

  .sec-head--left {
    text-align: center;
  }

  .sec-head__title {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.45;
    max-width: 100%;
  }

  .sec-head__lead,
  .about-intro__text,
  .feature-block__text,
  .svc-card__text,
  .service-card__text,
  .recruit-catch__text,
  .recruit-feat-card__text,
  .contact-cta__sub {
    font-size: 14px !important;
    line-height: 1.85 !important;
  }

  section[style*="padding: 80px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .about-intro,
  .company-features,
  .mvv-section,
  .services-preview,
  .features,
  .news-section,
  .contact-page,
  .privacy-section {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }

  .lead-msg,
  .cycle-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .lead-msg__inner {
    width: calc(100% - 36px);
    padding-inline: 18px !important;
  }

  .lead-msg__text {
    font-size: clamp(17px, 5vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.85 !important;
  }

  .lead-msg__accent {
    width: fit-content;
    max-width: calc(100vw - 36px);
    margin-inline: auto;
    padding: 16px 18px !important;
    font-size: clamp(14px, 3.8vw, 17px) !important;
    line-height: 1.45 !important;
    white-space: nowrap;
  }

  .about-intro__grid,
  .services-preview__grid,
  .company-features__grid,
  .mvv-cards,
  .value-grid,
  .news-grid {
    gap: 20px !important;
  }

  .about-intro__img-frame,
  .svc-card,
  .cf-card,
  .mvv-card,
  .value-item,
  .feature-block,
  .news-card,
  .contact-intro-card,
  .contact-form-card,
  .privacy-card,
  .thanks-card,
  .service-card,
  .job-card {
    border-radius: 10px !important;
  }

  .about-intro__img-frame img,
  .ceo-img-frame img,
  .svc-card__img,
  .svc-card__img img,
  .feature-block__img,
  .feature-block__img img,
  .news-card__img,
  .news-card__img img,
  .news-list-item__img,
  .news-list-item__img img,
  .service-card__img,
  .service-card__img img,
  .recruit-why-item__img,
  .recruit-why-item__img img {
    width: 100% !important;
    object-fit: cover !important;
  }

  .feature-block {
    margin-bottom: 28px;
  }

  .feature-block__body,
  .svc-card__body,
  .service-card__body,
  .cf-card,
  .mvv-card,
  .value-item,
  .contact-form-card__inner,
  .privacy-card__inner,
  .thanks-card__inner {
    padding: 24px 18px !important;
  }

  .service-card__deco {
    display: none;
  }

  .service-card__points {
    gap: 12px;
  }

  .service-card__point {
    font-size: 13px;
    line-height: 1.7;
  }

  .service-catch__inner,
  .recruit-catch__inner,
  .mvv-catch__inner,
  .service-catch__inner {
    width: 100%;
    padding: 24px 18px !important;
  }

  .service-catch__text br,
  .recruit-catch__text br,
  .contact-cta__sub br,
  .recruit-banner__sub br {
    display: none;
  }

  .recruit-why-item {
    margin-bottom: 24px !important;
  }

  .recruit-why-item__img {
    height: 210px !important;
  }

  .recruit-feat-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .job-card {
    overflow: hidden;
  }

  .job-table {
    min-width: 0;
  }

  .job-table td,
  .job-table th {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .income-examples {
    gap: 10px !important;
  }

  .contact-intro-card {
    margin-bottom: 32px !important;
  }

  .contact-info-item {
    gap: 12px;
  }

  .form-label {
    align-items: flex-start;
    line-height: 1.6;
  }

  .form-check {
    align-items: center;
    line-height: 1.7;
  }

  .form-check input[type="checkbox"] {
    margin-top: 0;
    flex-shrink: 0;
  }

  .form-input,
  .form-select,
  .form-textarea {
    min-height: 48px;
    font-size: 16px !important;
  }

  .form-tabs {
    gap: 0;
  }

  .form-tab {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .btn-primary,
  .btn-outline,
  .btn-navy,
  .btn-outline-dark,
  .form-submit-btn {
    width: 100% !important;
    max-width: 340px !important;
    min-height: 48px;
    margin-inline: auto;
    padding: 14px 18px !important;
    text-align: center;
    justify-content: center;
    line-height: 1.4;
  }

  .hero__cta,
  .about-intro__cta,
  .recruit-banner__cta,
  .entry-cta__btns,
  .contact-cta__btns,
  .news-section__more {
    width: 100%;
    align-items: center !important;
    justify-content: center !important;
  }

  .recruit-banner {
    min-height: 420px;
  }

  .recruit-banner__bg img {
    object-fit: cover !important;
  }

  .contact-cta {
    padding: 64px 18px !important;
  }

  .contact-cta__inner {
    max-width: 100%;
  }

  .contact-cta__title,
  .recruit-banner__title,
  .entry-cta__title {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.45 !important;
  }

  .news-list-item {
    width: 100%;
  }

  .news-list-item__img {
    height: 190px !important;
  }

  .news-list-item__meta,
  .news-card__meta {
    flex-wrap: wrap;
  }

  .footer__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footer__brand-logo {
    height: 76px;
    max-width: 90px;
    display: block;
    margin-inline: 0;
    margin-bottom: 20px;
  }

  .footer__brand-text {
    font-size: 13px;
    line-height: 1.75;
    max-width: 300px;
    margin-inline: 0;
    text-align: left;
  }

  .footer__links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px !important;
    align-items: stretch;
  }

  .footer__link {
    min-height: 40px;
    align-items: center;
    font-size: 13px;
  }

  .footer__bottom {
    align-items: center !important;
  }

  .footer__copy {
    max-width: 280px;
    margin-inline: auto;
  }

  img,
  svg,
  video,
  iframe,
  table {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: 14px !important;
  }

  .hero {
    min-height: 640px;
    height: 90svh;
    padding-top: 60px;
    padding-bottom: 28px;
  }

  .hero__photo {
    inset: 60px 0 0;
    height: auto;
  }

  .hero__catch,
  .hero__catch-sub {
    font-size: clamp(34px, 12vw, 50px) !important;
  }

  .hero__jp {
    font-size: clamp(17px, 5vw, 22px) !important;
  }

  .page-hero {
    height: 260px !important;
  }

  .page-hero__title {
    font-size: clamp(20px, 7vw, 28px) !important;
  }

  .page-hero__en {
    letter-spacing: 0.16em;
  }

  .sec-head__title {
    font-size: clamp(20px, 6.4vw, 26px) !important;
  }

  .footer__links {
    grid-template-columns: 1fr;
  }

  .reks-stands-for__items {
    flex-direction: row !important;
    gap: 0 !important;
  }

  .reks-stands-for__item {
    flex: 1 1 0;
    min-width: 0;
    border-right: 1px solid rgba(0,180,216,0.20);
    border-bottom: none;
    padding-inline: 8px;
  }

  .reks-stands-for__item:last-child {
    border-right: none;
  }

  .cycle-svg-wrap {
    margin-inline: -10px;
  }

  .cycle-svg-wrap svg {
    width: 112% !important;
    max-width: none !important;
    margin-left: -6% !important;
  }

  .contact-info-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .form-tab {
    font-size: 11px !important;
    padding-inline: 6px !important;
  }
}