@charset "UTF-8";

@media (426px <= width <= 1024px) {
  .bottom-info-row.bottom-info-inline {
    display: flex;
    flex-direction: row;
    gap: 1.5em;
  }

  .bottom-info-inline > .bottom-info-main {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 400px;
  }

  .bottom-info-inline .deferred-payment-note {
    width: 100%;
    min-width: 0;
  }

  .bottom-info-inline > .bottom-info-contact {
    flex: 0 0 auto;
    width: auto;
  }

  .bottom-info-inline .bottom-info-contact-link {
    gap: 1em;
  }

  .bottom-info-inline .bottom-info-btn,
  .bottom-info-inline .bottom-info-tel {
    width: auto;
    flex: 0 0 auto;
  }
}

/* Shared mobile navigation appearance; tree structure and behavior stay unchanged. */
@media (max-width: 768px) {
  #mobile-menu.is-open {
    background: #c8c8fe;
    border-color: #aaaad5;
    box-shadow: 0 6px 16px rgb(26 59 90 / 14%);
    color: #30305c;
  }

  #mobile-menu .mobile-menu-search {
    background: #d0d0fb;
    border-bottom: 1px solid #aaaad5;
  }

  #mobile-menu .mobile-menu-search input[type="text"] {
    border-color: #9e9ece;
    background: #fff;
    color: #30305c;
  }

  #mobile-menu .mobile-menu-search input[type="submit"] {
    border-color: #5555ab;
    background: #5555ab;
    color: #fff;
  }

  #mobile-menu a,
  #mobile-menu .mobile-category summary {
    background: #c8c8fe;
    color: #30305c;
    border-bottom: 1px solid #aaaad5;
    text-shadow: none;
    line-height: 1.6;
  }

  #mobile-menu .mobile-category details {
    border-bottom: 0;
  }

  #mobile-menu .mobile-category details[open] > summary {
    background: #dce4f4;
    color: #243b60;
  }

  #mobile-menu .mobile-product-menu > details > summary {
    background: #c8c8fe;
    color: #30305c;
  }

  #mobile-menu .mobile-menu-categories > .mobile-category > details > summary {
    background: #e7eafa;
    color: #243b60;
  }

  #mobile-menu .mobile-menu-categories > .mobile-category > details[open] > summary {
    background: #dce4f4;
  }

  #mobile-menu .mobile-category-sub > li > details > summary {
    background: #f0f1f4;
    color: #394451;
    padding: 0.65em 0.75em;
  }

  #mobile-menu .mobile-category-sub > li > details[open] > summary {
    background: #e2e6ec;
    color: #243b60;
  }

  #mobile-menu .mobile-category-sub .mobile-category-sub {
    margin-left: 1em;
  }

  #mobile-menu .mobile-product-menu > details > summary {
    border-left: 0;
  }

  #mobile-menu .mobile-category-main > li:first-child > a {
    background: #edf0f8;
    border-bottom-color: #aaaad5;
    color: #30305c;
  }

  #mobile-menu .mobile-category-main > li:not(:first-child) > a {
    background: #f3f4f7;
  }

  #mobile-menu .mobile-category-sub a {
    background: #fff;
    color: #303744;
    border-bottom-color: #d8dde5;
  }

  #mobile-menu .mobile-product-menu > details > ul > .mobile-category {
    margin-top: 0;
    border-top: 0;
  }

  #mobile-menu .mobile-category-main > li::before,
  #mobile-menu .mobile-category-main > li > a::before,
  #mobile-menu .mobile-category-sub > li::before {
    content: none;
  }

  #mobile-menu a:hover,
  #mobile-menu a:focus-visible,
  #mobile-menu .mobile-category-main a:hover,
  #mobile-menu .mobile-category-main a:focus-visible {
    background: #e9eff8;
    color: #174575;
    text-shadow: none;
  }

  #mobile-menu a[aria-current="page"],
  #mobile-menu a.is-current-section,
  #mobile-menu .mobile-category-main a[aria-current="page"],
  #mobile-menu .mobile-category-main a.is-current-section {
    background: #dceaf8;
    color: #123e69;
    font-weight: bold;
    box-shadow: inset 3px 0 #245e99;
  }

  #mobile-menu .mobile-menu-language a {
    color: #30305c;
  }

  #mobile-menu .mobile-menu-banners a {
    background: transparent;
  }
}

@media (max-width: 768px) {
  .mobile-menu a[aria-current="page"],
  .mobile-menu .mobile-category details[open] > ul a[aria-current="page"],
  .mobile-menu .mobile-category details[open] > ul a.is-current-section {
    background: #c9ddec;
    color: #123e69;
    font-weight: bold;
    box-shadow: inset 3px 0 #174fa6;
    text-shadow: none;
  }

  .mobile-menu .mobile-category details[open] > summary {
    background-color: #5555ad;
  }

  .mobile-menu .mobile-category details[open] > ul a {
    background: #e4e4f3;
    color: #33336b;
    text-shadow: none;
  }

  .mobile-menu .mobile-category details[open] .mobile-category-sub a {
    background: #f1f1f8;
  }

  .mobile-menu .mobile-category details[open] > ul a:hover,
  .mobile-menu .mobile-category details[open] > ul a:focus-visible {
    background: #d4d4ea;
    color: #ad4500;
  }

  .mobile-product-menu > details > ul > .mobile-category > details > summary {
    padding-left: 1.5em;
  }

  .mobile-product-menu .mobile-category-main > li > a {
    padding-left: 2em;
  }

  .mobile-product-menu .mobile-category-main > li:not(:first-child) > a {
    padding-left: 3em;
  }

  .mobile-product-menu .mobile-category-sub a {
    padding-left: 4em;
  }

  .mobile-product-menu > details > .mobile-menu-categories > .mobile-category {
    margin-top: 0.35em;
    border-top: 1px solid rgb(255 255 255 / 35%);
  }

  .mobile-product-menu .mobile-category-main {
    margin: 0 0.75em 0.75em 1.5em;
  }

  .mobile-product-menu .mobile-category-main > li:first-child > a {
    padding: 0.7em 0.75em;
    border-bottom: 1px solid #c6c6df;
  }

  .mobile-product-menu .mobile-category-main > li:not(:first-child) {
    position: relative;
    margin-left: 1em;
  }

  .mobile-product-menu .mobile-category-main > li:not(:first-child)::before {
    position: absolute;
    top: 1.25em;
    left: 0;
    width: 0.75em;
    border-top: 1px solid #b5b5d2;
    content: "";
    pointer-events: none;
  }

  .mobile-product-menu .mobile-category-main > li:not(:first-child) > a {
    position: relative;
    padding: 0.7em 0.75em 0.7em 1.25em;
    font-weight: normal;
  }

  .mobile-product-menu .mobile-category-main > li:not(:first-child) > a::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 1px solid #b5b5d2;
    content: "";
    pointer-events: none;
  }

  .mobile-product-menu .mobile-category-sub {
    margin-left: 1.25em;
  }

  .mobile-product-menu .mobile-category-sub > li {
    position: relative;
  }

  .mobile-product-menu .mobile-category-sub > li::before {
    position: absolute;
    top: 1.25em;
    left: 0;
    width: 0.65em;
    border-top: 1px solid #b5b5d2;
    content: "";
    pointer-events: none;
  }

  .mobile-product-menu .mobile-category-sub a {
    padding: 0.65em 0.75em 0.65em 1em;
    font-weight: normal;
  }
}

/*
 * 第3段階で有効化するレスポンシブ専用CSS。
 * 第1・第2段階ではHTMLから読み込まない。
 */
@media (max-width: 1024px) {

      html,
      body {
        min-width: 0;
      }

      #wrapper,
      #header,
      #contentsArea,
      #footer3 {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
      }

      #contentsArea {
        padding-right: 1em;
        padding-left: 1em;
      }

      #product {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
      }

      #product img,
      #footer3 img {
        max-width: 100%;
        height: auto;
      }

      #pgroup>ul:not(.ptrack) {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: 100%;
        margin: 0;
        padding: 0;
      }

      #pgroup>ul:not(.ptrack) li,
      #pgroup>ul:not(.ptrack) a {
        display: block;
        min-width: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        line-height: 0;
      }

      #pgroup>ul:not(.ptrack) img {
        display: block;
        width: 100%;
        height: auto;
      }

      #pgroup>ul.pmenu .pmenu-link {
        display: flex;
        width: 100%;
        min-height: 42px;
        padding: 0.35em 0.5em;
        line-height: 1.25;
      }

      #pgroup>ul.pmenu .pmenu-link.is-current,
      #pgroup>ul.pmenu .pmenu-link[aria-current="page"] {
        display: grid;
        padding: 0;
      }

      #pgroup>ul.pmenu .pmenu-visual img {
        width: auto;
        height: auto;
        max-height: 41px;
        max-width: none;
      }

      .main-visual-bleed {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
      }

      .bottom-info-row {
        display: grid;
        grid-template-columns: 100%;
        justify-content: center;
        align-items: center;
        gap: 0.75em;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
      }

      .bottom-info-main {
        width: 100%;
        min-width: 0;
      }

      .deferred-payment-note {
        width: 100%;
        max-width: none;
      }

      .bottom-info-gap {
        display: none;
      }

      .bottom-info-btn,
      .bottom-info-tel {
        width: auto;
      }

      .bottom-info-contact {
        justify-content: center;
        width: 100%;
      }
    }

@media (max-width: 768px) {
      #header {
        position: relative;
      }

      #header>p {
        box-sizing: border-box;
        margin: 0;
        padding: 0.75em 4.75em 0.75em 0.75em;
      }

      #header>p img {
        width: min(100%, 343px);
        height: auto;
      }

      h1.page-title {
        font-size: 1.65em;
      }

      .page-title-main,
      h1.page-title.page-title-stacked .page-title-main {
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
        text-align: center;
      }

      .sec-header-title h2 {
        font-size: 115%;
        line-height: 1.35;
      }

      #header>.header-nav,
      #pgroup>ul:not(.ptrack),
      #contentsArea>aside {
        display: none;
      }

      #floating_menu .floating-container {
        display: none;
      }

      #floating_menu .pagetop {
        right: 1em;
        bottom: calc(1em + env(safe-area-inset-bottom));
        left: auto;
      }

      #floating_menu .pagetop a {
        padding: 0.8em;
        border-radius: 50%;
        font-size: 90%;
      }

      .mobile-action-toggle {
        display: inline-flex;
        position: fixed;
        right: auto;
        left: 1em;
        bottom: calc(1em + env(safe-area-inset-bottom));
        z-index: 9999;
        align-items: center;
        justify-content: center;
        min-height: 3.25em;
        padding: 0.7em 1em;
        border: 1px solid #184f7a;
        border-radius: 4px;
        background: #176aa5;
        color: #fff;
        font: inherit;
        font-family: "HGP創英角ﾎﾟｯﾌﾟ体", "HGP創英角ポップ体", "HGPSoeiKakupoptai", "Mochiy Pop One", "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; /* フロートメニュー用フォント（stage2-floating-menu.css で読み込み） */
        font-weight: normal;
        box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
        cursor: pointer;
      }

      .mobile-action-toggle[aria-expanded="true"] {
        background: #124f7c;
      }

      .mobile-action-panel.is-open {
        display: grid;
        position: fixed;
        right: auto;
        left: 1em;
        bottom: calc(5em + env(safe-area-inset-bottom));
        z-index: 9999;
        grid-template-columns: 1fr;
        gap: 1px;
        box-sizing: border-box;
        width: min(320px, calc(100% - 2em));
        padding: 0.5em;
        border: 1px solid #4747c7;
        border-radius: 4px;
        background: #6868fc;
        box-shadow: 0 3px 10px rgb(0 0 0 / 25%);
      }

      .mobile-action-panel a {
        display: block;
        padding: 0.8em 1em;
        border-bottom: 1px solid rgb(255 255 255 / 35%);
        background: #6868fc;
        color: #fff;
        font-family: "HGP創英角ﾎﾟｯﾌﾟ体", "HGP創英角ポップ体", "HGPSoeiKakupoptai", "Mochiy Pop One", "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; /* フロートメニュー用フォント */
        font-weight: normal;
        text-align: left;
        text-decoration: none;
        text-shadow: 0 1px 2px #000d57;
      }

      .mobile-action-panel a:hover,
      .mobile-action-panel a:focus-visible {
        background: linear-gradient(to bottom, #fff 0%, #d8d8fc 60%, #c8c8fc 100%);
        color: #d95f00;
        text-shadow: none;
      }

      .mobile-menu-toggle {
        display: inline-flex;
        position: absolute;
        top: 0.7em;
        right: 0.75em;
        z-index: 102;
        align-items: center;
        justify-content: center;
        min-width: 3.5em;
        min-height: 3em;
        padding: 0.5em;
        border: 1px solid #477196;
        border-radius: 3px;
        background: #fff;
        color: #234d70;
        font: inherit;
        font-weight: bold;
        cursor: pointer;
      }

      .mobile-menu-toggle[aria-expanded="true"] {
        background: #e9f1f7;
      }

      .mobile-menu.is-open {
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 101;
        box-sizing: border-box;
        max-height: calc(100vh - 5em);
        padding: 0.75em;
        overflow-y: auto;
        border-top: 1px solid #9aa9b5;
        border-bottom: 2px solid #477196;
        background: #6868fc;
        box-shadow: 0 4px 8px rgb(0 0 0 / 18%);
      }

      .mobile-menu ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .mobile-menu li,
      .mobile-menu a {
        display: block;
      }

      .mobile-menu a {
        padding: 0.75em 1em;
        border-bottom: 1px solid rgb(255 255 255 / 35%);
        background: #6868fc;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        text-shadow: 0 1px 2px #000d57;
      }

      .mobile-menu a:hover,
      .mobile-menu a:focus-visible {
        background: linear-gradient(to bottom, #fff 0%, #d8d8fc 60%, #c8c8fc 100%);
        color: #d95f00;
        text-shadow: none;
      }

      .mobile-menu-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5em;
        margin-bottom: 0.75em;
        padding: 0.75em;
        border-bottom: 1px solid rgb(255 255 255 / 45%);
        background: #6868fc;
      }

      .mobile-menu-search input[type="text"] {
        min-width: 0;
        padding: 0.65em;
        border: 1px solid #4747c7;
        border-radius: 3px;
        font: inherit;
      }

      .mobile-menu-search input[type="submit"] {
        padding: 0.65em 0.9em;
        border: 1px solid #fff;
        border-radius: 3px;
        background: #4d4dd0;
        color: #fff;
        font: inherit;
        font-weight: bold;
      }

      .mobile-menu-language {
        margin-bottom: 0.75em !important;
      }

      .mobile-menu-category-title {
        margin: 1em 0 0;
        padding: 0.65em 1em;
        border-top: 1px solid rgb(255 255 255 / 55%);
        border-bottom: 1px solid rgb(255 255 255 / 55%);
        background: #5555e8;
        color: #fff;
        font-size: 100%;
      }

      .mobile-category details {
        border-bottom: 1px solid rgb(255 255 255 / 45%);
      }

      .mobile-category summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.8em 1em;
        background: #6868fc;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        list-style: none;
        text-shadow: 0 1px 2px #000d57;
      }

      .mobile-category summary::-webkit-details-marker {
        display: none;
      }

      .mobile-category summary::after {
        content: "+";
        margin-left: 1em;
        font-size: 120%;
        line-height: 1;
      }

      .mobile-category details[open]>summary::after {
        content: "−";
      }

      .mobile-category-main>li>a {
        padding-left: 1.5em;
      }

      .mobile-category-sub a {
        padding: 0.6em 1em 0.6em 2.5em;
        background: #9494fc;
        font-size: 90%;
      }

      .mobile-menu-banners {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 198px));
        gap: 0.75em;
        justify-content: center;
        margin-top: 1em;
      }

      .mobile-menu-banners a,
      .mobile-menu-banners img {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 0;
        background: transparent;
      }

      #pgroup ul.ptrack {
        display: flex;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
      }

      #contentsArea {
        display: block;
        padding-right: 0.75em;
        padding-left: 0.75em;
      }

      #product {
        width: 100%;
      }

      #product .pcontents {
        box-sizing: border-box;
        padding-right: 1em;
        padding-left: 1em;
      }

      .data-table {
        font-size: 90%;
      }

      #footer3 {
        margin-top: 2em;
      }
    }

@media (max-width: 520px) {
      .mobile-menu-banners {
        grid-template-columns: minmax(0, 198px);
      }

      .vcard-grid.vcard-grid-2 {
        grid-template-columns: 1fr;
      }
    }

@media (max-width: 425px) {
      #pgroup ul.ptrack {
        font-size: 80%;
      }

      h1.page-title {
        font-size: 1.4em;
      }

      .sec-header-title h2 {
        margin-left: 8px;
        font-size: 105%;
      }
    }

@media (max-width: 1024px) {
      .bottom-info-contact {
        justify-content: center;
        width: 100%;
      }
    }

@media (max-width: 768px) {
      .reagent-index-grid {
        grid-template-columns: 1fr;
      }

      .reagent-overall-link,
      .reagent-demo-note {
        align-items: flex-start;
        flex-direction: column;
      }

      .reagent-overall-link {
        align-items: center;
      }

      .reagent-media-description {
        grid-template-columns: minmax(0, 1fr);
      }

      .reagent-source {
        grid-template-columns: minmax(0, 1fr);
      }

      .reagent-source-link {
        text-align: left;
      }

      .reagent-etbr-support {
        grid-template-columns: minmax(0, 1fr);
      }

      .reagent-etbr-layout {
        width: 100%;
      }

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

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

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

/*
 Stage 3: extracted from common.css
 */

@media (max-width: 760px) {
    .eyepiece-view-columns {
        flex-direction: column;
        gap: 20px;
    }

    .eyepiece-view-panel,
    .eyepiece-view-table table {
        width: 100%;
    }
}

/*
 Stage 3: extracted from footer.css
 */

@media screen and (max-width: 769px) {
    #footer3 {
        padding: 0.5em;
    }

    .gmenu4 .pttn {
        display: none;
    }

    .gmenu4 li {
        margin: 0.25em 0.5em;
    }

    .f_text {
        margin: 0.75em 0;
        text-align: center;
    }

    #footer3 .copy {
        text-align: center;
    }
}

/*
 Stage 3: extracted from main.css
 */

@media (max-width: 768px) {
  .spec-figure-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .media-description {
    grid-template-columns: minmax(0, 1fr);
    gap: 1em;
  }

  .media-description-reverse .media-description-media,
  .media-description-reverse .media-description-body {
    order: initial;
  }

  .table-scroll {
    overflow-x: auto;
  }

  .table-scroll .data-table {
    min-width: 620px;
    font-size: 90%;
  }

  .table-scroll .data-table th,
  .table-scroll .data-table td {
    padding: 0.5em;
  }
}

@media (max-width: 425px) {
  .table-scroll .data-table {
    font-size: 85%;
  }
}

@media (max-width: 768px) {
  .media-gallery { grid-template-columns: 1fr; }
}

/*
 Stage 3: extracted from pages.css
 */

@media screen and (max-width: 769px) {
  .bio-index-page .bio-card-grid {
    grid-template-columns: minmax(0, 292px);
    gap: 2em;
  }

  .bio-index-page .bio-card:nth-child(n + 2)::before {
    position: absolute;
    top: -1em;
    left: 10%;
    width: 80%;
    border-top: 1px dotted #9da3b5;
    content: "";
  }

  .bio-index-page .bio-card:nth-child(odd)::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .camera-category-grid {
    grid-template-columns: 1fr;
  }

  .camera-category-column {
    padding: 0;
  }

  .camera-category-column + .camera-category-column::before {
    display: none;
  }

  .camera-category-heading,
  .camera-category-heading h2 {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .camera-category-heading-grid {
    grid-template-columns: 1fr;
    gap: 1em;
  }

  .camera-category-heading-wide {
    grid-column: auto;
  }

  .camera-category-heading-grid .sec-header {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .camera-category-row,
  .camera-category-group-wide .strain-card-grid {
    grid-template-columns: 1fr;
  }

  .camera-category-group-wide::after {
    display: none;
  }

  .camera-category-group .sec-header {
    min-height: 0;
  }
}

@media screen and (max-width: 769px) {
  #wrapper.wrapper {
    padding: 0;
    width: 100%;
  }

  #textarea {
    margin: 1em 0;
  }

  #textbox_info {
    margin: 1em;
  }
}

@media screen and (max-width: 425px) {
  #textbox_info h1 {
    font-size: 140%;
  }

  #textbox_info h2 {
    font-size: 120%;
  }

  #textbox_info h2 img {
    margin-right: 0.5em;
    width: 42px;
  }

  .order_link {
    width: 100%;
    margin: 1em auto;
  }

  .order_link li div:first-child,
  .order_link li div:last-child {
    width: 50%;
  }
}

@media screen and (max-width: 769px) {
  #textbox_menu {
    margin: 2em 1em 4em 1em;
  }
}

@media screen and (max-width: 425px) {
  #textbox_menu {
    flex-direction: column;
  }

  #textbox_menu > div {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .feat-grid .feat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .feat-grid .feat-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .inter-lineup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .inter-lineup-grid {
    grid-template-columns: 1fr;
  }

  .inter-lineup-card-empty {
    display: none;
  }
}

@media (max-width: 760px) {
  .legacy-css-row {
    display: block;
  }

  .legacy-css-cell {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .responsive-media-object {
    height: 66vw;
    max-height: 400px;
  }
}

@media (max-width: 700px) {
  .iphone-price-grid {
    grid-template-columns: 1fr 1fr;
  }

  .iphone-price-break {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .vcard-grid.vcard-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vcard-grid.vcard-grid-4 > .vcard:nth-of-type(2n)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .vcard-grid.vcard-grid-4 {
    grid-template-columns: 1fr;
  }

  .vcard-grid.vcard-grid-4 > .vcard::after {
    display: none;
  }

  .vcard-grid.vcard-grid-4 > .vcard + .vcard {
    margin-top: 2em;
    padding-top: 2em;
  }

  .vcard-grid.vcard-grid-4 > .vcard + .vcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    border-top: 1px dotted #8080c0;
  }
}

@media (max-width: 700px) {
  .iphone-performance-item,
  .iphone-performance-item.has-image {
    display: block;
  }

  .iphone-performance-item img {
    display: block;
    max-width: 100%;
    margin: 0.6em auto 0;
  }
}

@media (max-width: 700px) {
  .iphone-performance-body {
    display: block;
  }

  .iphone-performance-media img {
    margin: 0.6em auto 0;
  }
}

@media (max-width: 700px) {
  .iphone-performance-item.has-image .iphone-performance-body {
    display: block;
  }
}

@media (max-width: 760px) {
  .vertical-card-grid,
  .vcard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vertical-card-grid > .vertical-card::after,
  .vertical-card-grid > .vcard::after,
  .vcard-grid > .vertical-card::after,
  .vcard-grid > .vcard::after {
    display: none;
  }
}

@media (max-width: 520px) {
  .vertical-card-grid,
  .vcard-grid {
    grid-template-columns: 1fr;
  }

  .vertical-card-grid:not(.vcard-grid-4) > .vertical-card + .vertical-card,
  .vertical-card-grid:not(.vcard-grid-4) > .vcard + .vcard,
  .vcard-grid:not(.vcard-grid-4) > .vertical-card + .vertical-card,
  .vcard-grid:not(.vcard-grid-4) > .vcard + .vcard {
    margin-top: 2em;
    padding-top: 2em;
  }

  .vertical-card-grid:not(.vcard-grid-4) > .vertical-card + .vertical-card::before,
  .vertical-card-grid:not(.vcard-grid-4) > .vcard + .vcard::before,
  .vcard-grid:not(.vcard-grid-4) > .vertical-card + .vertical-card::before,
  .vcard-grid:not(.vcard-grid-4) > .vcard + .vcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    border-top: 1px dotted #8080c0;
  }
}

@media (max-width: 760px) {
  .vertical-card-grid.vertical-card-grid-2,
  .vertical-card-grid.vcard-grid-2,
  .vcard-grid.vertical-card-grid-2,
  .vcard-grid.vcard-grid-2 {
    grid-template-columns: 1fr;
  }

  .comparison-price-card {
    padding: 0;
  }

  .comparison-price-card:not(:last-child)::after {
    display: none;
  }

  .comparison-price-card + .comparison-price-card {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px dotted #8080c0;
  }

  .vertical-card-grid.vertical-card-grid-2 > .vertical-card::after,
  .vertical-card-grid.vertical-card-grid-2 > .vcard::after,
  .vertical-card-grid.vcard-grid-2 > .vertical-card::after,
  .vertical-card-grid.vcard-grid-2 > .vcard::after,
  .vcard-grid.vertical-card-grid-2 > .vertical-card::after,
  .vcard-grid.vertical-card-grid-2 > .vcard::after,
  .vcard-grid.vcard-grid-2 > .vertical-card::after,
  .vcard-grid.vcard-grid-2 > .vcard::after {
    display: none;
  }

  .vertical-card-grid.vertical-card-grid-2 > .vertical-card + .vertical-card,
  .vertical-card-grid.vertical-card-grid-2 > .vcard + .vcard,
  .vertical-card-grid.vcard-grid-2 > .vertical-card + .vertical-card,
  .vertical-card-grid.vcard-grid-2 > .vcard + .vcard,
  .vcard-grid.vertical-card-grid-2 > .vertical-card + .vertical-card,
  .vcard-grid.vertical-card-grid-2 > .vcard + .vcard,
  .vcard-grid.vcard-grid-2 > .vertical-card + .vertical-card,
  .vcard-grid.vcard-grid-2 > .vcard + .vcard {
    margin-top: 2em;
    padding-top: 2em;
  }

  .vertical-card-grid.vertical-card-grid-2 > .vertical-card + .vertical-card::before,
  .vertical-card-grid.vertical-card-grid-2 > .vcard + .vcard::before,
  .vertical-card-grid.vcard-grid-2 > .vertical-card + .vertical-card::before,
  .vertical-card-grid.vcard-grid-2 > .vcard + .vcard::before,
  .vcard-grid.vertical-card-grid-2 > .vertical-card + .vertical-card::before,
  .vcard-grid.vertical-card-grid-2 > .vcard + .vcard::before,
  .vcard-grid.vcard-grid-2 > .vertical-card + .vertical-card::before,
  .vcard-grid.vcard-grid-2 > .vcard + .vcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    border-top: 1px dotted #8080c0;
  }
}

@media (max-width: 760px) {
  .epi-card-grid-wide {
    grid-template-columns: 1fr;
  }

  .epi-card-grid-wide .epi-video-card {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .strain-fh-content {
    grid-template-columns: 1fr;
  }
  .strain-fh-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .strain-snr-standard-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .strain-camera-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .strain-feature-samples,
  .strain-feature-light,
  .strain-feature-stand {
    grid-template-columns: 1fr;
  }
  .strain-feature-light .strain-feature-main-image {
    order: -1;
  }
}

@media (max-width: 760px) {
  .strain-overview-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .strain-camera-compare,
  .strain-camera-zoom,
  .strain-camera-movie {
    grid-template-columns: 1fr;
  }
  .strain-camera-movie-image {
    order: -1;
  }
}

@media (max-width: 700px) {
  .snr-feature-row,
  .snr-feature-row-reverse {
    grid-template-columns: 1fr;
  }

  .snr-feature-row-reverse .snr-feature-media {
    order: -1;
  }

  .snr-feature-media,
  .snr-feature-content {
    padding: 0.6em;
  }
}