@charset "UTF-8";

/* ============================================================
   MOBILE.CSS
   768px 以下のレスポンシブ上書き
   top.css / work-detail.css から移動
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */

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

    .header__cta {
        display: none;
    }

}


/* ============================================================
   SECTION HEADING — 左寄せ（contact除く）
   ============================================================ */

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

    .section-heading {
        text-align: left;
        justify-content: flex-start;
    }

    .contact .section-heading {
        text-align: center;
        justify-content: center;
    }

    .works-web .section-heading {
        text-align: left;
        justify-content: flex-start;
    }

}


/* ============================================================
   TOP PAGE
   ============================================================ */

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

    /* ── Hero ── */
    .hero__inner {
        padding-top: 0;
        padding-inline: var(--container-px);
    }
    .hero__heading {
        align-items: flex-start;
    }
    .hero__sparkle {
        margin-top: 4px;
    }
    /* ── About ── */
    .about__photo {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: var(--radius-lg);
    }

    .about__photo-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
    .about__body {
        padding-top: 0;
    }
    /* ── Timeline ── */
    .timeline__list::before {
        top: var(--timeline-line-top, clamp(110px, 17.7vw, 140px));
        left: 26px;
        transform: none;
    }

    .timeline__marker-dot {
        margin: 0;
    }

    .timeline__year-marker {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .timeline__year-marker::before,
    .timeline__year-marker::after {
        display: none;
    }

    .timeline__year {
        position: relative;
        z-index: 3;
        background-color: var(--color-bg);
        padding-inline: 8px;
    }

    .timeline__item-body {
        margin-top: 16px;
        flex-direction: column;
        gap: clamp(16px, 3vw, 24px);
        padding-bottom: clamp(16px, 3vw, 32px);
        margin-left: 48px;
    }

    .timeline__item--reverse .timeline__content {
        text-align: left;
    }

    .timeline__item:last-child .timeline__item-body {
        margin-top: 32px;
    }

    .timeline__photo {
        order: 1;
    }

    .timeline__content {
        order: 0;
    }
    .timeline__location {
        margin-top: -4px;
    }
    /* ── Product Card ── */
    .product-card__image {
        order: -1;
    }

    .works-product .tertiary-button {
        margin-top: 16px;
    }
    .works-product {
        padding-top: 16px;
    }
    .product-card {
        gap: 0;
    }
    /* ── Skills ── */
    .skills__groups {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .skills__group {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .skills__item {
        flex-wrap: wrap;
        gap: 4px 6px;
    }

    .skills__item-name {
        flex-shrink: 1;
        white-space: normal;
    }

    .skills__item-level {
        flex-shrink: 1;
        white-space: normal;
    }

}



/* ============================================================
   WORK DETAIL PAGE
   ============================================================ */

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

    /* ── Work Detail Hero ── */
    .work-detail__visual {
        order: -1;
    }

    /* ── Case Flow ── */
    .case-flow__steps {
        gap: 16px;
        flex-direction: column;
        align-items: center;
    }

    .case-flow__arrow {
        transform: rotate(90deg);
    }

    #design-solution .case-flow__step {
        border-bottom: 1px solid var(--color-divider);
        padding-bottom: 24px;
        width: 100%;
    }

    #design-solution .case-flow__step:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* ── Work Pager ── */
    .work-pager {
        gap: clamp(24px, 6vw, 36px);
    }

    .work-pager__prev,
    .work-pager__next {
        flex: unset;
        width: 100%;
    }

    .work-pager__title {
        white-space: normal;
    }
    .case-flow .work-section__card-text {
        max-width: 220px;
    }
}