/* PC用CSS：画面幅861px以上。共通設定は style.css。 */

/* ▼ (min-width:1600px) */
@media (min-width:1600px) {
    .hero-copy {
        top: 23%;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero h1 {
        font-size: 124px;
    }

    .section-pad {
        padding-left: max(6vw,calc((100vw - 1440px)/2));
        padding-right: max(6vw,calc((100vw - 1440px)/2));
    }

}

/* ▼ (max-width:1100px) */
@media (max-width:1100px) {
    .header {
        gap: 22px;
    }

    .nav {
        gap: 18px;
        font-size: 10px;
    }

    .brand {
        width: 174px;
    }

    .header-contact {
        padding: 13px 16px;
        font-size: 10px;
    }

    .hero h1 {
        font-size: 89px;
    }

    .hero-copy {
        top: 24%;
    }

    .future-grid {
        gap: 7%;
    }

    .services-layout {
        gap: 6%;
    }

    .service-row summary strong {
        font-size: 17px;
    }

    .credentials strong {
        font-size: 47px;
    }

    .process-grid {
        gap: 25px;
    }

    .process-grid h3 {
        font-size: 16px;
    }

}

/* ▼ (prefers-reduced-motion:reduce) */
@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation: none !important;
        transition: none !important;
    }

    *:before {
        animation: none !important;
        transition: none !important;
    }

    *:after {
        animation: none !important;
        transition: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .hero-sticky {
        position: relative;
    }

    .hero-visual {
        will-change: auto;
    }

    .hero-copy {
        will-change: auto;
    }

    .future-visual img {
        will-change: auto;
    }

}

/* ▼ (max-width:1100px) */
@media (max-width:1100px) {
    .work-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        column-gap: 27px;
    }

    .work-caption h3 {
        font-size: 16px;
    }

    .values {
        gap: 7%;
    }

    .values-intro h3 {
        font-size: 23px;
    }

    .journey-readout {
        width: 165px;
    }

    .header-contact {
        padding-left: 18px;
        padding-right: 18px;
    }

}

/* ▼ (prefers-reduced-motion:reduce) */
@media (prefers-reduced-motion:reduce) {
    .hero {
        height: 100svh;
        min-height: 640px;
    }

    .hero-sticky {
        position: relative;
        height: 100%;
        min-height: 640px;
    }

    .journey-scene {
        display: none;
    }

    .journey-readout {
        display: none;
    }

    .journey-destination {
        display: none;
    }

    .yokohama-marker {
        display: none;
    }

    .journey-credit {
        display: none;
    }

    .journey-end {
        display: none;
    }

    .hero-explore {
        display: none;
    }

}

/* ▼ (hover:hover) and (pointer:fine) */
@media (hover:hover) and (pointer:fine) {
    .motion-card:hover {
        --work-scale: 1.025;
    }

}

/* ▼ (prefers-reduced-motion:reduce) */
@media (prefers-reduced-motion:reduce) {
    .motion-title .title-line-content {
        transform: none !important;
        opacity: 1 !important;
    }

    .work-grid .motion-card .legacy-screen {
        transform: none !important;
        will-change: auto !important;
    }

    .work-grid .motion-card .browser-frame {
        transform: none !important;
        will-change: auto !important;
    }

    .work-grid .motion-card .field-preview {
        transform: none !important;
        will-change: auto !important;
    }

    .work-grid .motion-card .screen-clip img {
        transform: none !important;
        will-change: auto !important;
    }

    .process-grid li:before {
        transform: none !important;
    }

}

/* ▼ (max-width:1100px) */
@media (max-width:1100px) {
    .drone-preview-copy {
        font-size: 17px;
    }

}

/* ▼ (min-width:861px) and (max-height:760px) */
@media (min-width:861px) and (max-height:760px) {
    .hero-copy {
        top: 17%;
    }

    .hero h1 {
        font-size: clamp(62px,6.8vw,98px);
        margin-top: 16px;
    }

    .hero-business {
        margin-top: 14px;
    }

    .hero-description {
        margin-top: 18px;
    }

}

/* ▼ (prefers-reduced-motion:reduce) */
@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

}

/* ▼ (min-width:861px) and (max-height:660px) */
@media (min-width:861px) and (max-height:660px) {
    .hero h1 {
        font-size: clamp(55px,5.8vw,84px);
        line-height: 1.22;
        margin-top: 14px;
    }

    .hero-business {
        font-size: 14px;
        margin-top: 10px;
    }

    .hero-description {
        font-size: 11px;
        line-height: 1.8;
        margin-top: 14px;
    }

}

/* ▼ (prefers-reduced-motion:reduce) */
@media (prefers-reduced-motion:reduce) {
    .news-toggle {
        transition: none;
    }

}