/* ================================================
   レスポンシブ（モバイル）
================================================ */
@media (max-width:900px){

  .header-inner{ padding:0 20px; }

  .header-right{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:78%;
    max-width:320px;
    background:var(--color-navy);
    align-items:flex-start;
    justify-content:flex-start;
    padding:calc(var(--header-height-sp) + 32px) 28px 32px;
    gap:32px;
    transform:translateX(100%);
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
  }

  .header-right.is-open{
    transform:translateX(0);
  }

  .header-company-name{
  font-size:13px;
}

  .nav-list{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .has-dropdown .dropdown{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    box-shadow:none;
    background:transparent;
    padding:8px 0 0 12px;
    display:none;
  }

  .has-dropdown.is-open .dropdown{
    display:block;
  }

  .dropdown li a{
    color:var(--color-white);
    text-align:left;
    padding:6px 0;
  }

  .menu-toggle{ display:flex; }

  #site-header{ height:var(--header-height-sp); }

  .hero-brand{ top:18px; left:20px; }

  .business-card{flex-wrap:wrap;}

  .business-title{ width:auto; }

  .footer-inner{
    flex-direction:column;
    gap:40px;
  }

  .footer-col-right{
    border-left:none;
    padding-left:0;
    border-top:1px solid var(--color-gray-300);
    padding-top:32px;
    max-width:none;
  }

    .footer-sitemap{
    gap:24px;
  }
  .footer-sitemap a{
    font-size:18px;   /* 25px だと狭い画面では改行が増えすぎるため縮小 */
  }

    /* ---- フッター：アイコンバッジ ---- */
  .footer-badges{
    --badge-h:30px;      /* アイコンの高さ（ここを変えると3つ同時に変わる） */
    gap:20px;
    flex-wrap:wrap;      /* 狭い画面で横にはみ出さない保険 */
  }
  .footer-badges img{
    height:var(--badge-h);
    width:auto;
    margin-top:8px;
  }

  /* ---- 会社案内ページ：モバイル調整 ---- */
  .page-hero{
    width:92%;
    height:26vh;
    margin-top:var(--header-height-sp);
  }

/* ---- 採用情報ページ：モバイル調整 ---- */
   .recruit-hero{
    min-height:auto;
    margin-top:0;
    padding-top:var(--header-height-sp);
  }
  .recruit-hero-text{
    position:relative;
    width:100%;
    padding:40px 6%;
  }
  .recruit-hero-img{
    position:relative;
    left:0;
    width:100%;
    height:50vh;
    -webkit-mask-image:none;
    mask-image:none;
  }

  /* ---- 事業内容ページ：モバイル調整 ---- */
  .business-hero-text{
    width:100%;
    padding:32px 6%;
  }
  .business-hero-img{
    width:100%;
    height:40vh;
  }
  .category-title,
  .subsection-heading,
  .small-heading,
  .body-text,
  .icon-row{
    max-width:100%;
  }
  .icon-row{
    flex-wrap:wrap;
  }

  .category-header-top{
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.trade-style{
  flex-direction:column;
  align-items:center;
  gap:40px;
}
.trade-style-item{ max-width:100%; }

  .tech-content{
    max-width:100%;
    padding:32px 24px;
  }
  .case-group-title{
    padding:14px 16px;
    font-size:18px;
  }
  .case-group + .case-group .case-group-title{
  margin-top:-3px;
}

  .trade-style{
  gap:40px;
}
.tech-note,
.tech-clients{
  flex-direction:column;
  gap:12px;
  text-align:center;
}

.tech-clients-names{
  flex-direction:column;
  align-items:center;
  gap:0;
}

  .category-section{
    scroll-margin-top:var(--header-height-sp);
  }

  /* ---- お問い合わせページ：モバイル調整 ---- */
  .contact-section{
    padding:calc(var(--header-height-sp) + 40px) 20px 72px;
  }

  .business-card-img{
    width:100%;
  }

  /* ================================================
     SP調整（はみ出し・サイズ修正）
  ================================================ */

  /* ---- 共通：変数で一括調整 ---- */
  :root{
    --header-height:var(--header-height-sp);  /* 120px→60px。余白ズレがまとめて直る */
    --fs-heading-lg:28px;     /* 各ページの大見出し（40px→28px） */
    --fs-copy-en:56px;        /* トップのキャッチ英文（95px→56px） */
    --fs-copy-jp:18px;
    --fs-tel-number:24px;
    --circle:min(28vw, 140px);  /* 事業内容ヒーローの円サイズ */
    --circle-gap:3vw;
  }

  body{ overflow-x:clip; }   /* はみ出しの保険（原因を隠すだけなので下の個別修正が本体） */

  .subsection-heading{ font-size:20px; }
  .contact-subsection{ font-size:18px; }

  .btn-primary{
    display:block;
    max-width:100%;
    padding:18px 20px;
    font-size:16px;
    text-align:center;
  }

  /* ---- ヘッダー ---- */
  .header-logo{ min-width:0; flex:1; }
  .menu-toggle{ flex-shrink:0; }
  .header-logo .logo-img{ height:34px; margin:0; }
  .header-logo a{ gap:8px; }
  .header-company-name{
    font-size:12px;
    white-space:normal;
    line-height:1.3;
  }

  /* ---- トップ ---- */
  .hero-brand{ display:none; }   /* ヘッダーのロゴと二重になるため */

  .business-section .section-title,
  .business-list{ width:100%; }
  .business-list{ gap:48px; }
  .business-title{ font-size:26px; }   
  .business-subtitle{ font-size:18px; }
  .business-desc{ padding:16px 0 0; font-size:15px; }
  .business-link{
    position:static;
    justify-content:flex-end;
    margin-top:16px;
  }
  .business-corner-img{
    width:80px;
    height:80px;
    top:16px;
    right:16px;
  }
  .highlights-info{ gap:16px; }

  /* ---- フッター ---- */
  .footer-inner{ gap:0; }
  .footer-sitemap{ gap:12px 20px; }
  .footer-sitemap a{ font-size:15px; }

  /* ---- 会社案内 ---- */
  .about-hero{ height:calc(100svh - var(--header-height)); }
  .about-hero-title{ left:6%; }
  .about-hero-copy{ width:100%; padding:0 20px; }
  .about-copy-en{
    font-size:clamp(20px, 5.6vw, 40px);
    white-space:normal;
  }
  .about-copy-jp{
    font-size:clamp(13px, 3.6vw, 20px);
    white-space:normal;
  }
  .about-hero-lead{
    left:50%;
    top:68%;
    padding:0 20px;
    font-size:13px;
    text-align:center;
  }

  .president-section{ padding:64px 20px; }
  .president-section .section-title,
  .company-info-section .section-title,
  .map-section .section-title,
  .recruit-info-section .section-title{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
  .president-inner{ width:100%; gap:24px; }
  .president-photo img{ width:100%; }
  .president-text{ font-size:15px; padding-top:0; }

  .company-table td{ overflow-wrap:anywhere; }

  .map-embed{ aspect-ratio:4/3; }
  .access-section{ padding:0 20px 80px; }

  /* ---- 採用情報 ---- */
  .recruit-hero-heading{ font-size:22px; margin:24px 0 12px 0; }
  .recruit-hero-desc{ margin-left:0; line-height:1.9; }

  .education-section{ padding:48px 20px 64px; }
  .education-message{ font-size:16px; text-align:left; }

  /* ---- 事業内容：技術支援／開発支援 ---- */
  .category-header{ padding-top:24px; margin-bottom:32px; }
  .category-subtitle{ padding:0; font-size:18px; }
  .trade-style{ margin-top:40px; margin-bottom:24px; }
  .trade-text{ padding-bottom:24px; }

  .feature-column{ padding:32px 20px; }
  .feature-title{ font-size:20px; margin-bottom:24px; }
  .feature-text{ font-size:15px; margin-top:20px; }

  /* ---- 事業内容：教育支援 ---- */

    /* ---- タブレット値（前回のスマホ寄りの値を上書き） ---- */
  :root{
    --fs-heading-lg:25px;
    --fs-copy-en:72px;
    --fs-copy-jp:22px;
  }

  .btn-primary{ padding:20px 36px; font-size:20px; }

  .business-title{ font-size:28px; }
  .business-desc{ font-size:16px; }

  .president-inner{ width:90%; gap:24px; }
  .president-photo{ width:30%; margin:0; }
  .president-text{ font-size:16px; }

  .company-table{ width:100%; }
  .company-table th{ width:180px; }

  .map-embed{ aspect-ratio:16/9; }

  .about-hero-lead{ font-size:15px; }

  .recruit-hero-heading{ font-size:26px; margin:32px 0 16px 0; }
  .education-message{ font-size:20px; }

  .category-subtitle{ font-size:20px; }
  .feature-text{ font-size:14px; }

    /* ---- ヘッダー：電話アイコンを番号の左に（ラベルは上段） ---- */
  .header-phone{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    column-gap:8px;
    row-gap:4px;
  }
  .header-phone-text{ grid-column:1 / -1; grid-row:1; align-items:flex-start; }
  .header-phone-icon{ grid-column:1; grid-row:2; width:26px; }
  .header-phone-number{ grid-column:2; grid-row:2; }

  /* ---- トップ：事業カード（画像と説明を縦積み・同幅） ---- */
  .business-card{
    flex-direction:column;
    align-items:stretch;
    max-width:100%;
  }
  .business-card-img{ width:100%; }
  .business-card-box{
    width:100%;
    margin:0;
    min-height:0;
    padding:28px 20px 24px;
  }

  /* ---- トップ：インフォメーションと会社案内/採用情報 ---- */
  .highlights-inner{ flex-direction:column; gap:72px; }   /* 縦の間隔を拡大 */
  .highlights-info{
    flex-direction:row;       /* 横並び */
    gap:12px;
    padding-top:0;
  }
  .info-bar{
    flex:1;
    height:auto;
    min-height:72px;
    padding:0;
    justify-content:center;
  }
  .info-bar-title{ padding:20px 8px; font-size:18px; text-align:center; }

    :root{
    --fs-body:16px;
    --fs-table:14px;
  }
  .education-period{ font-size:18px; }
  .case-name{ font-size:15px; }
  .category-section--hero-bg .tech-content .trade-style-title{ font-size:20px; }
  .category-section--hero-bg .tech-content .trade-lead{ font-size:17px; }
  .tech-note-text,
  .tech-clients-label,
  .tech-clients-names span{ font-size:15px; }

    /* ---- トップ：ヒーロー（PC版と同じアスペクト比） ---- */
  .hero{
    --hero-ratio:16 / 9;            /* PCでの .hero の 幅÷高さ に合わせる */
    --fs-copy-en:6.6vw;             /* 95px ÷ 約1440px（PC想定幅）。幅に比例して縮小 */
    --fs-copy-jp:max(10px, 1.9vw);  /* 小さくなりすぎないよう下限10px */

    height:auto;
    min-height:0;
    aspect-ratio:var(--hero-ratio);
    margin-top:var(--header-height);   /* 固定ヘッダーにヒーロー上部が隠れないよう下げる */
  }
  .hero-cutin-bottom,
  .hero-cutin-right{ min-width:0; }    /* 160px下限を外し、PCと同じ比率で縮める */

  /* ---- トップ：事業カードの画像を横長に ---- */
  .business-card-img{ aspect-ratio:21 / 9; }   /* 元は16/9。もっと横長なら 21 / 9 */

  /* ---- トップ：事業内容〜インフォメーション間の余白を縮小 ---- */
  .business-section{ padding-bottom:32px; }   /* 元は96px */
  .highlights-news .title-eyebrow{ padding-top:16px; }   /* 元は50px */

  /* ---- トップ：インフォメーションの余白を詰める＋日付と本文を横並び ---- */
  .highlights-news .section-title{ margin-bottom:16px; }   /* 元は40px */
  .news-item{
    flex-direction:row;
    align-items:baseline;
    gap:50px;
    padding:12px 0;                /* 元は24px */
  }
  .news-date{
    flex-shrink:0;
    padding-left: 20px;
    width:6.2em;                   /* 「2026.07.27」が収まる幅（フォントサイズ連動） */
  }
  .news-text{
    flex:1;
    min-width:0;
    line-height:1.6;
  }

    /* ---- 事業内容：ヒーロー ---- */
  .business-hero-scroll{ display:none; }                  /* SCROLLの文字と矢印を非表示 */

  /* ---- 事業内容：サービスフロー（タブレット） ---- */
  .service-flow-header{ padding-left:140px; }
  .flow-row{ grid-template-columns:100px 40px 1fr; }   /* バッジ列を65→100pxに拡大（はみ出し解消） */
  .service-flow-arrow{ left:107px; }                   /* 矢印を新しい隙間列(100〜140px)の中央に */
  .flow-body{
    flex-direction:row;
    align-items:center;
    gap:24px;
    padding:24px 28px;
  }
  .flow-icon{ width:56px; height:56px; margin-left:0; }
  .flow-title{ font-size:17px; }
  .flow-text{ font-size:15px; min-height:0; }
  .service-flow-title{ font-size:24px; }
  .service-flow-subtitle{ font-size:16px; }

    /* ---- 事業内容：ヒーロー（PC版と同じアスペクト比） ---- */
  .business-hero{
    --hero-ratio:16 / 9;            /* PCでの .business-hero の 幅÷高さ に合わせる */
    --u:calc(100vw / 1440);         /* 縮尺の基準。PC版の数値に掛けて使う */
    height:auto;
    min-height:0;
    aspect-ratio:var(--hero-ratio);
    margin-top:var(--header-height);   /* 固定ヘッダーの下から開始 */
  }

  /* 反転したワイヤーフレームは箱いっぱいに（PC版と同じ見え方） */
  .business-hero-wire{
    width:100%;
    height:100%;
    top:50%;
    transform:translate(-50%, -50%) scaleY(-1);
  }

  .business-hero-title{
    top:calc(var(--u) * 56);
    font-size:max(20px, calc(var(--u) * 40));
  }
  .business-hero-title .title-eyebrow{ padding-top:calc(var(--u) * 50); }

  .business-hero-visual{
    gap:calc(var(--u) * 40);
    transform:translateY(calc(var(--u) * 150));   /* 円・キャッチ全体を下げる量 */
  }
  .business-circles{ gap:calc(var(--u) * 100); }
  .business-circle-wrap,
  .business-circle{
    width:calc(var(--u) * 200);
    height:calc(var(--u) * 200);
  }
  .business-circle-line{
    left:calc(var(--u) * 110);
    right:calc(var(--u) * 110);
  }
  /* 青い影のずれも縮尺に合わせる */
  .business-circle-shadow{
    transform:translate(calc(var(--u) * 16), calc(var(--u) * 76));
  }
  .business-circles.is-in .business-circle-wrap:nth-child(n) .business-circle-shadow{
    transform:translate(calc(var(--u) * 16), calc(var(--u) * 16));
  }
  .business-circle-jp{ font-size:max(11px, calc(var(--u) * 20)); }                         /* 下限11px */
  .business-circle-en{ font-size:max(8px, calc(var(--u) * 15)); letter-spacing:0.05em; }  /* 下限8px */

  .business-visual-copy{ gap:calc(var(--u) * 20); }
  .business-copy-line1{ gap:calc(var(--u) * 100); }
  .business-copy-word{
    width:calc(var(--u) * 200);
    font-size:max(13px, calc(var(--u) * 30));
  }
  .business-copy-line2{
    padding:calc(var(--u) * 40);
    font-size:max(11px, calc(var(--u) * 25));
  }

  .business-desc br,
  .president-text br,
  .recruit-hero-desc br,
  .category-header .body-text br{ display:none; }

  .business-desc,
  .president-text,
  .recruit-hero-desc,
  .category-header .body-text{
    word-break:auto-phrase;   /* 文節単位で折り返す。Chrome・Edge・Safari新版で有効 */
    text-wrap:pretty;         /* 最終行が極端に短くなるのを避ける */
  }

  /* ================================================
   タブレット専用調整（601〜900px）
================================================ */
@media (min-width:601px) and (max-width:900px){

  /* ---- ① トップ ---- */
  .business-section .section-title{ margin-bottom:12px; }   /* タイトル〜画像の余白（元40px） */
  .business-corner-img{ top:28px; right:28px; }             /* 元は16px。数字を上げるほど内側へ */

  /* ---- ② 事業内容 ---- */
  /* ヒーロー〜技術支援タイトルの余白を詰める */
  .category-section--hero-bg{ padding-top:0; }
  .category-section--hero-bg .category-header{ padding-top:0; }
  .category-section--hero-bg .title-eyebrow{ padding-top:16px; }

  /* 業務請負／技術者派遣を横並びに */
  .trade-style{
    flex-direction:row;
    align-items:flex-start;
    gap:24px;
  }
  .trade-style-item{
    flex:1;
    min-width:0;
    max-width:none;
  }

  /* 主なお取引先を横並びに */
  .tech-clients{
    flex-direction:row;
    gap:32px;
    text-align:left;
  }
  .tech-clients-names{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px 24px;
  }

  /* ---- ③ 会社案内：ヒーローをPC版と同じ比率に ---- */
  .about-hero{
    --u:calc(100vw / 1440);          /* PC版の数値に掛ける縮尺 */
    height:auto;
    min-height:0;
    aspect-ratio:24 / 13;            /* PC(1440×900想定)の 幅÷(高さ-ヘッダー120px) */
    margin-top:var(--header-height);
  }
  .about-hero-title{
    top:calc(var(--u) * 56);
    left:8%;
    font-size:max(20px, calc(var(--u) * 40));
  }
  .about-hero .title-eyebrow{ padding-top:calc(var(--u) * 50); }
  .about-copy-en{
    font-size:max(20px, calc(var(--u) * 50));
    white-space:nowrap;
  }
  .about-copy-jp{
    margin-top:calc(var(--u) * 16);
    font-size:max(13px, calc(var(--u) * 24));
    white-space:nowrap;
  }
  .about-hero-scroll{ display: none; }

  /* ---- ④ 採用情報：ヒーローをPC版と同じレイアウト・比率に ---- */
  .recruit-hero{
    --u:calc(100vw / 1440);
    --hero-h:56.25vw;                 /* 16:9。PCの 100vw×90vh(1440×900想定)と同比率 */
    min-height:var(--hero-h);
    margin-top:var(--header-height);
    padding-top:0;
  }
  .recruit-hero-img{
    position:absolute;
    inset:0 0 0 38%;                  /* PCと同じ：左38%から右端まで */
    width:62%;
    height:100%;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 70%);
    mask-image:linear-gradient(to right, transparent 0%, #000 70%);
  }
  .recruit-hero-text{
    position:relative;
    width:70%;
    min-height:var(--hero-h);
    justify-content:flex-start;                      /* 追加 */
    padding:calc(var(--u) * 56) 4% 0 8%;             /* 上：50→56、左：6%→8% */
  }
  .recruit-hero-heading{
    margin:calc(var(--u) * 50) 0 calc(var(--u) * 20) calc(var(--u) * 10);
    font-size:max(16px, calc(var(--u) * 30));
  }
  .recruit-hero-desc{
    margin-top:calc(var(--u) * 10);
    margin-left:calc(var(--u) * 20);
    font-size:max(14px, calc(var(--u) * 22));
    line-height:2;
  }

  /* 教育体制：タイトル横の一文を右寄せに */
  .education-message{
    flex:1;
    text-align:right;
  }
  .education-desc{font-size:12px;}
}
}

@media (max-width:600px){

  :root{
    --fs-heading-lg:28px;
    --fs-copy-en:56px;
    --fs-copy-jp:18px;
    --fs-body:15px;
    --fs-table:13px;
  }

  .president-name{ font-size:16px; }
  .education-period{ font-size:17px; }
  .case-name{ font-size:14px; }
  .category-section--hero-bg .tech-content .trade-style-title{ font-size:18px; }
  .category-section--hero-bg .tech-content .trade-lead{ font-size:16px; }
  .tech-note-text,
  .tech-clients-label,
  .tech-clients-names span{ font-size:14px; }

  .subsection-heading{ font-size:20px; }
  .contact-subsection{ font-size:18px; }

  .btn-primary{ display:block; padding:18px 20px; font-size:16px; }

  .business-title{ font-size:26px; }
  .business-subtitle{ font-size:16px; }
  .business-desc{ font-size:12px; }

  /* 会社案内 */
  .president-section{ padding:64px 20px; }
  .president-inner{ flex-direction:column; align-items:stretch; width:100%; }
  .president-photo{ width:60%; margin:0 auto; }
  .president-text{ font-size:15px; }

  .company-table,
  .company-table tbody,
  .company-table tr,
  .company-table th,
  .company-table td{ display:block; width:100%; }
  .company-table th{ width:auto; }
  .company-table td{ overflow-wrap:anywhere; }

  .map-embed{ aspect-ratio:4/3; }
  .access-section{ padding:0 20px 80px; }
  .access-item{ grid-template-columns:1fr; row-gap:2px; padding:10px 0; }
  .access-title{ text-align:left; font-weight:700; }

  .about-hero-lead{ font-size:13px; }

  /* 採用情報 */
  .recruit-hero-heading{ font-size:22px; margin:24px 0 12px 0; }
  .recruit-hero-desc{ font-size:15px; }
  .education-section{ padding:48px 20px 64px; }
  .education-header{ flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:32px; }
  .education-message{ font-size:16px; text-align:left; }
  .education-list{ grid-template-columns:1fr; }
  .education-item,
  .education-item--half{ grid-column:span 1; }

  /* 事業内容：技術支援／開発支援 */
  .category-subtitle{ font-size:18px; }
  .category-header-text .body-text{ font-size:12px; }
  .case-list{ grid-template-columns:1fr; }
  .trade-style{ margin-top:40px; margin-bottom:24px; }
  .trade-text{ padding-bottom:24px; }

  /* サービスフロー：矢印をやめてバッジをカード上に */
  .service-flow-header{ padding-left:0; margin-bottom:32px; }
  .service-flow-title{ font-size:20px; }
  .service-flow-subtitle{ font-size:15px; }
  .service-flow-track{ gap:32px; }
  .service-flow-arrow{ display:none; }
  .flow-row{ grid-template-columns:1fr; row-gap:6px; }
  .step-badge{ grid-column:1; height:28px; }
  .step-badge-main,
  .step-badge-sub{ right:auto; left:0; }
  .flow-step{ grid-column:1; }
  .flow-body{ flex-direction:row; align-items:flex-start; gap:16px; padding:20px 16px; }
  .flow-icon{ width:44px; height:44px; margin-left:0; }
  .flow-title{ font-size:16px; }
  .flow-text{ font-size:14px; min-height:0; }

  .feature-columns{ flex-direction:column; }
  .feature-column{ padding:32px 20px; }
  .feature-title{ font-size:20px; margin-bottom:24px; }
  .feature-text{ font-size:15px; margin-top:20px; }

  /* 事業内容：教育支援 */
  .edu-support-subtitle{ font-size:18px; }
  .edu-support-text{ font-size:15px; }

  /* ---- 事業内容：ヒーロー（スマホ：縮尺を緩めて縦長に） ---- */
  .business-hero{
    --u:calc(100vw / 900);     /* 基準を1440→900に。円や文字が約1.6倍に */
    --hero-ratio:2 / 3;        /* 縦長にして、タイトルと円が重ならないようにする */
  }

    /* ---- 改行<br>の無効化（スマホのみ） ---- */
  .business-desc br,
  .president-text br,
  .recruit-hero-desc br,
  .education-desc br,
  .category-header-text .body-text br,
  .feature-text br,
  .edu-support-text br{ display:none; }

  .footer-badges{
    --badge-h:26px;
    gap:16px;
  }

  .business-section .section-title,
  .highlights-news .section-title{ font-size:24px; }   /* セクションタイトル */
  .business-title{ font-size:22px; }                   /* 事業内容タイトル（元26px） */
  .business-desc{ font-size:14px; }                    /* 本文（元15px） */
  .business-corner-img{                                /* アイコン（元80px） */
    width:56px;
    height:56px;
  }
  .business-link{ font-size:14px; }                    /* 詳しくはこちら */
  .business-link-icon{ width:18px; }

  /* ---- ② 事業内容：ヒーロー ---- */
  .business-hero{ --cd:calc(var(--u) * 170); }         /* 円の直径。元は 200 */
  .business-hero-visual{
    transform:translateY(calc(var(--u) * 40));         /* 元150。小さいほど上へ */
  }
  .business-circle-wrap,
  .business-circle{
    width:var(--cd);
    height:var(--cd);
  }
  .business-circle-line{
    left:calc(var(--cd) / 2 + var(--u) * 10);
    right:calc(var(--cd) / 2 + var(--u) * 10);
  }
  .business-copy-word{ width:var(--cd); }              /* 円と幅を揃える */
  .business-hero-wire{                                 /* 背景を縦横比のまま小さく */
    width:100%;
    height:auto;
  }

  /* ---- ② 事業内容：請負／派遣 ---- */
  .trade-style{ gap:10px; }

  /* ---- ② 事業内容：事例カルーセル ---- */
  .case-carousel-title{
    display:block;
    padding:14px 16px;
    font-size:16px;
    font-weight:700;
    line-height:1.4;
    color:var(--color-white);
    background:var(--color-blue);
  }
  .case-carousel{ overflow:hidden; }
  .case-carousel-track{
    display:flex;
    width:max-content;
    animation:caseScroll 30s linear infinite;          /* 秒数を大きくするとゆっくり */
  }
  @keyframes caseScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }                  /* 6枚＋複製6枚の半分＝ちょうど1周 */
  }
  .case-group,
  .case-list,
  .case-clones{ display:contents; }                    /* 12枚を1本の横並びにする */
  .case-group-title{ display:none; }                   /* 個別タイトルは統合タイトルに置換 */
  .case-item{
    position:relative;
    flex:0 0 auto;
    width:220px;
    margin-right:8px;                                  /* gapでなくmarginにする（-50%で正確に1周させるため） */
    overflow:hidden;
  }
  .case-img img{ transition:transform 0.4s ease; }
  .case-name{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:6px 10px;
    font-size:13px;
    background:rgba(255,255,255,0.78);                 /* 白半透明 */
    transition:opacity 0.3s ease;
  }
  .case-item:hover .case-img img{ transform:scale(1.08); }
  .case-item:hover .case-name{ opacity:0; }
  @media (prefers-reduced-motion:reduce){
    .case-carousel-track{ animation:none; }
    .case-carousel{ overflow-x:auto; }
  }

  /* ---- ② 事業内容：サービスフロー ---- */
  .service-flow-title{ font-size:18px; }
  .service-flow-subtitle{ font-size:13px; }
  .flow-body{ gap:12px; padding:16px 14px; }
  .flow-icon{ width:36px; height:36px; }
  .flow-title{ font-size:15px; margin-bottom:4px; }
  .flow-text{ font-size:12px; }

  /* ---- ② 事業内容：全国どこからでも〜（タイトル＋アイコン横並び／本文中央） ---- */
  .feature-column{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"title icon" "text text";
    align-items:center;
    column-gap:12px;
    padding:24px 20px;
  }
  .feature-title{
    grid-area:title;
    margin:0;
    font-size:18px;
    text-align:left;
  }
  .feature-icon{
    grid-area:icon;
    width:48px;
    height:48px;
    margin:0;
  }
  .feature-text{
    grid-area:text;
    margin-top:12px;
    text-align:left;
  }

  /* ---- ③ 会社案内：ヒーローをPC版と同じ比率に ---- */
  .about-hero{
    --u:calc(100vw / 1440);
    height:auto;
    min-height:0;
    aspect-ratio:24 / 13;
    margin-top:var(--header-height);
  }
  .about-hero-title{
    top:calc(var(--u) * 56);
    left:8%;
    font-size:max(20px, calc(var(--u) * 40));
  }
  .about-hero .title-eyebrow{ padding-top:calc(var(--u) * 50); }
  .about-hero-copy{ top:58%; }                         /* 小さい画面でタイトルと近づきすぎない保険 */
  .about-copy-en{
    font-size:max(18px, calc(var(--u) * 50));
    white-space:nowrap;
  }
  .about-copy-jp{
    margin-top:calc(var(--u) * 16);
    font-size:max(12px, calc(var(--u) * 24));
    white-space:nowrap;
  }
  .about-hero-scroll{ bottom:calc(var(--u) * 40); }

  /* ---- ③ 会社案内：社長写真を小さく＋文章を回り込ませる ---- */
  .president-inner{ display:block; }                   /* 縦積み(column)をやめて回り込み用に */
  .president-inner::after{
    content:"";
    display:block;
    clear:both;
  }
  .president-photo{
    float:left;
    width:30%;                                         /* 小さくするなら数字を下げる */
    margin:0 16px 8px 0;
  }
  .president-role{ font-size:11px; margin-top:12px; }
  .president-name{ font-size:15px; }

  /* ---- ④ 採用情報：画像が上、タイトルを画像左下に重ね、文章は直下の白背景 ---- */
  .recruit-hero{
    display:flex;
    flex-direction:column;
    min-height:0;
    margin-top:var(--header-height);
    padding-top:0;
  }
  .recruit-hero-img{
    order:1;
    position:relative;
    inset:auto;
    left:0;
    width:100%;
    height:auto;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .recruit-hero-img img{
    width:100%;
    height:auto;
    aspect-ratio:11 / 10;                              /* PCの画像領域(幅62vw×高さ90vh)の比率 */
    object-fit:cover;
  }
  .recruit-hero-text{
    order:2;
    position:relative;
    width:100%;
    height:auto;
    justify-content:flex-start;
    padding:24px 20px 40px;        /* 上を 0 → 24px */
    background:var(--color-white);
  }

  .recruit-hero-title .title-eyebrow{ padding-top:0; }
  .recruit-hero-heading{ margin:20px 0 12px; }
  .recruit-hero-desc{ margin-left:0; }

  /* ---- ④ 採用情報：教育体制（左アイコン／右タイトル＋本文） ---- */
  .education-item,
  .education-item--half{
    display:grid;
    grid-template-columns:48px 1fr;
    grid-template-areas:"icon title" "icon desc";
    column-gap:16px;
    align-items:start;
    padding:20px 16px;
    text-align:left;
  }
  .education-icon{
    grid-area:icon;
    align-self:center;
    width:48px;
    height:48px;
    margin:0;
  }
  .education-period{ grid-area:title; margin-bottom:6px; }
  .education-desc{ grid-area:desc; }
}

/* ================================================
   スマホ専用調整 第2弾（〜600px）
================================================ */
@media (max-width:600px){

  /* ---- ① トップ：事業内容の本文と「詳しくはこちら」を非表示 ---- */
  .business-desc,
  .business-link{ display:none; }

  /* ---- ② 事業内容：ヒーローを上に詰める ---- */
  .business-hero{ --hero-ratio:1 / 1; }                     /* 元は 2 / 3。高さが縮みます */
  .business-hero-visual{
    transform:translateY(calc(var(--u) * 20));              /* 前回の40→20。円とコピーをさらに上へ */
  }
  /* ヒーロー〜技術支援タイトルの余白（タブレット版と同じ詰め方） */
  .category-section--hero-bg{ padding-top:0; }
  .category-section--hero-bg .category-header{ padding-top:0; }
  .category-section--hero-bg .title-eyebrow{ padding-top:16px; }

  /* ---- ③ 事業内容：各カテゴリの本文 12px ---- */
  .category-header .body-text{ font-size:12px; }

  /* ---- ④ 事業内容：請負／派遣（左アイコン＋右にタイトル・本文を縦積み） ---- */
  .trade-style-item{
    flex:0 0 auto;
    width:100%;
    display:grid;
    grid-template-columns:56px 1fr;
    grid-template-areas:"icon title" "icon text";
    column-gap:16px;
    align-items:center;
    text-align:left;
  }
  .trade-style-icon{
    grid-area:icon;
    width:56px;
    height:56px;
    margin:0;
  }
  .category-section--hero-bg .tech-content .trade-style-title{
    grid-area:title;
    margin:0 0 6px;
    font-size:16px;
    text-align:left;
  }
  .trade-text{
    grid-area:text;
    margin:0;
    padding-bottom:0;
    font-size:12px;
    text-align:left;
  }

  /* ---- ⑤ 事業内容：カルーセル画像を大きく ---- */
  .case-item{ width:250px; }                                /* 前回220px。スマホ幅にほぼ1枚分 */
  .case-name{ font-size:14px; }
  .case-carousel-track{ animation-duration:38s; }           /* 画像が大きくなった分、速さが同じになるよう延長 */

  /* ---- ⑥ 事業内容：取引先（タイトルの下に一覧を横並び） ---- */
  .tech-clients{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .tech-clients-names{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:0 16px;
  }
  .tech-clients-names span{ font-size:13px; }

  /* ---- ⑦ 事業内容：サービスフローのアイコンを上下中央に ---- */
  .flow-body{ align-items:center; }

  /* ---- ⑧ 事業内容：「全国どこから〜」アイコンをタイトルの左へ ---- */
  .feature-column{
    grid-template-columns:auto 1fr;
    grid-template-areas:"icon title" "text text";
  }
  .feature-icon{width: 30px; height: 30px;}

  /* ---- ⑨ 採用情報：ヒーロー画像を16:9の横長に ---- */
  .recruit-hero-img img{
    aspect-ratio:16 / 9;
    object-position:50% 30%;                                /* 表示位置。左右 上下 の順で調整 */
  }

  /* ---- ⑩ <br>の無効化＋文節折り返し（900pxの設定が未適用だった箇所を追加） ---- */
  .trade-text br,
  .flow-text br{ display:none; }
  .flow-text .text-link{ display:block; }                   /* STEP01の「→お問い合わせはこちら」を独立した行に */
  
  .trade-text,
  .category-subtitle,
  .service-flow-subtitle,
  .feature-text,
  .flow-text{
    word-break:auto-phrase;
    text-wrap:pretty;
  }
}

/* ================================================
   事業内容ヒーロー（スマホ）：PC版と同比率＋上から積む
================================================ */
@media (max-width:600px){

  .business-hero{
    --u:calc(100vw / 1440);          /* PC版の縮尺（タブレットと同じ） */
    --hero-ratio:24 / 13;            /* PC(1440×900)の「ヘッダーより下」と同比率 */
    --cd:17vw;                       /* 円の直径 */
  }

  /* タイトル：ヒーロー上端の近くへ */
  .business-hero-title{ top:calc(var(--u) * 40); }
  .business-hero-title .title-eyebrow{ padding-top:0; }

  /* 円・キャッチ：中央寄せをやめ、タイトルの下から積む */
  .business-hero-visual{
    justify-content:flex-start;
    gap:20px;
    padding-top:calc(var(--u) * 40 + 60px);   /* タイトル上端＋タイトル高さ約44px＋余白12px */
    transform:none;
  }
  .business-circle-en{
    font-size:7px;
    letter-spacing:0.02em;
    margin-top:2px;
  }
  .business-visual-copy{ gap:10px; }
  .business-copy-word{
    font-size:12px;
    line-height:1.5;
  }
  .business-copy-line2{
    padding:0 12px;
    font-size:11px;
    line-height:1.5;
  }

  /* 背景（ワイヤーフレーム）：タブレットと同じくヒーロー全体に敷く */
  .business-hero-wire{
    width:100%;
    height:100%;
    top:50%;                                  /* さらに上へ寄せるなら 44% など */
  }
}

/* ================================================
   ★ フォントサイズ一括管理（〜600px）
   ※ 必ずファイルの一番最後に置く（後ろに書いたものが優先されるため）
================================================ */
@media (max-width:600px){

  /* ---- 変数（これを使っている全箇所に反映） ---- */
  :root{
    --fs-heading-lg:20px;   /* 大見出し（.section-title / .category-title / 採用情報タイトル） */
    --fs-body:12px;         /* 本文の標準（.body-text / ニュース / 教育体制の説明 など） */
    --fs-table:12px;        /* 会社概要・募集要項の表 */
  }

  /* ---- 共通 ---- */
  .header-company-name{ font-size:12px; }
  .btn-primary{ font-size:16px; }
  .subsection-heading{ font-size:20px; }
  .contact-subsection{ font-size:18px; }

  /* ---- トップ ---- */
  .hero{                                   /* ヒーローのキャッチコピー（画面幅に比例） */
    --fs-copy-en:6.6vw;
    --fs-copy-jp:max(10px, 1.9vw);
  }
  .business-section .section-title,
  .highlights-news .section-title{ font-size:20px; }
  .business-title{ font-size:18px; }
  .business-subtitle{ font-size:12px; }

  /* ---- 会社案内 ---- */
  .about-hero-title{ font-size:max(20px, calc(var(--u) * 40)); }
  .about-copy-en{ font-size:max(18px, calc(var(--u) * 50)); }
  .about-copy-jp{ font-size:max(12px, calc(var(--u) * 24)); }
  .president-text{ font-size:18px; }
  .president-role{ font-size:10px; }
  .president-name{ font-size:16px; }
  .access-title{ font-size: 12px; }
  .access-item{ font-size: 12px; }

  /* ---- 採用情報 ---- */
  .recruit-hero-heading{ font-size:22px; }
  .recruit-hero-desc{ font-size:15px; }
  .education-message{ font-size:16px; }
  .education-period{ font-size:17px; }

  /* ---- 事業内容 ---- */
  .category-subtitle{ font-size:18px; }
  .category-header .body-text{ font-size:12px; }
  .category-section--hero-bg .tech-content .trade-style-title{ font-size:16px; }
  .trade-text{ font-size:12px; }
  .case-carousel-title{ font-size:14px; }
  .case-name{ font-size:12px; }
  .case-note{ font-size:8px; }
  .tech-note-text,
  .tech-clients-label{ font-size:12px; }
  .tech-clients-names span{ font-size:10px; }
  .service-flow-title{ font-size:18px; }
  .service-flow-subtitle{ font-size:13px; }
  .flow-title{ font-size:14px; }
  .flow-text{ font-size:12px; }
  .feature-title{ font-size:16px; }
  .feature-text{ font-size:12px; }

  /* ---- フッター ---- */
  .footer-sitemap a{ font-size:10px; }
  .footer-company-name{ font-size:12px; }
  .footer-copyright{ font-size:10px; }
}

@media (max-width:480px){
  :root{
    --fs-copy-en:40px;
    --fs-copy-jp:15px;
    --fs-table:12px; 
  }
  .header-company-name{ font-size:12px; }
  .president-photo{ width:40%; }
  .footer-badges{ --badge-h:24px; gap:12px; }

  .president-text{ font-size:14px; }
  .president-role{ font-size:10px; }
  .president-name{ font-size:16px; }

  .recruit-hero-heading{ font-size:18px; }
  .recruit-hero-desc{ font-size:14px; }
  .education-message{ font-size:16px; }
  .education-period{ font-size:14px; }
}