/* Phone and tablet layout of the Answers interim site (sf-answers-01-06).
   The pages keep the old PC markup and CSS. Every rule here sits inside the media block below,
   so a window 960 px or wider (the old PC frame) applies none of them. Linked last in <head>. */

@media (max-width: 959px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  /* No element may be wider than its column. Old fixed widths become upper bounds. */
  #container,
  #container * {
    box-sizing: border-box;
    max-width: 100%;
  }
  #container img {
    height: auto;
  }
  /* Except the logo loop: jquery.logoop.js sets the strip 90 px per logo wide (an 80 px content-box logo + 10 px
     gap); capped at the column it wrapped into rows below the line */
  #container .logoop ul,
  #container .logoop ul * {
    box-sizing: content-box;
    max-width: none;
  }

  /* The 960 px frame becomes one fluid column */
  #container,
  #header,
  #main,
  #pagePath ol,
  #mainImage,
  #mainImage .inner,
  #offerBox,
  #conts,
  .singleConts #conts,
  #footer,
  #footer .footInner {
    width: auto;
    float: none;
  }
  #header,
  #main,
  #pagePath ol {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* The sidebar moves under the main column */
  #sideBar {
    float: none;
    clear: both;
    width: auto;
    margin: 20px 0 0;
  }
  #main #sideBar > div,
  #main #sideBar .inner,
  #main #sideBar ul,
  #main #sideBar li,
  #main #sideBar li a {
    width: auto; /* 2-layout.css gives each block 200px ("#sideBar .sideAbout") */
  }

  /* Header: the long h1 wraps; the logo and the top button stack */
  #header h1 {
    position: static;
    width: auto;
    height: auto;
    font-size: 10px;
    line-height: 1.4;
    white-space: normal;
  }
  #header {
    height: auto; /* 87px in 2-layout.css; the wrapped h1 needs more */
  }
  /* The white h1 text sat on a 20 px blue band drawn by the body background (body_bg*.gif); its wrapped
     lines fell below the band, white on white. The h1 carries the band colour itself. */
  #header h1 {
    margin: 0 -10px;
    padding: 2px 10px 3px;
    background-color: #258dda;
    text-align: left; /* PC: right; a wrapped right-aligned line hung on its own at the right */
    max-width: none; /* the -10px margins reach the screen edges; capped at 100% the band stopped 20 px short */
  }
  #header #headLogo,
  #header .sideTop {
    position: static;
    float: none;
  }
  #header .sideTop {
    margin: 6px 0;
  }
  /* The top page's hero is pulled 6 px up into the header (2-layout.css #mainImage). On PC that lands on the
     space under the floated logo; with the logo static the header ends at the logo, so it covered "by ANDPRO" */
  #mainImage {
    margin-top: 0;
  }

  /* Labels the PC layout places with position: absolute flow in the text instead */
  /* (#main raises specificity over the old page rules, e.g. "#conts .infoBox .inner .btnBox p") */
  #mainImage .lead .occupations,
  #main #conts .searchBoxOuter .categoryTitle .count,
  #main #conts .orderId,
  #main #conts h2.search .count,
  #main #conts .categorySearch p.amount,
  #main #conts .categorySearch p.count,
  #main #conts .searchTitle p.num,
  #main #conts .infoBox .btnBox p.number,
  #main #conts h2.company .count,
  #main #conts .mainImage h2 {
    position: static;
  }
  #main #conts .orderId {
    text-align: right;
  }
  /* Job cards: お問い合わせ番号 sat at the bottom right beside the button on the PC; in the flow it touched the
     button's lower edge */
  #main #conts .infoBox .btnBox p.number {
    margin-top: 10px;
    padding: 0 10px;
    text-align: right;
  }
  /* The headings kept room on the right for those labels */
  #main #conts h2.search {
    height: auto; /* css/index.css: 41px */
    padding-right: 10px;
  }
  #main #conts h2.search,
  #main #conts h2.manual {
    padding-bottom: 6px; /* 0 in the PC CSS, where the fixed height left room; the last line touched the edge */
  }
  #about .topImage .bn {
    position: static; /* css/about.css: placed over the hero picture */
    margin: 10px auto;
  }

  /* Category hero: the title sat at a fixed spot on a fixed-height picture; it now flows */
  #main #conts .mainImage {
    height: auto;
    padding: 24px 15px;
    background-size: cover;
  }

  /* Table labels (仕事内容, 勤務地 …) stay on one line */
  #main #conts table th {
    white-space: nowrap;
  }

  /* Footer navigation wraps; the 77px band grows with it (its gradient picture stretches) */
  #footer {
    height: auto;
    padding-bottom: 8px;
    background-size: 100% 100%;
  }
  #footNav {
    width: auto;
  }
  #footNav li {
    display: inline-block;
    float: none;
  }

  /* Data tables of the static pages (/access/, /english/ …) are wider than a phone: they scroll inside
     the column. Job cards keep the table layout, which fits once the labels stay on one line; search forms
     stack their cells (勤務地 list, below). */
  #container table {
    width: 100%;
  }
  #main #conts table {
    display: block;
    overflow-x: auto;
  }
  #main #conts .infoBox table,
  #main #conts table.search {
    display: table;
  }

  /* Page rules that give a column a fixed side margin or a float: a capped width plus the margin
     would stick out, so the margin goes and the float stacks. */
  body {
    min-width: 0; /* yakuzaishi/css/common.css sets 940px (/薬剤師/shigoto*.php) */
  }
  #main #conts {
    margin-left: 0; /* css/info.css: 0 30px */
    margin-right: 0;
  }
  #main #conts .jobList {
    margin-left: 0; /* css/index.css */
  }
  #main #conts .text {
    margin-left: 0; /* css/flow.css: the step texts, 88px */
  }
  #about .floatImgs,
  #about .support02,
  #about .interview {
    float: none;
    margin: 10px auto;
  }
  /* 特徴3: the wish list picture (position: absolute, top left) sat beside the right-floated handshake picture;
     with the picture centred, the list lay over the figures. The block keeps room above the picture for it. */
  #about .supportText:has(> .pointImgs) {
    padding-top: 75px;
  }
  #about .tabBox {
    margin-left: 0; /* css/about.css: 20px */
  }
  #conts .ttl01 .bg:before,
  #conts .ttl01 .bg:after {
    display: none; /* yakuzaishi/css/common.css: decorative bars 50px outside the heading text */
  }

  /* Top page: the decorative worker picture sits right of the 960 px frame; job titles wrap */
  #mainImage .worker {
    display: none;
  }
  /* The hero is 301 px high (2-layout.css); at 360 px its wrapped copy pushed the button onto the 求人企業 tab
     below. It grows with its content and holds the floated button. */
  #mainImage .inner {
    display: flow-root;
    height: auto;
    padding-bottom: 24px;
  }
  #conts .recentList .order a {
    white-space: normal;
  }
  /* Rollover buttons: the box keeps its PC height and draws the hover picture (…_over) at full size behind the
     button picture, which shrinks with the column. The hover picture showed under the button as a second
     button. The box takes the button picture's height and the hover picture scales with it. */
  #mainImage .bn,
  #about .topImage .bn,
  #about .inqBox .inqBtn a,
  #main #conts .bnBox a {
    height: auto; /* 2-layout.css 68px, inexperience.css 61px */
    background-size: 100% auto;
  }
  #mainImage .bn img,
  #about .topImage .bn img,
  #about .inqBox .inqBtn a img,
  #main #conts .bnBox a img {
    display: block; /* inline, the picture left a baseline gap under it, where the hover picture showed */
  }

  /* Boxes the PC layout gives a fixed height (sf-answers-01-07): in one narrow column their text wraps taller
     than the box and is drawn over the next block (e2e/phone-overlap.spec.ts). The box grows with its text;
     where the height carried a background picture, the picture keeps its own size at the top. */
  #main .mainImageWide,
  #main #conts .mainImg,
  #main .mainVisual {
    height: auto; /* css/search/common.css 280px, css/closed.css 293px, css/phd.css 205px */
    padding-bottom: 20px;
  }
  #main .mainImageWide {
    padding-left: 15px;
    padding-right: 15px;
    background-size: auto 100%;
  }
  #main .mainVisual {
    padding-left: 15px;
    padding-right: 15px;
  }  /* /closed/ hero: the picture draws a rule under a one-line copy; wrapped, the rule ran through the text.
     The picture stays as the backdrop, scaled to the box; the copy carries its own rule. */
  #main #conts .mainImg {
    background-size: cover;
    background-position: right top;
  }
  #main #conts .mainImg p.copy {
    padding: 8px 10px 6px 0;
    background: #fcf7e4;
    border-bottom: 1px solid #333;
  }
  #main #conts .mainImg .imgR {
    float: none; /* css/closed.css: the pie chart floated beside the lead text */
    margin: 10px auto;
  }
  /* Category SEO text: pinned to the bottom of a 165 px reserve (2-layout.css); taller on a phone, it grew
     upward over the banners. It follows the page instead. */
  .inSeo #main #conts .seoRoom {
    padding-bottom: 0;
  }
  #main .seo {
    position: static;
    width: auto;
  }
  #container #main h2.topimage {
    height: auto; /* css/inexperience.css: the topics hero, 170px (".msl #container .topimage" 192px) */
    padding-right: 15px;
    padding-bottom: 20px;
  }
  #main #conts .merit ul,
  #main #conts .searchBoxOuter .categoryTitle,
  #main #conts h2.useful,
  #main #conts .manualList li a,
  #main #conts .topicsList li span.bg,
  #main #conts ul.banner,
  #main #conts p.question {
    height: auto; /* css/search/list.css 70px, css/search/common.css 41px, css/index.css 39px / 209px / 179px */
  }
  #main #conts .merit ul {
    background-size: 100% 100%;
  }
  /* 非公開求人 block: the pie chart (320 × 132 px) sat bottom-right behind the text; it moves above it */
  #main #conts div.supportService .description {
    padding-top: 142px;
    background-position: center top;
  }
  /* Job cards: narrower label cells leave the 勤務地 value room to wrap less */
  #main #conts .infoBox table th {
    padding-left: 6px;
    padding-right: 6px;
  }
  #main #conts h2.manual {
    height: auto; /* css/index.css 39px */
  }
  /* 企業研究 hero: the text kept 255 px on the right for the picture, leaving it 35 px wide */
  #main #conts .mainImage .inner {
    height: auto; /* css/company.css 178px */
    padding: 20px 15px;
  }
  /* 統計 article pager: 目次に戻る sat centred (position: absolute) between two 239 px floats; they stack */
  #main #conts .article .pager li {
    position: static;
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    text-align: left;
  }
  /* Top page cards (転職トピックス, お役立ちコンテンツ): the link was laid over the whole card with its text
     pushed to the bottom-right corner (css/index.css "padding: 155px 0 0 140px"). In a narrow card the text
     fell outside the card, under the next one. It follows the card text instead. */
  #main #conts .topicsList li.type2 span.bg {
    padding: 15px 12px 10px;
    background: #fff; /* css/index.css: one 239 × 324 px card picture, which the text no longer matches */
    border-top: 3px solid #258cd8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  /* 応募書類 cards: the same kind of fixed-size frame picture, one per template (css/index.css blue / brown,
     css/search/901.css orange). The picture stretches to the card, so each template keeps its colour. */
  #main #conts .manualList li a {
    background-size: 100% 100%;
    padding-bottom: 12px;
  }
  /* The cards are fixed-width floats (146 px on job-type pages, 211 px on the top page): two side by side left
     their text 112 px wide. One card per row, as wide as the column. */
  #main #conts .manualList {
    margin-left: 0;
  }
  #main #conts .manualList li {
    float: none;
    margin: 0 0 12px;
  }
  #main #conts .manualList li a {
    width: auto;
  }
  #main #conts .manualList li a .title br {
    display: none; /* line breaks set for the 146 px PC card; the full-width card fits each title on one line */
  }
  #main #conts .manualList li a .img {
    display: block; /* inline on job-type pages: the picture sat at the left of the wide card */
    text-align: center;
  }
  #main #conts .topicsList li .link a {
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 15px 15px;
    padding: 0 0 0 15px;
    background-position: 0 4px;
  }

  /* Search heading: its "検索条件を追加・変更する" link sat at a fixed spot right of the title */
  #main #conts .searchTitle p {
    position: static;
    margin: 6px 0 0;
  }

  /* Search box 勤務地 list (css/search/common.css, supervising.css): each area is a 151 px float beside a 375 px
     prefecture float of 125 px cells. Opened on a phone, the table grew to 514 px and the page was wider than
     the screen, cut off on the right. The prefectures go under their area, two per row. */
  #main #conts .condition .area,
  #main #conts .condition .pref {
    float: none;
    width: auto;
  }
  #main #conts .condition .pref {
    padding-left: 1em;
  }
  #main #conts .condition .pref li {
    width: 50%;
  }
  /* The label cell (希望勤務地, 130 px) beside the list left the prefectures two lines each; it goes above */
  #main #conts table.search,
  #main #conts table.search tbody,
  #main #conts table.search tr,
  #main #conts table.search th,
  #main #conts table.search td {
    display: block;
    width: auto;
  }
  #main #conts table.search th {
    border-bottom: 0;
  }

  /* Job detail: the two "ご希望の求人" boxes stack instead of sitting in one table row */
  #main #conts .detailNavi {
    display: block;
    margin: 0;
  }
  #main #conts .detailNavi li {
    display: block;
    width: auto;
    margin: 0 0 15px;
  }

  /* Hero headings (sf-answers-01-07, e2e/phone-bounds.spec.ts): sized for the 960 px frame (40–56 px), they
     filled the phone screen. The heading gets a phone size in px; its spans keep their relative em sizes. */
  #container #main .mainImageWide h2 {
    font-size: 24px; /* css/search/common.css 3em, search/7.css 3.333em, search/901.css 3.167em */
  }
  #main #conts .mainImg h2 {
    font-size: 28px; /* css/closed.css 46px */
  }
  #main #conts .mainImg h2 span {
    font-size: 34px; /* css/closed.css 56px */
  }
  #main .mainVisual .ttl {
    font-size: 26px; /* css/phd.css 3.58em */
  }
  #container #main h2.topimage {
    font-size: 18px; /* css/inexperience.css 2.5em; its lines scale from it (.msl .previous / .next about 1.17em) */
  }
  #container #main .topimage .next span span {
    font-size: 26px; /* css/inexperience.css 1.667em / .msl 1.43em: 50 px */
  }
  #main .topImage h2 {
    font-size: 26px; /* css/supervising.css 3.9em; its span 1.2em */
  }

  /* Frame and divider pictures drawn for the 730 px column, centred or right-anchored: a narrow box cut off
     their corners, side tabs and illustrations. They scale to the box width. */
  #main #conts .merit01,
  #main #conts .merit02,
  #main #conts .merit03,
  #main #conts .merit01 .inner,
  #main #conts .merit02 .inner,
  #main #conts .merit03 .inner,
  #main #conts [class^="step0"],
  #main #conts .reason,
  #main #conts .reason .inner,
  #main #conts .detailNavi li,
  #main #conts .detailNavi li .head p {
    background-size: 100% auto;
  }
  /* /find/ merits: the scaled frame keeps the ribbon and illustration in its top 75 px; the text starts below
     them and uses the whole box (css/find.css .text 440–460 px beside the illustration) */
  #main #conts .merit01,
  #main #conts .merit02,
  #main #conts .merit03 {
    padding-top: 70px;
  }
  #main #conts .merit01 .inner,
  #main #conts .merit02 .inner,
  #main #conts .merit03 .inner {
    padding: 0 15px 20px;
  }
  #main #conts .merit01 .text,
  #main #conts .merit02 .text,
  #main #conts .merit03 .text {
    width: auto;
  }
  /* Hero pictures behind text: they cover the box instead of showing a slice of the PC picture */
  #main .topImage,
  #mainImage .inner,
  #main #conts .mainImage .inner {
    background-size: cover;
    background-position: right top; /* the PC pictures keep their subject at the right */
  }
  #main #conts .index {
    background-size: 100% auto; /* css/phd.css: the Index title bar, 726 px */
  }

  /* /find/ 概要: text and picture sat side by side (flex); they stack */
  #main .topImage .outlineBox {
    display: block;
  }
  #main .topImage .outlineBox .txt {
    width: auto; /* css/find.css 420px */
  }
  #main .topImage {
    padding-left: 10px;
    padding-right: 10px;
  }
  #main .topImage .pageHdg {
    margin-left: -10px; /* css/find.css -30px, for the 30 px PC padding */
    margin-right: -10px;
  }

  /* 統計 hero: a 710 px frame picture (illustration at the bottom right), text kept 170 px off it, and an 8 px
     left margin. On a phone the box fills the column with a plain frame of the picture's colour. */
  #main #conts div.statistics {
    margin-left: 0;
    padding-bottom: 5px;
    border: 5px solid #eee;
    background: #fff;
  }
  /* Topics hero (css/inexperience.css): a white panel picture as tall as the one-line PC title; the wrapped
     title ran out of it. The panel is drawn in CSS and grows with the title. */
  #container #main h2.topimage {
    background: #fff !important; /* css/inexperience.css .msl: the picture is set with !important */
    border: 1px solid #e3e3e3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }
  #main #conts div.statistics p,
  #main #conts div.statistics .lead {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Pictures floated beside a paragraph (about half the column) left the text a 100–140 px column; on a
     phone the picture goes above the text */
  #main #conts .imgR,
  #main #conts .floatR,
  #main #conts .trend img,
  #main #conts .sec01 .image,
  #main #conts .txt + .image,
  #main #conts .intro .img {
    float: none;
    margin: 0 auto 12px;
    text-align: center;
  }
  /* 管理薬剤師 topics: the workplace photos (230 px) floated right of their paragraph ("#conts img"), leaving the
     first lines 85 px wide */
  #main #conts .border > div > img {
    float: none;
    display: block;
    margin: 0 auto 12px;
  }
  /* /flow/ steps: the photo floated right of a 399 px title picture; in one column the title picture ran under
     the photo. It sits above the title with room to breathe. */
  #main #conts [class^="step0"] .image {
    float: none;
    margin: 0 auto 24px;
    text-align: center;
  }
  /* /flow/ overview: six 118 px step pictures in one PC row wrapped two per row, so the arrows pointed at
     nothing. Three per row (1–3, 4–6), each picture scaled to its cell. */
  #main #conts .flowList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 2px;
    width: auto;
  }
  #main #conts .flowList li {
    float: none;
    margin: 0;
  }
  #main #conts .flowList li img {
    width: 100%;
    height: auto;
  }
  #main #conts .flowList li.last img {
    width: calc(100% * 110 / 118); /* 110 px with no arrow: same scale, so the same height as the others */
  }
  /* CRA topics: two detail boxes side by side (flex, 50% each) left 125 px lines; they stack */
  #main #conts .column04 .sec01 .detailBlock {
    display: block;
  }
  #main #conts .column04 .sec01 .detailBlock .detailBox {
    width: auto;
    margin: 0 0 15px;
  }
  /* 薬剤師 page: the merit lists kept a 10 px side margin beside a capped full width */
  #main #conts .trend .meritList {
    margin-left: 0;
    margin-right: 0;
  }
  /* 薬剤師 page: the CRA / 管理薬剤師 features kept 180 px on the right for their person photo (179 px tall).
     Without that room the text ran over the face; the photo moves under the text instead. */
  #main #conts .inexperience .inner {
    padding-right: 15px;
    padding-bottom: 190px;
    background-position: right bottom;
  }
  /* 転職トピックス cards (top page): 239 px floats in a flex row, one per row on a phone, centred and off by a
     few px from row to row. One card per row, as wide as the column. */
  #main #conts .topicsList {
    display: block;
    margin-left: 10px; /* css/index.css: 4px on the left only, so the cards sat off-centre */
    margin-right: 10px;
  }
  #main #conts .topicsList li.type2 {
    float: none;
    width: auto;
    margin: 0 0 15px;
  }
  #main #conts .topicsList li.type2 span.bg {
    width: auto;
  }
  #main #conts .topicsList li.type2 .bg .title {
    height: auto; /* css/index.css 54px */
    margin: 0 0 10px;
    padding: 0 0 8px;
    background: none; /* a dotted-line picture as wide as the PC card */
    border-bottom: 1px dotted #258cd9;
    text-align: center;
  }
  #main #conts .topicsList li.type2 .bg .title .space {
    padding-left: 0; /* 2.5em indent of the PC card */
  }
  /* 薬剤師 就職先選びの軸 (yakuzaishi/css/shigoto.css): three 286 px boxes side by side, 40 px apart; wrapped, the
     40 px margin pushed the 2nd and 3rd off-centre. They stack across the column. */
  #main #conts .select .axis .list .box {
    float: none;
    width: auto;
    margin: 0 0 12px;
  }
  /* 薬剤師 market charts (shigoto.css .transition): two charts side by side, the first with a 30 px right margin
     and a divider; stacked, it sat off-centre against the next chart's title */
  #main #conts .transition .box {
    float: none;
    margin: 0 auto 30px;
    padding-right: 0;
    border-right: 0;
  }
  /* 薬剤師資格 / 医師免許 / ポスドク banners (css/index.css): three 232 px floats in one PC row; stacked on a phone
     they sat at the left of the column. Each one is centred and its link fills it. */
  #main #conts .banner .pharmacist,
  #main #conts .banner .doctor,
  #main #conts .banner .doctorate {
    float: none;
    margin: 0 auto 6px;
  }
  #main #conts .banner li a {
    width: auto; /* 211px */
  }
  /* 企業研究 cards (top page, /company/): three 227 px cards per row on the PC; on a phone one card sat at the
     left of the column with a third of it empty. One card per row, as wide as the column. */
  #main #conts .companyList {
    display: block;
  }
  #main #conts .companyList li a {
    width: auto;
  }
  /* 非公開求人 banner in job lists: a 125 px box on a 718 × 150 px picture; the wrapped text ran out of the box.
     The box grows with its text and the picture stretches to it. */
  #main #conts div.closedBox {
    margin-left: 0; /* css/search/list.css 5px */
  }
  #main #conts .closedBox a {
    height: auto;
    padding: 20px 15px;
    background-size: 100% 100%;
  }
  #main #conts .inexperience {
    margin: 0 0 20px;
    background: #fff; /* css/search/901.css: a 720 × 192 px card picture, shorter than the stacked card */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  /* 管理薬剤師 topics hero: the title sat left of a person photo; covering a phone-sized box, the photo put the
     face behind the title. The title goes first and the photo, 160 px tall, under it. */
  #main .topImage:has(> h2.next) {
    padding: 20px 15px 170px;
    background-size: auto 160px;
    background-position: right bottom;
  }
  #main #conts .inexperience .inner p {
    width: auto; /* 140px */
  }
  /* 薬事 / 製剤研究 / 学術 hero (css/search/10.css, 13.css, 21.css): the copy and title are placed absolutely on a
     260 px picture. With the height auto the box shrank to its padding and the text was drawn over the SEO text
     below. They flow in the box, which covers the picture. */
  #container #main .mainImageWideOld {
    padding-top: 20px;
    background-size: cover;
    background-position: right top;
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.7); /* the photo (hands, keyboard) fills the box behind
                                                                  the text; a white veil keeps the text readable */
  }
  #container #main .mainImageWideOld p,
  #container #main .mainImageWideOld h2 {
    position: static;
  }
  #container #main .mainImageWideOld h2 {
    margin-top: 10px;
  }
  #container #main .mainImageWideOld br {
    display: none; /* line breaks set for the 960 px picture */
  }
  /* 薬事 job detail: the 特集ページ button is 47 px with a 21 px link (css/search/10.css); its label wraps on a
     phone and the last character fell out under the button */
  #main #conts .detailNavi .btn,
  #main #conts .detailNavi .open .btn a {
    height: auto;
  }
  /* CRA search heading: 非公開求人とは？ sat 22 px above the box (css/search/7.css), over the heading's last line */
  #main #conts .searchTitle .closeAbout {
    position: static;
    display: block;
    margin: 12px 0 4px;
    text-align: right;
  }
}

/* Phone text sizes (小寺さん 2026-10-29): the PC sizes (11–13 px) read small on a phone. The review compared
   the &ANDPRO staging site (stg-automotive.and-pro.jp). It draws its phone page at width=320, so its
   12–13 px text shows at about 15–16 px on a 390 px phone. Body text of the job pages and the category texts gets about that. */
@media (max-width: 599px) {
  /* Not the search form (table.search): its 勤務地 list keeps 13 px, at which its floats line up at 360 px */
  #main #conts table:not(.search) td {
    font-size: 15px; /* job cards, job detail and the static pages' tables: 13 px */
    line-height: 1.7;
  }
  #main #conts table:not(.search) th {
    font-size: 14px; /* job cards 16 px, detail 13 px: a label one step under its value */
  }
  #main #conts p.jobOverview,
  #main #conts .infoBox .btnBox p.number,
  #main #conts .compName p {
    font-size: 15px;
  }
  #main #conts .compName p span {
    font-size: inherit;
  }
  /* Job cards: 情報確認日 floated right of the company name and squeezed it into a narrow column; it takes its
     own line, as on the staging site */
  #main #conts .infoBox .compName .date {
    float: none;
    margin: 0 0 6px;
    text-align: right;
  }
  /* Job cards: 勤務地 | value | 年収 | value in one row left each value about 75 px; a workplace name wrapped to
     four lines. Each label goes above its value. */
  #main #conts .infoBox table,
  #main #conts .infoBox tbody,
  #main #conts .infoBox tr,
  #main #conts .infoBox th,
  #main #conts .infoBox td {
    display: block;
    width: auto;
  }
  #main #conts .infoBox colgroup {
    display: none;
  }
  #main #conts .infoBox th {
    padding: 6px 12px;
    text-align: left;
  }
  #main #conts .infoBox td {
    padding: 10px 12px;
  }
  #main .mainImageWide p {
    font-size: 15px; /* the category hero copy: 13 px */
    line-height: 1.7;
  }
  .inSeo #main #conts .seo,
  #main .seo p {
    font-size: 14px; /* the category SEO text: 11 px */
    line-height: 1.7;
  }

  /* Company basic information is a label/value list, not two phone-width columns. Keep the existing
     table semantics and put each real heading above its full-width value, as with job cards. */
  #main #conts .companyDate table,
  #main #conts .companyDate table > tbody,
  #main #conts .companyDate table tr,
  #main #conts .companyDate table th,
  #main #conts .companyDate table td {
    display: block;
    width: 100% !important;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
  }
  #main #conts .companyDate table {
    overflow: visible;
    border: 0;
  }
  #main #conts .companyDate table tr {
    margin: 0 0 16px;
  }
  #main #conts .companyDate table th,
  #main #conts .companyDate table td {
    padding: 10px 12px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.7;
  }
  #main #conts .companyDate table th {
    padding-top: 6px;
    padding-bottom: 6px;
    background: #f0f0f0;
    font-size: 14px;
  }
  #main #conts .companyDate table td {
    border-top: 0;
    font-size: 15px;
  }

  /* Narrative comparison tables become one card per record. Labels come from the original column
     headers, resolved during static preparation; desktop markup and numeric charts stay unchanged. */
  #container #main table[data-mobile-stack],
  #container #main table[data-mobile-stack] > tbody,
  #container #main table[data-mobile-stack] > thead,
  #container #main table[data-mobile-stack] > tfoot,
  #container #main table[data-mobile-stack] tr[data-mobile-record],
  #container #main table[data-mobile-stack] tr[data-mobile-record] > th,
  #container #main table[data-mobile-stack] tr[data-mobile-record] > td {
    display: block;
    float: none;
    position: static;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  #container #main table[data-mobile-stack] {
    border: 0;
    overflow: visible;
  }
  #container #main table[data-mobile-stack] colgroup {
    display: none;
  }
  /* Keep original headers available to assistive technology without a squeezed visual header row. */
  #container #main table[data-mobile-stack] tr[data-mobile-header] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #container #main table[data-mobile-stack] tr[data-mobile-record] {
    margin: 0 0 20px;
    border: 1px solid #d5d5d5;
    border-top: 3px solid #258dda;
  }
  #container #main table[data-mobile-stack] tr[data-mobile-record] > th,
  #container #main table[data-mobile-stack] tr[data-mobile-record] > td {
    margin: 0;
    padding: 12px;
    border: 0;
    border-bottom: 1px dotted #d5d5d5;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: 15px;
    line-height: 1.7;
  }
  #container #main table[data-mobile-stack] tr[data-mobile-record] > th {
    background: #eaf4fa;
    color: #333;
    font-weight: bold;
  }
  #container #main table[data-mobile-stack] tr[data-mobile-record] > td:last-child {
    border-bottom: 0;
  }
  /* The desktop arrow joins horizontal salary cells; it must not extend outside a vertical card. */
  #container #main table[data-mobile-stack] .border_arrow td::after {
    display: none;
  }
  #container #main table[data-mobile-stack] td[data-mobile-label]::before {
    content: attr(data-mobile-label);
    display: block;
    margin: -12px -12px 10px;
    padding: 6px 12px;
    border-bottom: 1px dotted #d5d5d5;
    background: #f0f0f0;
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }

  /* Tap-to-enlarge for the résumé guide samples (/site/zoom.js; 小寺さん, 2026-11). The overlay is appended to
     <body>, outside #container, so the max-width cap above does not shrink the enlarged image. */
  #container img.zoomable {
    cursor: zoom-in;
  }
  #container .zoomHint {
    display: block;
    margin: 4px 0 12px;
    color: #666;
    font-size: 12px;
    text-align: right;
  }
  html.zoomOpen,
  html.zoomOpen body {
    overflow: hidden;
  }
  .zoomOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
  }
  .zoomOverlay .zoomBox {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 56px 8px 24px;
    box-sizing: border-box;
    text-align: center;
  }
  .zoomOverlay .zoomBox img {
    display: inline-block;
    max-width: none;
    width: auto;
    height: auto;
    background: #fff;
  }
  .zoomOverlay .zoomClose {
    position: fixed;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 28px;
    line-height: 44px;
    cursor: pointer;
  }
}