/* Mobile Styles (max-width: 809px) */
@media screen and (max-width: 809px) {


    /* ローディング画面の縮小アニメーション */
    @keyframes loadingShrink {
        0% {
            width: calc(100vw - 48px);
            height: calc(100vh - 48px);

        }

        33% {
            width: calc(100vw - 48px);
            height: 58px;
        }

        66% {
            width: calc(100vw - 48px);
            height: 58px;
        }

        100% {
            width: calc(100vw - 48px);
            height: 58px;
            bottom: 24px;
        }
    }

    .page-wrapper {
        padding: 24px 16px 0;
    }

    .logo-container__header-wrapper {
        z-index: 1;
        position: relative;
    }

    .logo-container__header {
        position: fixed;
        top: 32px;
        left: 16px;
        z-index: 10;
    }



    .main-content {
        flex: 1;
    }

    .menu {
        width: 100%;
        box-sizing: border-box;
    }

    .menu--visible {
        align-self: stretch;
        display: flex;
    }

    .menu--visible__announcement__text {
        flex-grow: 1;
        overflow: hidden;
        min-width: 0;
        width: 100%;
    }

    .menu--visible__announcement__text p {
        white-space: nowrap;
        width: 100%;
        min-width: max-content;
    }

    .menu--hidden__contact {
        width: 100%;
        padding: 0 16px 0 0;
    }

    .menu--hidden__contact__mail {
        font-size: var(--text-4);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 4px;
    }

    .contact {
        display: flex;
        flex-direction: column;
    }

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .logo-container__header__svg {
        height: 12px;
    }

    /* ローディング画面の進捗テキスト（スマホ） */
    .loading-screen__progress {
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-family: var(--font-sans-jp);
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: var(--leading-normal);
        letter-spacing: var(--tracking-normal);
        opacity: 1;
        transition: opacity 0.5s ease-out;
    }

    .header {
        padding: 20px 20px;
    }

    .header__nav {
        display: none;
    }

    .header__nav--mobile {
        display: block;
    }

    .main-copy {
        margin-top: 80px;
        width: 100%;
        min-height: 150px;
        /* スマホ用のタイプライター演出中の高さを固定 */
    }

    .main-copy__content {
        width: 100%;
        height: 80px;
    }

    .main-copy__content-jp {
        margin-top: 0px;
    }

    .main-copy__content-ja {
        margin-top: 0px;
    }

    .main-copy__content-en {
        margin-top: 32px;
    }

    .main-copy__content p[lang=ja] {
        font-size: 16px;
        line-height: 1.5;
    }

    .main-copy__content p[lang=en] {
        font-size: 14px;
        line-height: 1.5;
    }

    .main-copy__content {
        gap: 8px;
    }

    .main-copy__text[lang=ja] {
        margin-top: -8px;
        font-size: var(--text-5);
        height: auto;
        width: 100%;
        white-space: nowrap;
    }

    .main-copy__text[lang=en] {
        margin-top: -8px;
        font-size: var(--text-2);
        height: auto;
        width: 100%;
        line-height: var(--leading-normal);
        white-space: nowrap;
    }

    .main-copy__text {
        gap: 8px;
    }

    .home__works {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 136px;
        margin-bottom: 40px;
    }

    .home__works__item {
        margin-top: 0;
    }

    .home__works__link {
        width: 100%;
        height: 100%;
    }

    .home__works__img {
        height: auto;
        aspect-ratio: 4/3;
    }

    /* サイズ別のスタイル */
    .home__works__item--size-l {
        width: calc(100% - 6px);
    }

    .home__works__item--size-s {
        width: calc(50% - 6px);
    }

    .home__works__item--size-l .home__works__img {
        aspect-ratio: 1/1;
        height: auto;
        object-fit: cover;
    }

    .home__works__item--size-s .home__works__img {
        aspect-ratio: 3/5;
        height: auto;
        object-fit: cover;
    }

    .home__works__spacer:not(.pc) {
        aspect-ratio: 3/5;
    }

    .home__works__container:nth-of-type(2) {
        display: none;
    }

    /* ashmeaのコンテナ内のスペーサーの高さを0に */
    .home__works__container:nth-of-type(2) .home__works__spacer {
        height: 0 !important;
        padding: 0;
        margin: 0;
        overflow: hidden;
        aspect-ratio: unset;
    }

    /* コンテナを2カラムレイアウト用に設定 */
    .home__works__container {
        width: calc(50% - 6px);
        display: flex;
        flex-direction: column;
    }

    .home__works__container .home__works__item {
        width: 100%;
    }

    .home__works__item--mobile-mt {
        margin-top: -60px !important;
    }






    /* プロフィールページ */

    .page-profile {
        padding: 80px 16px 0 16px;
    }

    .profile-section {
        padding-top: 136px;
    }

    .profile-section__title__main {
        font-size: 20px;
    }

    .profile-section__title__main::before {
        transform: translateY(-5px);
        width: 4px;
        height: 4px;
        margin-right: 8px;
    }

    .profile-section__title__sub {
        font-size: 14px;
    }

    .profile-section__title__sub::before {
        transform: translateY(-5px);
        width: 4px;
        height: 4px;
        margin-right: 8px;
    }

    .profile-section__paragragh p[lang=en] {
        font-family: var(--font-serif-en);
        font-style: normal;
        font-weight: 400;
        line-height: var(--leading-normal);
        letter-spacing: var(--tracking-normal);
        font-size: var(--text-2);
    }

    .profile-section__profile__gallary {
        margin-top: 40px;
        display: grid;
        grid-column: 1/-1;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 260px 260px;
        margin-bottom: -96px;
        width: calc(100% + 32px);
        margin: 0 -16px;
    }

    .profile-section__profile__paragragh {
        grid-column: 1/-1;
    }

    .profile-section__profile {
        padding: 80px 16px;
        width: calc(100% + 32px);
        margin: 0 -16px;
    }

    .profile-section__feature__item {
        grid-column: 1/-1;
        grid-template-columns: repeat(6, 1fr);
    }

    .profile-section__feature__item__text {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__feature__item__img {
        margin-top: 24px;
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__feature {
        padding: 80px 16px;
        width: calc(100% + 32px);
        margin: 0 -16px;
    }

    .profile-section__flow {
        padding: 80px 16px;
        width: calc(100% + 32px);
        margin: 0 -16px;
    }

    .profile-section__flow__intro {
        grid-column: 1/-1;
    }


    .profile-section__flow__list {
        grid-column: 1/-1;
    }

    .profile-section__flow__item__title {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__flow__item__content {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__price {
        padding: 80px 16px;
        width: calc(100% + 32px);
        margin: 0 -16px;
    }

    .profile-section__price__intro-mitsumori {
        margin-top: 40px;
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__price__intro-mitsumori__intro {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__price__intro-mitsumori__mitsumori {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__price__intro-mitsumori__img {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__price__osaeru {
        margin-top: 40px;
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__price__osaeru__title {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__price__osaeru__title span {
        grid-column: 1/-1;
        grid-row: auto;
    }


    .profile-section__price__osaeru__item__number {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__price__osaeru__item__title {
        margin-top: 8px;
        grid-column: 1/-1;
        grid-row: auto;
    }

    .profile-section__price__osaeru__item__text {
        margin-top: 8px;
        grid-column: 1/-1;
        grid-row: auto;
    }

    .page-work__kv {
        width: calc(100% + 32px);
        margin: 0 -16px;
        min-height: 260px;
        max-height: 940px;
        height: auto;
    }

    .page-work__kv__img {
        aspect-ratio: 3/4;
        height: auto;
    }

    .page-work__title {
        margin-top: 40px;
    }

    .page-work__overview {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-column: 1/-1;
        grid-row: auto;
    }

    .page-work__overview__list {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .page-work__overview__list__item {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .page-work__overview__paragraph {
        margin-top: 24px;
        display: block;
        grid-column: 1/-1;
        grid-row: auto;
    }

    .page-work__overview__paragraph__body-1-ja {
        display: block;
        width: 100%;
    }

    .page-work__overview__paragraph__body-2-ja {
        display: block;
        width: 100%;
    }

    .page-work__overview__paragraph__body-1-en {
        display: block;
        width: 100%;
    }

    .page-work__overview__paragraph__body-2-en {
        display: block;
        width: 100%;
    }

    .page-work__contents {
        margin-top: 40px;
        grid-column-gap: 8px;
        grid-row-gap: 8px;
    }


    .page-work__contents__grid-3-6 {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .page-work__contents__grid-1-6 {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .page-work__contents__grid-half {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .page-work__contents__grid-1-2 {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .page-work__contents__grid-text {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .page-work__next-work__img {
        aspect-ratio: 16/9;
        width: 100%;
        height: auto;
    }


    /* フッター */

    .footer-wrapper {
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 40px 16px 80px;
        gap: 0px;
        /* gapを0にして、各要素のマージンで調整 */
    }

    .footer__main {
        display: flex;
        flex-direction: column;
        gap: 0px;
        width: 100%;
    }

    /* 情報エリアのラッパーを無効化して中身をフラットに扱う */
    .footer__info {
        display: contents;
    }

    /* ロゴ (Order 1) */
    .footer__logo {
        order: 1;
        width: 100%;
        text-align: left;
        padding-bottom: 24px;
        margin-bottom: 40px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    }

    .footer__logo img {
        height: 18px;
        /* スマホサイズに合わせて調整 */
    }

    /* ナビゲーション (Order 2) */
    .footer__nav {
        order: 2;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        margin-bottom: 40px;
    }

    .footer__nav-group {
        gap: 16px;
        width: fit-content;
        /* 中身の幅に合わせる */
        min-width: auto;
        /* style.cssの設定を解除 */
    }

    .footer__nav-title {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .footer__nav-list {
        gap: 16px;
    }

    .footer__nav-list a {
        font-size: var(--text-4);
    }

    /* コンタクト (Order 3) */
    .footer__contact {
        order: 3;
        align-items: flex-start;
        width: 100%;
        margin-top: 0;
        padding-top: 40px;
        /* Aboutとの間隔 */
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        /* 上に線 */
    }

    .footer__contact-mail {
        font-size: 20px;
        /* 画面幅に合わせて調整 */
        word-break: break-all;
    }

    /* ボトムバー */
    .footer__bottom {
        flex-direction: column-reverse;
        /* 下（SNS）を上に、上（コピーライト）を下に */
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 24px;
        margin-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        gap: 40px;
        /* SNSとコピーライトの間隔 */
    }

    .footer__sns {
        width: 100%;
        gap: 24px;
    }

    .footer__bottom__copyright {
        font-size: 10px;
        margin-top: 0;
    }


}