@charset "UTF-8";

/* Bio pages enabled for stages 2 and 3. Existing desktop styles stay in stage2.css. */
.bio-stage3-page .mobile-menu-search input[type="submit"],
.bio-stage3-page .mobile-menu-toggle,
.bio-stage3-page .mobile-action-toggle {
  cursor: pointer;
}

.bio-stage3-page :focus-visible {
  outline: 2px solid #174fa6;
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .bio-stage3-page .table-scroll .overall-list-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .bio-stage3-page .overall-list-grid > .table-scroll {
    overflow: visible;
  }

  .bio-stage3-page .table-scroll .overall-list-table th,
  .bio-stage3-page .table-scroll .overall-list-table td {
    padding: 0.45em 0.2em;
  }

  .bio-stage3-page .overall-list-table th:first-child {
    width: auto;
  }

  .bio-stage3-page .overall-list-table th:nth-child(2),
  .bio-stage3-page .overall-list-table th:nth-child(3),
  .bio-stage3-page .overall-list-table th:nth-child(4) {
    width: 3.25em;
    white-space: nowrap;
  }

  .bio-stage3-page #ptop,
  .bio-stage3-page h1.page-title {
    height: auto;
  }

  .bio-stage3-page .page-title-main,
  .bio-stage3-page .page-title-sub {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .pcontents {
    padding-right: 1.25em;
    padding-left: 1.25em;
  }

  .bio-stage3-page .bottom-info-main,
  .bio-stage3-page .deferred-payment-note {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .bio-stage3-page .bio-chart-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .bio-stage3-page .bio-chart-scroll .bio-chart-visual,
  .bio-stage3-page .bio-chart-scroll .bio-chart-choice-grid {
    width: var(--bio-chart-width, 760px);
    max-width: none;
  }

  .bio-stage3-page .bio-chart-scroll .bio-chart-main-image {
    width: var(--bio-chart-width, 760px);
    max-width: none;
    height: auto;
  }

  .bio-stage3-page .bio-chart-scroll .bio-chart-choice-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .bio-stage3-page .bio-chart-scroll-5 {
    --bio-chart-width: 750px;
  }

  .bio-stage3-page .bio-chart-scroll-5 .bio-chart-choice-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .bio-stage3-page #floating_menu .pagetop a {
    padding: 0;
    font-size: 15px;
  }

  .bio-stage3-page .mobile-action-toggle,
  .bio-stage3-page .mobile-action-panel,
  .bio-stage3-page .mobile-action-panel a {
    font-family: inherit;
    font-weight: bold;
  }

  .bio-stage3-page .reagent-source {
    display: grid;
    width: 24.5em;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5em;
  }

  .bio-stage3-page .reagent-source-reference {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bio-stage3-page .reagent-source-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .reagent-source-link {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
  }

  .bio-stage3-page .guideline-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1em;
  }

  .bio-stage3-page .guideline-note > * {
    display: block;
    min-width: 0;
    width: auto;
    padding-right: 0;
  }

  .bio-stage3-page .guideline-note > a {
    justify-self: center;
    max-width: 100%;
  }

  .bio-stage3-page #pgroup ul.ptrack {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    min-height: 19px;
    padding: 0.3em 0;
    row-gap: 0.35em;
  }

  .bio-stage3-page #pgroup ul.ptrack li {
    min-width: 0;
    max-width: 100%;
    line-height: 1.4;
  }

  .bio-stage3-page #pgroup ul.ptrack li a,
  .bio-stage3-page #pgroup ul.ptrack li span.here {
    margin-right: 4px;
    margin-left: 4px;
  }

  .bio-stage3-page #product {
    width: 100%;
  }

  .bio-stage3-page .pcontents {
    padding-right: 1em;
    padding-left: 1em;
  }

  .bio-stage3-page #product .ptop,
  .bio-stage3-page h1.page-title {
    height: auto;
    min-height: 78px;
  }

  .bio-stage3-page h1.page-title {
    padding: 0.75em 0.5em;
    font-size: 22px;
  }

  .bio-stage3-page .page-title-main,
  .bio-stage3-page .page-title-sub {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .sec-header-title,
  .bio-stage3-page .content-heading {
    min-width: 0;
  }

  .bio-stage3-page .sec-header-title h2,
  .bio-stage3-page .content-heading h3,
  .bio-stage3-page .content-heading h4 {
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .detail-more-btn {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .bottom-info-contact-link {
    justify-content: center;
    gap: 1em;
  }

  .bio-stage3-page .bottom-info-contact-link > span {
    flex: 0 0 auto;
    width: auto;
  }

  .bio-stage3-page .bio-chart-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bio-stage3-page .bio-chart-products,
  .bio-stage3-page .outlet-product-list-2,
  .bio-stage3-page .outlet-light-grid,
  .bio-stage3-page .overall-list-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bio-stage3-page .bio-chart-products::after {
    display: none;
  }

  .bio-stage3-page .bio-chart-products-single .bio-chart-product {
    width: 100%;
  }

  .bio-stage3-page .bio-chart-products > article + article {
    padding-top: 2em;
    border-top: 1px dotted #8080c0;
  }

  .bio-stage3-page .outlet-product-media {
    flex-wrap: wrap;
  }

  .bio-stage3-page .outlet-product-media > * {
    min-width: 0;
    max-width: 100%;
  }

  .bio-stage3-page .technote-product-link > a {
    max-width: 100%;
  }

  .bio-stage3-page .technote-product-link > a:not(.viewer-trigger) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
  }

  .bio-stage3-page .technote-lead {
    grid-template-columns: 65px minmax(0, 1fr);
  }

  .bio-stage3-page .technote-filter-effect-title {
    white-space: normal;
  }

  .bio-stage3-page .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .bio-stage3-page .reagent-evaluation-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .bio-stage3-page .reagent-etbr-data-grid {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  }

  .bio-stage3-page .reagent-evaluation-table th,
  .bio-stage3-page .reagent-evaluation-table td {
    padding: 0.5em 0.3em;
  }

  .bio-stage3-page #footer3 {
    padding-bottom: 6em;
  }
}

@media (426px <= width <= 768px) {
  .bio-stage3-page .overall-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bio-stage3-page.bio-chart-page .bio-chart-products:not(.bio-chart-products-single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bio-stage3-page.bio-chart-page .bio-chart-products:not(.bio-chart-products-single)::after {
    display: block;
  }

  .bio-stage3-page.bio-chart-page .bio-chart-products > article + article {
    padding-top: 0;
    border-top: 0;
  }

  .bio-stage3-page.bio-chart-page .bio-chart-products-single .bio-chart-product {
    width: calc((100% - 2em) / 2);
  }

  .bio-stage3-page .reagent-etbr-filter-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bio-stage3-page .reagent-etbr-filter-content > section + section {
    padding-top: 0;
    border-top: 0;
    border-left: 1px dotted #9fb4bc;
  }

  .bio-stage3-page .guideline-note {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 1.5em;
  }

  .bio-stage3-page .reagent-overall-link {
    flex-direction: row;
    align-items: center;
  }

  .bio-stage3-page .reagent-overall-link .detail-more-btn {
    flex-shrink: 0;
  }

  .bio-stage3-page .reagent-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bio-stage3-page .table-scroll .reagent-index-table {
    min-width: 320px;
  }
}

/* Include fractional viewport widths displayed as 425px by device emulation. */
@media (width < 426px) {
  .bio-stage3-page .technote-media-text,
  .bio-stage3-page .technote-media-text.is-image-left,
  .bio-stage3-page .technote-trouble-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .bio-stage3-page .overall-list-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bio-stage3-page .overall-list-table th:first-child,
  .bio-stage3-page .overall-list-table tbody td:first-child,
  .bio-stage3-page .overall-list-table .name-prefix {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .table-scroll .reagent-index-table {
    min-width: 0;
    width: 100%;
  }

  .bio-stage3-page .reagent-index-table col:first-child {
    width: 28%;
  }

  .bio-stage3-page .reagent-index-table col:nth-child(2),
  .bio-stage3-page .reagent-index-table col:nth-child(3),
  .bio-stage3-page .reagent-index-table col:nth-child(4) {
    width: 16%;
  }


  .bio-stage3-page .table-scroll .reagent-index-table th,
  .bio-stage3-page .table-scroll .reagent-index-table td {
    padding-right: 0.25em;
    padding-left: 0.25em;
  }

  .bio-stage3-page .table-scroll .reagent-index-table tbody td:last-child {
    padding: 0;
  }

  .bio-stage3-page .reagent-index-table tbody td:first-child {
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .reagent-etbr-data-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bio-stage3-page .reagent-etbr-data-grid .reagent-evaluation-table {
    margin-top: 0;
  }

  .bio-stage3-page .outlet-product-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .bio-stage3-page .outlet-camera-price {
    width: 100%;
  }

  .bio-stage3-page .technote-lead,
  .bio-stage3-page .technote-factor-block {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .bio-stage3-page .technote-lead > .speech-bubble {
    order: -1;
  }

  .bio-stage3-page .technote-lead .speech-bubble-left::before,
  .bio-stage3-page .technote-lead .speech-bubble-left::after {
    top: auto;
    left: 20px;
    transform: none;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 0;
  }

  .bio-stage3-page .technote-lead .speech-bubble-left::before {
    bottom: -14px;
    border-top: 14px solid #78a6c8;
  }

  .bio-stage3-page .technote-lead .speech-bubble-left::after {
    bottom: -12px;
    border-top: 14px solid #f7fbff;
  }

  .bio-stage3-page .overall-list-guide {
    flex-direction: column;
    align-items: stretch;
    gap: 1em;
  }

  .bio-stage3-page .overall-list-guide .detail-more-btn {
    align-self: center;
  }

  .bio-stage3-page .mobile-menu-search {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .bio-stage3-page .mobile-menu-search input[type="text"] {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 425px) {
  .bio-stage3-page h1.page-title {
    font-size: 20px;
  }

  .bio-stage3-page .outlet-product-media-s1 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Bio-Pyramid のオプション製品ページ：画像と説明は 425px 以下で縦並び */
  .bio-stage3-page .mf-sc55d-summary,
  .bio-stage3-page .mfc65-summary,
  .bio-stage3-page .target-product-summary,
  .bio-stage3-page .lbx-product-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  /* LBX-TR の価格表・仕様表：横スクロールを出さずに画面幅へ収める */
  .bio-stage3-page .table-scroll .lbx-price-table,
  .bio-stage3-page .table-scroll .lbx-spec-table {
    min-width: 0;
    width: 100%;
    font-size: 80%;
  }

  /* 列幅は中身に合わせる（金額の列を優先して確保し、製品名・製品番号を折り返す） */
  .bio-stage3-page .table-scroll .lbx-price-table {
    table-layout: auto;
  }

  .bio-stage3-page .table-scroll .lbx-price-table th,
  .bio-stage3-page .table-scroll .lbx-price-table td,
  .bio-stage3-page .table-scroll .lbx-spec-table th,
  .bio-stage3-page .table-scroll .lbx-spec-table td {
    padding: 0.4em 0.3em;
    white-space: normal;
  }

  /* 製品名・製品番号と仕様は語の途中でも折り返してよい。金額は折り返さない */
  .bio-stage3-page .lbx-price-table td:nth-child(-n + 2),
  .bio-stage3-page .lbx-spec-table td {
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .lbx-price-table th:nth-child(1),
  .bio-stage3-page .lbx-price-table td:nth-child(1) {
    width: 36%;
  }

  .bio-stage3-page .lbx-price-table th:nth-child(2),
  .bio-stage3-page .lbx-price-table td:nth-child(2) {
    width: 22%;
  }

  .bio-stage3-page .lbx-price-table th:nth-child(n + 3),
  .bio-stage3-page .lbx-price-table td:nth-child(n + 3) {
    width: 21%;
  }

  .bio-stage3-page .lbx-spec-table tbody th {
    width: 28%;
  }

  /* MFC65-52 の価格表・効果特性表・基本仕様表：横スクロールを出さずに画面幅へ収める */
  .bio-stage3-page .table-scroll .mfc65-price-table,
  .bio-stage3-page .table-scroll .mfc65-spec-table,
  .bio-stage3-page .table-scroll .mfc65-basic-spec-table {
    min-width: 0;
    width: 100%;
    font-size: 80%;
  }

  .bio-stage3-page .table-scroll .mfc65-price-table {
    table-layout: auto;
  }

  .bio-stage3-page .table-scroll .mfc65-price-table th,
  .bio-stage3-page .table-scroll .mfc65-price-table td,
  .bio-stage3-page .table-scroll .mfc65-basic-spec-table th,
  .bio-stage3-page .table-scroll .mfc65-basic-spec-table td {
    padding: 0.4em 0.3em;
    white-space: normal;
  }

  /* 製品名は語の途中でも折り返してよい。製品番号と金額は折り返さない */
  .bio-stage3-page .mfc65-price-table td:nth-child(1) {
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .mfc65-price-table td:nth-child(2) {
    white-space: nowrap;
  }

  .bio-stage3-page .mfc65-basic-spec-table tbody th {
    width: 32%;
  }

  /* 効果・特性：画像と説明を横並びにせず、画像の下に説明を置く */
  .bio-stage3-page .mfc65-spec-table tbody tr,
  .bio-stage3-page .mfc65-spec-table tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .bio-stage3-page .mfc65-spec-table tbody td {
    padding: 0.5em;
    white-space: normal;
  }

  .bio-stage3-page .mfc65-spec-table tbody td + td {
    border-top: 0;
  }

  .bio-stage3-page .mfc65-spec-table .content-media img {
    max-width: 100%;
    height: auto;
  }

  /* MF-SC55D・Target_Luler の表：MFC65-52 と同じく横スクロールを出さずに画面幅へ収める */
  .bio-stage3-page .table-scroll .mf-sc55d-price-table,
  .bio-stage3-page .table-scroll .mf-sc55d-spec-table,
  .bio-stage3-page .table-scroll .mf-sc55d-basic-spec-table,
  .bio-stage3-page .table-scroll .target-price-table,
  .bio-stage3-page .table-scroll .target-spec-table {
    min-width: 0;
    width: 100%;
    font-size: 80%;
  }

  .bio-stage3-page .table-scroll .mf-sc55d-price-table,
  .bio-stage3-page .table-scroll .target-price-table {
    table-layout: auto;
  }

  .bio-stage3-page .table-scroll .mf-sc55d-price-table th,
  .bio-stage3-page .table-scroll .mf-sc55d-price-table td,
  .bio-stage3-page .table-scroll .mf-sc55d-basic-spec-table th,
  .bio-stage3-page .table-scroll .mf-sc55d-basic-spec-table td,
  .bio-stage3-page .table-scroll .target-price-table th,
  .bio-stage3-page .table-scroll .target-price-table td,
  .bio-stage3-page .table-scroll .target-spec-table th,
  .bio-stage3-page .table-scroll .target-spec-table td {
    width: auto;
    padding: 0.4em 0.3em;
    white-space: normal;
  }

  /* 製品名は語の途中でも折り返してよい。製品番号と金額は折り返さない */
  .bio-stage3-page .mf-sc55d-price-table td:nth-child(1),
  .bio-stage3-page .target-price-table td:nth-child(1) {
    overflow-wrap: anywhere;
  }

  .bio-stage3-page .mf-sc55d-price-table td:nth-child(2),
  .bio-stage3-page .target-price-table td:nth-child(2) {
    white-space: nowrap;
  }

  .bio-stage3-page .mf-sc55d-basic-spec-table tbody th,
  .bio-stage3-page .target-spec-table tbody th {
    width: 32%;
  }

  /* MF-SC55D の分光特性・効果：画像と説明を横並びにせず、画像の下に説明を置く */
  .bio-stage3-page .mf-sc55d-spec-table tbody tr,
  .bio-stage3-page .mf-sc55d-spec-table tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .bio-stage3-page .mf-sc55d-spec-table tbody td {
    padding: 0.5em;
    white-space: normal;
  }

  .bio-stage3-page .mf-sc55d-spec-table tbody td + td {
    border-top: 0;
  }

  .bio-stage3-page .mf-sc55d-spec-table img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 320px) {
  .bio-stage3-page.bio-outlet-page .outlet-price-list > div {
    padding-right: 1.5em;
    padding-left: 1.5em;
  }
}

/* System_Adapter chart scrolling: selected change, 2026-10-30. */
.system-flow-scroll {

  max-width: 100%;
  min-width: 0;

}
@media (max-width: 425px) {
.system-flow-scroll {

    overflow-x: auto;
  
}
.system-flow-scroll > .system-flow {

    min-width: 720px;
  
}
}