/* ================================================
   ① 〜900px（タブレット＋スマホ共通）
================================================ */
@media (max-width:900px){

  /* ---------- 変数 ---------- */
  :root{
    --header-height:var(--header-height-sp);  /* 120px→60px。余白ズレがまとめて直る */
    --fs-heading-lg:25px;
    --fs-tel-number:24px;
    --fs-body:16px;
    --fs-table:14px;
    --circle:min(28vw, 140px);
    --circle-gap:3vw;
  }

  /* ================= 共通 ================= */
  body{ overflow-x:clip; }   /* はみ出しの保険 */

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

  /* ---- ヘッダー ---- */
  #site-header{ height:var(--header-height-sp); }
  .header-inner{ padding:0 20px; }

  .header-logo{ min-width:0; flex:1; }
  .header-logo a{ gap:8px; }
  .header-logo .logo-img{ height:34px; margin:0; }
  .header-company-name{
    font-size:12px;
    white-space:normal;
    line-height:1.3;
  }

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

  .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; flex-shrink:0; }

  /* ---- フッター ---- */
  .footer-inner{ flex-direction:column; gap:0; }
  .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:12px 20px; }
  .footer-sitemap a{ font-size:15px; }
  .footer-badges{
    --badge-h:30px;      /* アイコンの高さ（ここを変えると3つ同時に変わる） */
    gap:20px;
    flex-wrap:wrap;      /* 狭い画面で横にはみ出さない保険 */
  }
  .footer-badges img{
    height:var(--badge-h);
    width:auto;
    margin-top:8px;
  }

  /* ---- 本文の折り返し（<br>を無効化し文節単位で折り返す） ---- */
  .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;         /* 最終行が極端に短くなるのを避ける */
  }

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

  .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-section{ padding-bottom:32px; }
  .business-section .section-title{ width:100%; }
  .business-list{ width:100%; gap:48px; }

  .business-card{
    flex-wrap:wrap;
    flex-direction:column;
    align-items:stretch;
    max-width:100%;
  }
  .business-card-img{
    width:100%;
    aspect-ratio:21 / 9;
  }
  .business-card-box{
    width:100%;
    margin:0;
    min-height:0;
    padding:28px 20px 24px;
  }
  .business-title{ width:auto; font-size:28px; }
  .business-subtitle{ font-size:18px; }
  .business-desc{ padding:16px 0 0; font-size:16px; }
  .business-link{
    position:static;
    justify-content:flex-end;
    margin-top:16px;
  }
  .business-corner-img{
    width:80px;
    height:80px;
    top:16px;
    right:16px;
  }

  .highlights-inner{ flex-direction:column; gap:72px; }
  .highlights-news .title-eyebrow{ padding-top:16px; }
  .highlights-news .section-title{ margin-bottom:16px; }
  .news-item{
    flex-direction:row;
    align-items:baseline;
    gap:50px;
    padding:12px 0;
  }
  .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;
  }
  .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; }

  /* ================= 会社案内ページ ================= */
  .page-hero{
    width:92%;
    height:26vh;
    margin-top:var(--header-height-sp);
  }

  .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);
    font-size:max(20px, calc(var(--u) * 40));
  }
  .about-hero .title-eyebrow{ padding-top:calc(var(--u) * 50); }
  .about-hero-copy{ width:100%; padding:0 20px; }
  .about-copy-jp{ margin-top:calc(var(--u) * 16); }
  .about-hero-lead{
    left:50%;
    top:68%;
    padding:0 20px;
    font-size:15px;
    text-align:center;
  }
  .about-hero-scroll{ display:none; }

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

  .company-table{ width:100%; }          /* 採用情報の表と共通 */
  .company-table th{ width:180px; }
  .company-table td{ overflow-wrap:anywhere; }

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

  /* ================= 採用情報ページ ================= */
  .recruit-info-section .section-title{
    width:100%;
    margin-left:0;
    margin-right:0;
  }

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

  /* ================= 事業内容ページ ================= */
  .category-section{ scroll-margin-top:var(--header-height-sp); }

  /* ---- ヒーロー（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);   /* 固定ヘッダーの下から開始 */
  }
  .business-hero-text{
    width:100%;
    padding:32px 6%;
  }
  .business-hero-img{
    width:100%;
    height:40vh;
  }
  .business-hero-scroll{ display:none; }

  /* 反転したワイヤーフレームは箱いっぱいに（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));
  }

  /* ---- ヒーロー〜技術支援タイトルの余白を詰める ---- */
  .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; }

  /* ---- カテゴリ見出し・本文 ---- */
  .category-title,
  .small-heading,
  .body-text{ max-width:100%; }
  .subsection-heading{ max-width:100%; font-size:20px; }
  .icon-row{ max-width:100%; flex-wrap:wrap; }

  .category-header{ padding-top:24px; margin-bottom:32px; }
  .category-header-top{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .category-subtitle{ padding:0; font-size:20px; }

  /* ---- 技術支援 ---- */
  .tech-content{
    max-width:100%;
    padding:32px 24px;
  }
  .trade-style{
    flex-direction:column;
    align-items:center;
    gap:40px;
    margin-top:40px;
    margin-bottom:24px;
  }
  .trade-style-item{ max-width:100%; }
  .category-section--hero-bg .tech-content .trade-style-title{ font-size:20px; }
  .category-section--hero-bg .tech-content .trade-lead{ font-size:17px; }
  .trade-text{ padding-bottom:24px; }

  .case-carousel-title{
    padding:14px 16px;
    font-size:18px;
  }
  .case-item{ width:280px; height:168px; }
  .case-name{ font-size:15px; }

  .tech-note,
  .tech-clients{
    flex-direction:column;
    gap:12px;
    text-align:center;
  }
  .tech-clients-names{
    flex-direction:column;
    align-items:center;
    gap:0;
  }
  .tech-note-text,
  .tech-clients-label,
  .tech-clients-names span{ font-size:15px; }

  /* ---- 開発支援：サービスフロー ---- */
  .service-flow-header{ padding-left:140px; }
  .service-flow-title{ font-size:24px; }
  .service-flow-subtitle{ font-size:16px; }
  .service-flow-arrow{ left:107px; }                   /* 矢印を隙間列(100〜140px)の中央に */
  .flow-row{ grid-template-columns:100px 40px 1fr; }   /* バッジ列を100pxに拡大（はみ出し解消） */
  .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; }

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

  /* ================= お問い合わせ／ポリシー ================= */
  .contact-section{
    padding:calc(var(--header-height-sp) + 40px) 20px 72px;
  }
  .contact-subsection{ font-size:18px; }
}

/* ================================================
   ② 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; }             /* 数字を上げるほど内側へ */

  /* ================= 会社案内ページ ================= */
  .about-copy-en{ font-size:max(20px, calc(var(--u) * 50)); }
  .about-copy-jp{ font-size:max(13px, calc(var(--u) * 24)); }

  /* ================= 採用情報ページ：ヒーローを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%;
  }
  .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; }

  /* ================= 事業内容ページ ================= */
  /* 業務請負／技術者派遣を横並びに */
  .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;
  }
}

/* ================================================
   ③ 〜600px（スマホ）
================================================ */
@media (max-width:600px){

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

  /* ================= 共通 ================= */
  .btn-primary{ padding:18px 20px; font-size:16px; }

  .header-logo .logo-img{ height:28px; }

  .footer-logo{ height:40px; padding-bottom:5px; }
  .footer-sitemap a{ font-size:10px; }
  .footer-badges{
    --badge-h:26px;
    gap:16px;
  }

  /* ================= トップページ ================= */
  .business-section .section-title,
  .highlights-news .section-title{ font-size:20px; }
  .business-title{ font-size:18px; }
  .business-subtitle{ font-size:12px; }
  .business-desc,
  .business-link{ display:none; }
  .business-corner-img{
    width:56px;
    height:56px;
  }

  /* ================= 会社案内ページ ================= */
  .about-hero-copy{ top:58%; }                         /* 小さい画面でタイトルと近づきすぎない保険 */
  .about-copy-en{ font-size:max(18px, calc(var(--u) * 50)); }
  .about-copy-jp{ font-size:max(12px, calc(var(--u) * 24)); }
  .about-hero-lead{ font-size:13px; }

  /* 社長写真を小さく＋文章を回り込ませる */
  .president-inner{
    display:block;
    width:100%;
  }
  .president-inner::after{
    content:"";
    display:block;
    clear:both;
  }
  .president-photo{
    float:left;
    width:30%;                                         /* 小さくするなら数字を下げる */
    margin:0 16px 8px 0;
  }
  .president-role{ margin-top:12px; font-size:10px; }
  .president-name{ font-size:16px; }

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

  .map-embed{ aspect-ratio:4 / 3; }

  .access-item{ grid-template-columns:1fr; row-gap:2px; padding:10px 0; }
  .access-title{ text-align:left; font-weight:700; font-size:12px; }

  /* ================= 採用情報ページ ================= */
  /* 画像が上、タイトルを画像左下に重ね、文章は直下の白背景 */
  .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:16 / 9;
    object-fit:cover;
    object-position:50% 30%;                           /* 表示位置。左右 上下 の順で調整 */
  }
  .recruit-hero-text{
    order:2;
    position:relative;
    width:100%;
    height:auto;
    justify-content:flex-start;
    padding:24px 20px 40px;
    background:var(--color-white);
  }
  .recruit-hero-title .title-eyebrow{ padding-top:0; }
  .recruit-hero-heading{ margin:20px 0 12px; font-size:22px; }
  .recruit-hero-desc{
    margin-left:0;
    font-size:15px;
    line-height:1.9;
  }

  /* 教育体制 */
  .education-header{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    margin-bottom:32px;
  }
  .education-message{ font-size:16px; }
  .education-list{ grid-template-columns:1fr; }
  /* 左アイコン／右タイトル＋本文 */
  .education-item,
  .education-item--half{
    grid-column:span 1;
    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; font-size:17px; }
  .education-desc{ grid-area:desc; }

  /* ================= 事業内容ページ ================= */
  /* ---- ヒーロー（PC版と同比率＋上から積む） ---- */
  .business-hero{
    --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-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-circle-en{
    margin-top:2px;
    font-size:7px;
    letter-spacing:0.02em;
  }
  .business-visual-copy{ gap:10px; }
  .business-copy-word{
    width:var(--cd);                                   /* 円と幅を揃える */
    font-size:12px;
    line-height:1.5;
  }
  .business-copy-line2{
    padding:0 12px;
    font-size:11px;
    line-height:1.5;
  }

  /* ---- カテゴリ見出し・本文 ---- */
  .category-subtitle{ font-size:18px; }
  .category-header .body-text,
  .category-header-text .body-text{ font-size:12px; }

  /* ---- 技術支援：請負／派遣（左アイコン＋右にタイトル・本文を縦積み） ---- */
  .trade-style{ gap:10px; }
  .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;
  }
  .category-section--hero-bg .tech-content .trade-lead{ font-size:16px; }
  .trade-text{
    grid-area:text;
    margin:0;
    padding-bottom:0;
    font-size:12px;
    text-align:left;
  }

  /* ---- 技術支援：事例カルーセル（基本スタイルは pages.css） ---- */
  .case-carousel-title{
    padding:14px 16px;
    font-size:14px;
  }
  .case-item{ width:250px; height:150px; }
  .case-name{
    padding:6px 10px;
    font-size:12px;
  }
  .case-note{ font-size:8px; }
  

  /* ---- 技術支援：光学解析の補足／主なお取引先 ---- */
  .tech-note-text,
  .tech-clients-label{ font-size:12px; }
  .tech-clients{
    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:10px; padding-bottom:15px; }

  /* ---- 開発支援：サービスフロー（矢印をやめてバッジをカード上に） ---- */
  .service-flow-header{ padding-left:0; margin-bottom:32px; }
  .service-flow-title{ font-size:18px; }
  .service-flow-subtitle{ font-size:13px; }
  .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{
    align-items:center;
    gap:12px;
    padding:16px 14px;
  }
  .flow-icon{ width:36px; height:36px; }
  .flow-title{ margin-bottom:4px; font-size:14px; }
  .flow-text{ font-size:12px; }
  .flow-text .text-link{ display:block; }              /* STEP01の「→お問い合わせはこちら」を独立した行に */

  /* ---- 開発支援：「全国どこからでも〜」（タイトル＋アイコン横並び／本文は下段） ---- */
  .feature-columns{ flex-direction:column; }
  .feature-column{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:"icon title" "text text";
    align-items:center;
    column-gap:12px;
    padding:24px 20px;
  }
  .feature-title{
    grid-area:title;
    margin:0;
    font-size:16px;
    text-align:left;
  }
  .feature-icon{
    grid-area:icon;
    width:30px;
    height:30px;
    margin:0;
  }
  .feature-text{
    grid-area:text;
    margin-top:12px;
    font-size:12px;
    text-align:left;
  }

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

  /* ---- 本文の折り返し（<br>を無効化し文節単位で折り返す） ---- */
  .category-header-text .body-text br,
  .feature-text br,
  .edu-support-text br,
  .trade-text br,
  .flow-text br{ display:none; }

  .trade-text,
  .category-subtitle,
  .service-flow-subtitle,
  .feature-text,
  .flow-text{
    word-break:auto-phrase;
    text-wrap:pretty;
  }
}

/* ================================================
   ④ 〜480px（小型スマホ）
================================================ */
@media (max-width:480px){

  /* ================= 共通 ================= */
  .footer-badges{ --badge-h:24px; gap:12px; }

  /* ================= 会社案内ページ ================= */
  .president-photo{ width:40%; }
  .president-text{ font-size:14px; }

  /* ================= 採用情報ページ ================= */
  .recruit-hero-heading{ font-size:18px; }
  .recruit-hero-desc{ font-size:14px; }
  .education-period{ font-size:14px; }
}