* {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

header,
footer {
    display: none;
}

#contents {
    padding-top: 0 !important;
    padding-bottom: 0;
}

@media print, screen and (min-width: 768px) {
    #contents,
    #contents.synactif {
        padding-top: 0 !important;
    }
}

.science4 {
    --science4-gold: #c4a85e;
    --science4-text: #1d1d1d;
    --science4-muted: #747474;
    --science4-gray: #f6f7f9;
    color: var(--science4-text);
}

.science4 *,
.science4 *::before,
.science4 *::after {
    box-sizing: border-box;
}

.science4 img {
    display: block;
    height: auto;
    max-width: 100%;
}

.science4 h1,
.science4 h2,
.science4 h3,
.science4 p {
    margin: 0;
}

:where(.science4 figure) {
    margin: 0;
}

.loading {
    background-color: #fff;
    height: 100vh;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    transition: all 1s;
    visibility: visible;
    width: 100vw;
    z-index: 9999;
}

.loading.is-active {
    opacity: 1;
    visibility: hidden;
}

.loading.is-active > .loading-animation {
    display: none;
}

.loading-animation {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    opacity: 0;
    position: relative;
    transition: all 1s;
    visibility: hidden;
    width: 100vw;
    z-index: 10;
}

.loading-animation.is-active {
    opacity: 1;
    visibility: visible;
}

.loading-animation .bg-img {
    height: 100vh;
    max-width: none;
    object-fit: cover;
    position: absolute;
    width: 100vw;
    z-index: 50;
}

.logo_title {
    height: 590px;
    padding: 30px 0;
    position: relative;
    width: 500px;
    z-index: 999;
}

.logo-loading {
    left: 50%;
    position: absolute;
    top: 60%;
    transform: translate(-50%, -230%);
}

.logo-loading .header_logo {
    height: auto;
    width: 200px;
}

.logo_textbox {
    height: 70%;
    margin: 200px auto 0;
    overflow: auto;
    padding: 0 50px;
    position: relative;
    text-align: center;
    width: 85%;
}

.logo_textbox::-webkit-scrollbar {
    background: #fff;
    width: 5px;
}

.logo_textbox::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.logo_txt_title {
    font-size: 2rem;
}

.btn_flex {
    display: flex;
}

.logo_btn_link {
    background: #c6ac62;
    color: #fff;
    cursor: pointer;
    font-size: unset;
    font-weight: normal;
    margin: 20px auto !important;
    padding: 10px;
    width: 210px;
}

.logo_txt {
    font-size: 1.4rem;
}

.top_contents_area {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.top_inner {
    position: relative;
}

.science4 a {
    color: inherit;
}

.science4 em {
    color: var(--science4-gold);
    font-style: normal;
    font-weight: 500;
}

.science4-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.science4-container {
    margin-inline: auto;
    max-width: 1200px;
    padding-inline: 32px;
    width: 100%;
}

.science4-container--narrow {
    max-width: 900px;
}

.science4-container--text {
    max-width: 1000px;
}

.science4-center {
    text-align: center;
}

.science4-sp-only {
    display: none;
}

.science4-hero picture,
.science4-hero img {
    width: 100%;
}

.science4-intro {
    background: #fff;
    padding: 112px 0 0;
}

.science4 .science4-intro__title.fontL {
    font-size: 24px !important;
    margin: 0;
}

.science4-intro__title + p {
    margin-top: 32px;
}

.science4-intro__visual {
    margin: 64px auto 0;
    max-width: 864px;
    padding-inline: 32px;
}

.science4-intro__visual img {
    margin-inline: auto;
}

.science4-anchor-nav {
    margin-bottom: 0 !important;
    margin-top: 96px !important;
}

.science4-anchor-nav .cmd-tab_list > li {
    pointer-events: auto;
    width: 48%;
}

.science4-anchor-nav .cmd-tab_list > li > a {
    padding-right: 24px;
    position: relative;
    width: 100%;
}

.science4-anchor-nav .cmd-tab_list > li > a > span {
    text-align: center;
    width: 100%;
}

.science4-anchor-nav .cmd-tab_list > li > a::after {
    bottom: 0;
    width: 100%;
}

.science4-anchor-nav .cmd-tab_list > li > a::before {
    border-bottom: 1px solid #505050;
    border-right: 1px solid #505050;
    bottom: 50%;
    content: "";
    display: block;
    height: 10px;
    position: absolute;
    right: 4px;
    transform: rotate(45deg);
    width: 10px;
}

.science4-chapter {
    scroll-margin-top: 32px;
}

.science4-chapter--one {
    background: #fff;
    padding: 96px 0 120px;
}

.science4-chapter--two {
    background: var(--science4-gray);
    padding: 112px 0 120px;
}

.science4-chapter__header {
    margin-bottom: 64px;
}

.science4-chapter__label {
    color: var(--science4-gold);
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.science4-chapter__header h2 {
    font-size: 26px;
    font-weight: 300;
    line-height: 1.8;
    margin-top: 28px;
}

.science4-feature-grid {
    display: grid;
    gap: 76px 48px;
    grid-template-areas:
        "visual challenge"
        "regenerative process";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

.science4-feature-grid__visual {
    align-self: start;
    grid-area: visual;
}

.science4-feature-grid__challenge {
    align-self: center;
    grid-area: challenge;
}

.science4-feature-grid--challenge-centered .science4-feature-grid__challenge {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 900px;
    text-align: center;
    width: 100%;
}

.science4-feature-grid__process {
    align-self: center;
    grid-area: process;
}

.science4-feature-grid__regenerative {
    align-self: start;
    grid-area: regenerative;
}

.science4-copy-block h3 + p {
    margin-top: 30px;
}

.science4-copy-block p + p {
    margin-top: 26px;
}

.science4-feature-grid__regenerative h3 + p {
    margin-top: 24px;
}

.science4-feature-grid__regenerative p + .science4-note {
    margin-top: 8px;
}

.science4-copy-block--wide {
    margin-top: 64px;
}

.science4-chapter--one > .science4-copy-block--wide h3 + p {
    margin-top: 24px;
}

.science4-note {
    color: var(--science4-muted);
    font-size: 13px;
    line-height: 1.7;
}

.science4-data-figure figcaption,
.science4-gold-heading {
    background: var(--science4-gold);
    color: #171717;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.45;
    padding: 6px 16px;
    text-align: center;
}

.science4-data-figure img {
    margin-top: 24px;
    width: 100%;
}

.science4-research-panel {
    margin-bottom: 32px;
    margin-top: 72px;
    max-width: 1060px;
}

.science4-result__micrographs {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 190px;
    margin-top: 32px;
}

.science4-result__micrographs figure {
    text-align: center;
}

.science4-result__micrographs figcaption {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.science4-result__micrographs p {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 12px;
}

.science4-result__legend {
    justify-self: start;
}

.science4-result__legend--cells {
    margin-top: 52px;
    width: 180px;
}

.science4-result__charts {
    border-top: 1px solid rgba(196, 168, 94, 0.8);
    display: grid;
    gap: 38px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 180px;
    margin-top: 30px;
    padding-top: 34px;
}

.science4-chart {
    min-width: 0;
    text-align: center;
}

.science4-chart figcaption {
    font-size: 15px;
    line-height: 1.55;
    min-height: 48px;
}

.science4-chart__canvas,
.science4-final-chart {
    margin: 18px 0 0;
    padding: 0;
    position: relative;
}

.science4-chart__canvas img {
    margin-inline: auto;
    width: 100%;
}

.science4-chart__notes {
    display: grid;
    font-size: 12px;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    line-height: 1.5;
    margin-top: 10px;
}

.science4-chart__notes {
    color: #555;
    margin-top: 18px;
}

.science4-result__legend--chart {
    margin-top: 74px;
    width: 154px;
}

.science4-chapter--two .science4-copy-block--wide:first-of-type {
    margin-top: 0;
}

.science4-research-panel--chapter2 {
    margin-top: 64px;
}

.science4-vessel-diagram {
    margin: 32px auto 0;
    max-width: 100%;
    position: relative;
}

.science4-vessel-diagram figcaption {
    font-size: 15px;
    margin-bottom: 22px;
    text-align: center;
}

.science4-vessel-diagram__content {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 190px;
}

.science4-vessel-diagram__main {
    grid-column: 1 / 3;
    width: 100%;
}

.science4-vessel-diagram__legend {
    grid-column: 3;
    justify-self: start;
    width: 190px;
}

.science4-result__charts--chapter2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.science4-research-panel--last {
    max-width: 760px;
}

.science4-final-chart {
    margin: 32px auto 0;
    max-width: 510px;
    padding-inline: 0;
}

.science4-final-chart > img {
    margin-inline: auto;
    width: 100%;
}

.science4-lab {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

@media print, screen and (min-width: 993px) {
    .science4-lab .cmd-visual_txt .cmd-visual_card {
        max-width: 510px;
    }
}

.science4-footer-nav {
    background: #050505;
    color: #fff;
    padding: 76px 40px 96px;
    text-align: center;
}

.science4-footer-nav h2 {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.7;
}

.science4-footer-nav__links {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 46px auto 0;
    max-width: 1400px;
}

.science4-footer-nav__links a,
.science4-footer-nav__links span,
.science4-footer-nav__top {
    align-items: center;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
    display: flex;
    font-size: 14px !important;
    justify-content: center;
    line-height: 1.5 !important;
    min-height: 58px !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
}

.science4-footer-nav a::before,
.science4-footer-nav a::after {
    content: none !important;
    display: none !important;
}

.science4-footer-nav a:hover,
.science4-footer-nav a:focus {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
    color: #fff;
    font-size: 14px !important;
    opacity: 1 !important;
    text-decoration: none !important;
    transform: none !important;
}

.science4-footer-nav__links span {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.42);
}

.science4-footer-nav__top {
    margin: 38px auto 0;
    max-width: 220px;
}

@media (hover: hover) {
    .science4-footer-nav a {
        transition: background-color 0.25s ease;
    }

    .science4-footer-nav a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }
}

@media only screen and (max-width: 992px) {
    .loading {
        overflow: auto;
    }

    .loading-animation {
        flex-wrap: wrap;
        height: auto;
        min-height: 100vh;
        padding: 15px;
    }

    .loading-animation .bg-img {
        display: block;
        inset: 0;
        position: fixed;
    }

    .logo_title {
        height: fit-content;
        width: 100%;
    }

    .logo-loading {
        margin: 0 auto;
        position: static;
        transform: none;
        width: fit-content;
    }

    .logo_textbox {
        height: 100%;
        margin: 40px auto 0;
        padding: 0;
    }

    .btn_flex {
        display: block;
    }

}

@media only screen and (max-width: 755px) {

    .science4-container {
        padding-inline: 16px;
    }

    .science4-pc-only {
        display: none;
    }

    .science4-sp-only {
        display: initial;
    }

    .science4-intro {
        padding: 64px 0 0;
    }

    .science4 .science4-intro__title.fontL {
        font-size: 20px !important;
    }

    .science4-intro__title + p {
        margin-top: 32px;
    }

    .science4-intro__visual {
        padding-inline: 16px;
    }

    .science4-anchor-nav {
        margin-top: 64px !important;
    }

    .science4-anchor-nav .cmd-tab_list {
        display: block;
        font-size: 12px;
    }

    .science4-anchor-nav .cmd-tab_btn {
        font-size: 12px !important;
    }

    .science4-anchor-nav .cmd-tab_list > li {
        margin-inline: auto;
        padding-top: 20px;
        width: 100%;
    }

    .science4-anchor-nav .cmd-tab_list > li:first-child {
        padding-top: 0;
    }

    .science4-chapter--one {
        padding: 64px 0;
    }

    .science4-chapter--two {
        padding: 64px 0 84px;
    }

    .science4-chapter__header {
        margin-bottom: 48px;
    }

    .science4-chapter__label {
        font-size: 24px;
    }

    .science4-chapter__header h2 {
        font-size: 21px;
        line-height: 1.8;
        margin-top: 22px;
    }

    .science4-feature-grid {
        gap: 0;
        grid-template-areas:
            "visual"
            "challenge"
            "process"
            "regenerative";
        grid-template-columns: 1fr;
        margin-top: 0;
    }

    .science4-feature-grid__challenge {
        margin-top: 24px;
    }

    .science4-feature-grid__challenge h3 + p {
        margin-top: 16px;
    }

    .science4-feature-grid__process,
    .science4-feature-grid__regenerative {
        margin-top: 48px;
    }

    .science4-copy-block h3 + p {
        margin-top: 24px;
    }

    .science4-copy-block p + p {
        margin-top: 24px;
    }

    .science4-copy-block--wide {
        margin-top: 48px;
    }

    .science4-data-figure figcaption,
    .science4-gold-heading {
        font-size: 14px;
        padding: 5px 8px;
    }

    .science4-data-figure img {
        margin-top: 18px;
    }

    .science4-data-figure__scroll {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .science4-data-figure__scroll img {
        max-width: none;
        width: 200%;
    }

    .science4-research-panel {
        margin-top: 52px;
        padding-inline: 16px;
    }

    .science4-result__micrographs {
        gap: 14px 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 16px;
    }

    .science4-result__micrographs figcaption {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .science4-result__micrographs p {
        font-size: 10px;
        margin-top: 8px;
    }

    .science4-result__legend--cells {
        grid-column: 1 / -1;
        margin-top: 2px;
        width: 180px;
    }

    .science4-result__charts {
        gap: 24px;
        grid-template-columns: 1fr;
        margin-top: 28px;
        padding-top: 16px;
    }

    .science4-chart figcaption {
        font-size: 13px;
        min-height: 0;
    }

    .science4-chart__canvas {
        margin-top: 14px;
    }

    .science4-chart__notes {
        font-size: 10px;
    }

    .science4-result__legend--chart {
        margin-top: -30px;
        width: 152px;
    }

    .science4-vessel-diagram {
        margin-top: 24px;
    }

    .science4-vessel-diagram figcaption {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .science4-vessel-diagram__content {
        gap: 14px;
        grid-template-columns: 1fr;
    }

    .science4-vessel-diagram__main,
    .science4-vessel-diagram__legend {
        grid-column: 1;
    }

    .science4-vessel-diagram__legend {
        width: 165px;
    }

    .science4-result__charts--chapter2 {
        grid-template-columns: 1fr;
    }

    .science4-research-panel--last {
        margin-top: 46px;
    }

    .science4-final-chart {
        margin-top: 24px;
        padding-inline: 0;
    }

    .science4-footer-nav {
        padding: 64px 16px 78px;
    }

    .science4-footer-nav h2 {
        font-size: 19px;
    }

    .science4-footer-nav__links {
        gap: 12px;
        grid-template-columns: 1fr;
        margin-top: 38px;
    }

    .science4-footer-nav__links a,
    .science4-footer-nav__links span,
    .science4-footer-nav__top {
        font-size: 12px !important;
        min-height: 52px !important;
    }

    .science4-footer-nav a:hover,
    .science4-footer-nav a:focus {
        font-size: 12px !important;
    }

    .science4-footer-nav__top {
        margin-top: 32px;
        max-width: none;
    }
}