body { background: #000; }

#introduction {
    --blue: #f5a200;
    --hairline: rgba(255, 255, 255, 0.72);
    --muted: rgba(255, 255, 255, 0.74);
    --paper: #fff;
    background: #282828;
    border-left: 6px solid #717171;
    border-right: 6px solid #717171;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W4', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
    margin: 0 auto;
    max-width: 760px;
}

#introduction .container { max-width: 760px; }
#introduction .hero { min-height: 458px; }
#introduction .hero-copy { left: 48px; max-width: 640px; text-shadow: 0 2px 8px rgba(0, 0, 0, .88), 0 1px 2px #000; }
#introduction .hero h1,
#introduction .hero h1.hero-quote { font-size: 29px; line-height: 1.45; margin-bottom: 14px; }
#introduction .hero h1 em { text-decoration: none; }
#introduction .hero h1 cite { color: #fff; font-size: .58em; margin-top: 6px; }
#introduction .hero .lead { color: #fff; font-size: 12px; font-weight: 600; line-height: 1.75; max-width: 620px; }
#introduction main { padding: 0 48px 72px; }

#introduction .chapter,
#introduction .diagram-section,
#introduction .equipment-section,
#introduction .periods-section,
#introduction .philosophy { border-top: 0; padding: 45px 0 58px; }

#introduction .diagram-section { padding-top: 25px; }
#introduction .collaboration { padding-top: 35px; }

#introduction .periods-section,
#introduction .diagram-section,
#introduction .equipment-section,
#introduction .chapter { display: block; }

#introduction .chapter-head { margin-bottom: 28px; }
#introduction .chapter-head .section-label { margin-bottom: 15px; }
#introduction .chapter-head h2,
#introduction .cc500-copy h2 { font-size: 21px; font-weight: 600; line-height: 1.5; }
#introduction .period-grid { margin-top: 18px; }
#introduction .period-grid li { min-height: 192px; padding: 0 10px 8px; }
#introduction .period-grid time { color: var(--blue); font-size: 15px; font-weight: 600; }
#introduction .period-grid h3 { font-size: 12px; margin: 16px 0 12px; }
#introduction .period-grid h3 small { color: #fff; }
#introduction .period-grid .period-copy { color: #fff; font-size: 10px; line-height: 1.7; }
#introduction .diagram-gallery { margin: 30px auto 0; width: 84%; }
#introduction .diagram-figure { background: transparent; padding: 0; }
#introduction .diagram-figure a { cursor: zoom-in; }
#introduction .diagram-figure img { mix-blend-mode: normal; }
#introduction .diagram-figure figcaption {
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.65;
    margin-top: 10px;
}
#introduction .process-strip { margin-top: 34px; }
#introduction .process-strip li { min-height: 198px; padding: 10px 11px 18px; }
#introduction .process-strip b,
#introduction .equipment-grid section > b { color: var(--blue); }
#introduction .process-strip em { color: rgba(255, 255, 255, .76); }
#introduction .collaboration .chapter-body { display: block; }
#introduction .collaboration .large-copy { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
#introduction .chapter-body > p,
#introduction .cc500-copy > p:last-child { color: #fff; font-size: 12px; line-height: 1.9; }

#introduction .cc500-feature { background: #282828; display: flex; flex-direction: column; margin: 0; }
#introduction .cc500-feature figure { margin: 30px auto 0; min-height: 0; order: 2; width: 82%; }
#introduction .cc500-feature figure img { height: auto; }
#introduction .cc500-copy { order: 1; padding: 18px 0 0; }
#introduction .cc500-copy h2 { margin-bottom: 18px; }

#introduction .equipment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }
#introduction .equipment-grid section { min-height: 196px; padding: 18px 12px; }
#introduction .equipment-grid h3 { font-size: 13px; margin: 10px 0 7px; }
#introduction .equipment-grid p,
#introduction .equipment-note { color: #fff; font-size: 10px; line-height: 1.72; }
#introduction .equipment-note { border-left-color: rgba(245, 162, 0, .72); grid-column: 1 / -1; margin-top: 20px; }
#introduction .studio-panorama { margin: 28px auto 48px; width: 82%; }

#introduction .philosophy { padding-top: 18px; }
#introduction .philosophy-head { display: block; }
#introduction .philosophy-head .section-label { margin-bottom: 22px; }
#introduction .philosophy-head h2 { font-size: 20px; font-weight: 600; }
#introduction .philosophy-essay { column-gap: 28px; }
#introduction .philosophy-essay p { color: #fff; font-size: 11px; line-height: 1.85; }

#introduction .kondo-youtube { margin: 64px 0 0; text-align: center; }
#introduction .kondo-youtube a { border-bottom: 1px solid rgba(255, 255, 255, .72); color: #fff; display: inline-block; font-size: 13px; font-weight: 600; padding-bottom: 4px; text-decoration: none; }
#introduction .kondo-youtube a:hover,
#introduction .kondo-youtube a:focus-visible { border-color: var(--blue); color: var(--blue); outline: none; }

.page-underlay-home {
    bottom: 0;
    display: block;
    position: fixed;
    top: 0;
    width: max(calc((100vw - 760px) / 2), 0px);
    z-index: 2;
}

.page-underlay-home--left { left: 0; }
.page-underlay-home--right { right: 0; }
.mobile-home-link { display: none; }

body.diagram-lightbox-open { overflow: hidden; }

.diagram-lightbox {
    align-items: stretch;
    background: rgba(0, 0, 0, .94);
    display: flex;
    inset: 0;
    position: fixed;
    z-index: 1000;
}

.diagram-lightbox[hidden] { display: none; }

.diagram-lightbox__close {
    background: #fff;
    border: 0;
    border-radius: 50%;
    color: #000;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 27px;
    height: 40px;
    line-height: 38px;
    padding: 0;
    position: fixed;
    right: 20px;
    top: 18px;
    width: 40px;
    z-index: 1002;
}

.diagram-lightbox__close:focus-visible {
    outline: 2px solid #f5a200;
    outline-offset: 3px;
}

.diagram-lightbox__scroll {
    height: 100%;
    overflow: auto;
    padding: 72px 32px 36px;
    width: 100%;
}

.diagram-lightbox figure {
    margin: 0 auto;
    width: 846px;
}

.diagram-lightbox img {
    display: block;
    height: auto;
    max-width: none;
    width: 846px;
}

.diagram-lightbox figcaption {
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .04em;
    line-height: 1.7;
    margin-top: 12px;
}

@media screen and (max-width: 568px) {
    #introduction .hero { min-height: 650px; }
    #introduction .hero-copy { bottom: 38px; left: 24px; max-width: calc(100% - 48px); top: auto; transform: none; }
    #introduction .hero h1.hero-quote { font-size: 1.65rem; }
    #introduction main { padding: 0 24px 64px; }
    #introduction .period-grid { display: block; }
    #introduction .period-grid li { min-height: 0; padding: 22px 18px 26px; }
    #introduction .diagram-gallery { margin-left: -24px; margin-right: -24px; width: auto; }
    #introduction .diagram-figure { padding: 0; }
    #introduction .diagram-figure + .diagram-figure { margin-top: 28px; }
    #introduction .diagram-figure figcaption { padding: 0 16px; }
    #introduction .cc500-feature { margin: 0; }
    #introduction .cc500-feature figure,
    #introduction .studio-panorama { width: 100%; }
    #introduction .equipment-grid { display: block; }
    #introduction .philosophy-essay { column-count: 1; }
    #introduction .philosophy-essay p { font-size: .94rem; line-height: 2rem; }
}

@media screen and (max-width: 760px) {
    #introduction {
        border-left: 0;
        border-right: 0;
    }

    .page-underlay-home {
        display: none;
    }

    #introduction .mobile-home-link {
        border: 1px solid rgba(255, 255, 255, .55);
        color: #fff;
        display: block;
        font-size: 12px;
        letter-spacing: .12em;
        margin: 52px auto 0;
        padding: 11px 18px;
        text-align: center;
        text-decoration: none;
        width: 118px;
    }
}