/*
 * Responsive overrides for the Sano Lab website.
 *
 * This file is loaded after each page's existing styles so the desktop design
 * remains familiar while narrower screens get a fluid, touch-friendly layout.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-wrap: anywhere;
}

img,
video,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

a:focus-visible {
    outline: 3px solid #d06b00;
    outline-offset: 3px;
}

/* Information list dates are monochrome; content links keep existing colors. */
div.main-textarea2 {
    scrollbar-gutter: stable;
}

div.main-textarea2 .information-item {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    padding: 13px 14px;
    border-bottom: 1px solid #d8d8d8;
    background: #fff;
    box-sizing: border-box;
}

div.main-textarea2 .information-item:nth-of-type(odd) {
    background: #f7f7f7;
}

div.main-textarea2 .information-item:last-of-type {
    border-bottom: 0;
}

div.main-textarea2 .information-date {
    display: block;
    color: #444;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1.65;
    white-space: nowrap;
    box-sizing: border-box;
}

#main div.main-textarea2 p.information-body {
    min-width: 0;
    margin: 0;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

@media screen and (min-width: 1241px) {
    #main h4[align="center"] + h2 {
        margin-top: 24px;
    }

    div.main-textarea2 {
        font-size: 100%;
    }
}

@media screen and (max-width: 1240px) {
    body {
        margin: 0;
        min-width: 0;
        font-size: 16px;
        line-height: 1.7;
        text-align: left;
    }

    #container {
        width: 100%;
        max-width: 100%;
        border-right: 0;
        border-left: 0;
        box-sizing: border-box;
    }

    #title {
        width: 100%;
        height: clamp(150px, 24vw, 200px) !important;
        min-height: 150px;
        margin-bottom: 0;
        background-position: center;
        background-size: cover;
        box-sizing: border-box;
    }

    #title p {
        height: auto !important;
        padding: clamp(18px, 4vw, 32px) clamp(18px, 5vw, 42px) 0;
        line-height: 1.25;
        box-sizing: border-box;
    }

    #title font[size="7"] {
        font-size: clamp(1.9rem, 5.5vw, 3rem);
    }

    #title font[size="5"] {
        font-size: clamp(1.05rem, 3.3vw, 1.55rem);
    }

    #navi {
        float: none;
        width: auto;
        padding: 12px clamp(12px, 3vw, 28px) 16px;
        background: #f2f7ee;
        box-sizing: border-box;
    }

    .navi-sub {
        margin: 0 0 8px;
        padding: 6px 10px;
        border-radius: 3px;
    }

    #navi ul {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 0;
        margin: 0 0 10px;
    }

    #navi li {
        min-width: 0;
        margin: 0;
    }

    #navi li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-height: 44px;
        height: auto;
        padding: 4px 7px;
        border: 1px solid #a9b99d;
        border-radius: 3px;
        background: #fff !important;
        line-height: 1.25;
        overflow: visible;
        box-sizing: border-box;
    }

    #navi li a:hover {
        background: #e7f2dd !important;
    }

    .menu-text,
    .menu-text2,
    .menu-text3 {
        display: inline-block;
        width: calc(50% - 6px);
        min-height: 44px;
        margin: 2px 8px 2px 0;
        padding: 8px 10px;
        vertical-align: top;
        box-sizing: border-box;
    }

    .menu-text:nth-of-type(even),
    .menu-text2:nth-of-type(even),
    .menu-text3:nth-of-type(even) {
        margin-right: 0;
    }

    #main {
        float: none;
        width: auto;
        padding: 20px clamp(14px, 3.5vw, 36px) 10px;
        box-sizing: border-box;
    }

    #main h2 {
        font-size: 1rem;
        line-height: 1.45;
        letter-spacing: 0.08em;
        padding: 9px 11px;
    }

    #main h3 {
        font-size: 1rem;
        line-height: 1.6;
        letter-spacing: 0.04em;
        margin-right: 0;
        margin-left: 0;
    }

    #main h4 {
        margin: 8px 0;
        line-height: 1.55;
    }

    #main p {
        line-height: 1.7;
    }

    div.main-text,
    div.main-waku1,
    div.main-waku2,
    div.main-waku3,
    div.main-waku4,
    div.main-table-text {
        margin-right: 0;
        margin-left: 0;
        font-size: 1rem;
        line-height: 1.7;
        box-sizing: border-box;
    }

    div.main-textarea,
    div.main-textarea2 {
        width: auto;
        height: auto;
        max-height: 26rem;
        margin-left: 0;
        padding: 8px 10px;
        border: 1px solid #d6ddd1;
        border-radius: 3px;
        background: #fff;
        font-size: 1rem;
        line-height: 1.65;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    div.main-table,
    div.main-table3,
    div.main-table4,
    div.main-table5,
    div.main-table6,
    div.make-table,
    div.image-table,
    div.banner-list,
    div.menu1,
    div.menu2,
    div.menu3,
    div.sitemap,
    div.page {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #main table {
        max-width: 100%;
    }

    #main th,
    #main td {
        overflow-wrap: normal;
        word-break: normal;
    }

    img.img-float-left,
    img.img-float-right {
        max-width: min(45%, 320px);
    }

    .cards {
        gap: 20px 16px;
    }

    .cards .card {
        width: calc(50% - 8px);
    }

    .slider,
    .slider img {
        width: min(88vw, 860px);
    }

    #footer,
    #copyright {
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

    /*
     * Older English and research detail pages use top-level layout tables
     * instead of #container. Keep those tables inside the viewport first.
     */
    body > table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto;
    }

    body > table td,
    body > table th {
        max-width: 100%;
        height: auto !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

@media screen and (max-width: 680px) {
    #title {
        height: 156px !important;
        min-height: 156px;
        background-position: 57% center;
    }

    #title p {
        padding: 18px 16px 0;
    }

    #title p a {
        display: block;
    }

    #title font[size="7"] {
        display: block;
        font-size: clamp(1.8rem, 9vw, 2.5rem);
    }

    #title font[size="5"] {
        font-size: clamp(1rem, 4.7vw, 1.3rem);
    }

    #navi ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-text,
    .menu-text2,
    .menu-text3 {
        width: 100%;
        margin-right: 0;
    }

    #main {
        padding: 16px 12px 8px;
    }

    #main h2 {
        letter-spacing: 0.04em;
    }

    #main h2 font {
        display: inline;
    }

    #main h3[align="center"] {
        text-align: left;
    }

    div.main-textarea2 .information-item {
        display: block;
        padding: 12px 10px 14px;
    }

    div.main-textarea2 .information-date {
        margin-bottom: 5px;
        color: #3f3f3f;
        line-height: 1.45;
    }

    div.main-list ul {
        margin-left: 1.5rem;
    }

    div.main-list ol {
        margin-left: 1.25rem;
    }

    div.main-table-text,
    div.make-table,
    div.font {
        padding: 10px;
    }

    img.img-float-left,
    img.img-float-right {
        float: none;
        display: block;
        max-width: 100%;
        margin: 10px auto 16px;
    }

    .cards .card {
        width: 100%;
    }

    .slider,
    .slider img {
        width: 88vw;
    }

    /*
     * Stack cells only on the legacy pages whose tables are direct children of
     * body. Data tables in the current #main layout remain horizontally
     * scrollable so their row and column relationships are preserved.
     */
    body > table,
    body > table > tbody,
    body > table > tbody > tr {
        display: block;
        width: 100% !important;
    }

    body > table > tbody > tr > td,
    body > table > tbody > tr > th {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        padding: 7px;
        text-align: left;
    }
}

@media (hover: none) {
    .cards a:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}