@charset "utf-8";

/* profile ファーストビュー */
.work-fv-section {
    display: flex;
    width: 100%;
    height: 100vh;
    background-color: #1B1E30;
    position: relative;
    overflow-x: hidden;
    flex-direction: column;
    justify-content: space-between;
}

.work-imgcontainer {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.fv-work__imgcontainer {
    display: flex;
    width: 100%;
    height: 50%;
    align-items: center;
    flex-direction: column-reverse;
    margin-top: 10%;
}

.fv-work__img {
    display: block;
    width: 50%;
    height: auto;
    margin: 0 auto;
    padding: 10% 0 0 20px;
    z-index: 10;
}

.work-mountain {
    display: block;
    width: 100%;
    height: auto;
    z-index: 10;
}

.sp-scrolldown__content {
    display: none;
}

.profile-meteorite {
    display: block;
    width: 60px;
    height: auto;
    position: absolute;
    top: 20%;
    right: 15%;
}

.profile-meteorite__2 {
    display: block;
    width: 100px;
    height: auto;
    position: absolute;
    top: 45%;
    left: 10%;
}

.profile-meteorite__3 {
    display: block;
    width: 130px;
    height: auto;
    position: absolute;
    top: 55%;
    right: 20%;
}

.meteorite__motion {
    animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}

@keyframes floating-y {
    0% {
    transform: translateY(10%);
    }
    100% {
    transform: translateY(-5%);
    }
}

@media screen and (max-width: 768px) {
    .fv-work__imgcontainer {
        margin-top: 0;
    }

    .profile-meteorite {
        width: 30px;
        top: 25%;
    }

    .profile-meteorite__2 {
        width: 50px;
        top: 55%;
    }

    .profile-meteorite__3 {
        width: 70px;
        top: 65%;
        right: 10%;
    }

    .sp-scrolldown__content {
        position: relative;
        display: flex;
        flex-direction: column;
        z-index: 1000;
        padding-bottom: 50px;
    }

    .sp-scrolldown__text {
        text-decoration: none;
        color: #C8C828;
        font-size: 1.6rem;
        -webkit-text-stroke: 1px #C76C3B;
        text-align: center;
    }

    .sp-scrolldown__img {
        width: 100px;
        margin: 0 auto ;
        animation: down 1.5s infinite;
        -webkit-animation: down 1.5s infinite;
    }

    @keyframes down {
        0% {
        transform: translate(0);
        }
        20% {
        transform: translateY(8px);
        }
        40% {
        transform: translate(0);
        }
    }
}




/* グリッドセクション */
.work-section {
    width: 80%;
    height: auto;
    margin: 0 auto;
    margin: 150px auto 150px auto;
}

.work-section h1 {
    font-size: 6.4rem;
    color: #c8c828;
    text-align: center;
}

.work-item-wrapper {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(3, minmax(165px, 1fr));
    grid-auto-flow: dense;
    gap: 20px;
}

.work-item {
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.works-item__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: 0.5s ease-in-out;
}

.work-item:hover .works-item__img {
    transform: scale(1.1);
    transition: 0.3s ease-in-out;
    filter: brightness(30%);
}

.work-item__title {
    display: block;
    opacity: 0;
    font-size: 3.6rem;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    transition: 0.3s ease-in-out;
}

.work-item:hover .work-item__title {
    opacity: 1;
    transition: 0.3s ease-in-out;
}

.colum-jump {
    grid-column: span 2;
}
.row-jump {
    grid-row: span 2;
}



/* モーダル */
.modal {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 15, 15, 0.6);
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    overflow-y: scroll;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
}

/* モーダルgrid */
/* マフィン　フォト１ */
.modal__grid-muffin1.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ししゃも　ロゴ */
.modal__grid-shisyamo.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* profile　web */
.modal__grid-myweb.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* refinify */
.modal__grid-refinify.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* flyer1 */
.modal__grid-flyer1.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* factory1 */
.modal__grid-factory1.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* flyer2 */
.modal__grid-flyer2.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* factory2 */
.modal__grid-factory2.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* fuku */
.modal__grid-fuku.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* linoskin */
.modal__grid-linoskin.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* aki */
.modal__grid-aki.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* aroma */
.modal__grid-aroma.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* yama */
.modal__grid-yama.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* muffin2 */
.modal__grid-muffin2.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-grid__wrapper {
    width: 85%;
    height: auto;
    position: relative;
    padding: 2%;
}

.modal-grid__container {
    width: 100%;
    height: auto;
    background-color: #fff;
    align-items: center;
    padding-bottom: 5%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.modal-grid__content {
    display: flex;
    width: 100%;
    height: auto;
    padding: 5% 7% 0 7%;
    gap: 3%;
    justify-content: center;
}

.modal-grid__item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5%;
}

.modal-grid-item__wrapper {
    width: fit-content;
    height: auto;
    position: relative;
}

.modal-grid__title {
    width: 100%;
    font-size: 4.8rem;
    text-align: center;
    color: #29C095;
    -webkit-text-stroke: 3px #4C4C44;
    position: relative;
    z-index: 200;
}

.modal-grid-item__detail {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    margin-top: 10%;
    overflow-y: scroll;
}

.modal-grid-item__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: auto 0;
}

.modal-grid-item__list {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
}

.modal-grid-item__list-detail {
    font-size: 2rem;
    font-family: "Zen Kaku Gothic Antique";
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 50px;
    row-gap: 24px;
    width: fit-content;
}

.modal-grid-item__list-detail dt {
    text-align: right;
    border-right: solid 4px #29C095;
    padding-right: 12px;
}

.modal-grid-item__list-detail dd {
    text-align: left;
}

.modal-grid__text-container {
    position: relative;
    border: solid 4px #29C095;
    padding: 10px;
}

.modal-grid__text-container h5 {
    font-size: 2.4rem;
    font-family: "Zen Kaku Gothic Antique";
    background-color: #fff;
    padding: 0 15px;
    position: absolute;
    top: -25px;
}

.modal-grid__text {
    width: 100%;
    font-size: 2rem;
    font-family: "Zen Kaku Gothic Antique";
    line-height: 1.8;
    padding: 10px;
}

/* モーダル　tl */
@media screen and (max-width: 768px) {
    .modal-grid-item__detail {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 5%;
    }

    .modal-grid__title {
        font-size: 3.2rem;
        -webkit-text-stroke: 2px #4C4C44;
    }

    .modal-grid-item__img {
        margin: 0 auto;
        max-width: 250px;
    }

    .modal-grid-item__list {
        margin-left: 0;
        gap: 32px;
    }

    .modal-grid-item__list-detail {
        font-size: 1.8rem;
        column-gap: 20px;
        row-gap: 13px;
        margin: 0 auto;
    }

    .modal-grid-item__list-detail dt {
        border-right: solid 3px #29C095;
        padding-right: 8px;
    }

    .modal-grid__text-container {
        padding: 0;
        border: solid 3px #29C095;
        margin-top: 10px;
    }

    .modal-grid__text-container h5 {
        font-size: 2rem;
    }

    .modal-grid__text {
        font-size: 1.6rem;
    }
}

/* モーダル　sp */
@media screen and (max-width: 425px) {
    .modal-grid-item__detail {
        margin-top: 3%;
        gap: 20px;
    }

    .modal-grid__container {
        gap: 20px;
    }

    .modal-grid__title {
        font-size: 2.8rem;
        -webkit-text-stroke: 1px #4C4C44;
    }

    .modal-grid-item__img {
        margin: 0 auto;
        max-width: 150px;
    }

    .modal-grid-item__list {
        margin-left: 0;
        gap: 24px;
    }

    .modal-grid-item__list-detail {
        font-size: 1.4rem;
        column-gap: 15px;
        row-gap: 10px;
        padding-left: 0;
        margin: 0 auto;
    }

    .modal-grid-item__list-detail dt {
        border-right: solid 2px #29C095;
        padding-right: 5px;
    }

    .modal-grid__text-container {
        border: solid 2px #29C095;
        margin-bottom: 4%;
    }

    .modal-grid__text-container h5 {
        font-size: 1.8rem;
        top: -18px;
        padding: 0px 10px;
    }

    .modal-grid__text {
        font-size: 1.4rem;
    }
}


/* マフィン　フォト１ */
.closeModalBtn__grid-muffin1 {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-muffin1::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* ししゃも */
.closeModalBtn__grid-shisyamo {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-shisyamo::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* profile web */
.closeModalBtn__grid-myweb {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-myweb::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* refinify */
.closeModalBtn__grid-refinify {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-refinify::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* flyer1 */
.closeModalBtn__grid-flyer1 {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-flyer1::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* factory1 */
.closeModalBtn__grid-factory1 {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-factory1::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* flyer2 */
.closeModalBtn__grid-flyer2 {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-flyer2::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* factory2 */
.closeModalBtn__grid-factory2 {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-factory2::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* fuku */
.closeModalBtn__grid-fuku {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-fuku::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* linoskin */
.closeModalBtn__grid-linoskin {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-linoskin::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* aki */
.closeModalBtn__grid-aki {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-aki::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* aroma */
.closeModalBtn__grid-aroma {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-aroma::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* yama */
.closeModalBtn__grid-yama {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-yama::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* muffin2 */
.closeModalBtn__grid-muffin2 {
    width: fit-content;
    height: auto;
    font-size: 2.4rem;
    line-height: 2;
    border: solid 5px #29C095;
    border-radius: 50px;
    margin: 0 auto;
    padding: 1px 20px;
    cursor: pointer;
}

.closeModalBtn__grid-muffin2::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('../img/bastu_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
}

/* モーダルclose tl */
@media screen and (max-width: 768px) {
    .closeModalBtn__grid-muffin1 {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-muffin1::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-shisyamo {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-shisyamo::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-myweb {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-myweb::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-refinify {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-refinify::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-flyer1 {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-flyer1::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-factory1 {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-factory1::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-factory2 {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-factory2::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-flyer2 {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-flyer2::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-fuku {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-fuku::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-linoskin {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-linoskin::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-aki {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-aki::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-aroma {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-aroma::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-yama {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-yama::after {
        width: 24px;
        height: 24px;
    }

    .closeModalBtn__grid-muffin2 {
        font-size: 2rem;
        border: solid 3px #29C095;
        padding: 1px 15px;
    }

    .closeModalBtn__grid-muffin2::after {
        width: 24px;
        height: 24px;
    }
}

/* モーダルclose sp */
@media screen and (max-width: 425px) {
    .closeModalBtn__grid-muffin1 {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-muffin1::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-shisyamo {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-shisyamo::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-myweb {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;    
    }

    .closeModalBtn__grid-myweb::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-refinify {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;    
    }

    .closeModalBtn__grid-refinify::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-flyer1 {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-flyer1::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-factory1 {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-factory1::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-factory2 {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-factory2::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-flyer2 {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-flyer2::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-fuku {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-fuku::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-linoskin {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-linoskin::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-aki {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-aki::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-aroma {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-aroma::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-yama {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-yama::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }

    .closeModalBtn__grid-muffin2 {
        font-size: 1.8rem;
        border: solid 2px #29C095;
        padding: 0 10px;
    }

    .closeModalBtn__grid-muffin2::after {
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }
}


.modal-corner__topleft {
    width: 17%;
    height: auto;
    object-fit: contain;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.modal-corner__topright {
    width: 17%;
    height: auto;
    object-fit: contain;
    object-position: center;
    position: absolute;
    top: 0;
    right: 0;
}

.modal-corner__bottomleft {
    width: 17%;
    height: auto;
    object-fit: contain;
    object-position: center;
    position: absolute;
    bottom: 0;
    left: 0;
}

.modal-corner__bottomright {
    width: 17%;
    height: auto;
    object-fit: contain;
    object-position: center;
    position: absolute;
    bottom: 0;
    right: 0;
}


@media screen and (max-width: 768px) {
    .fv-work__img {
        padding: 0;
        width: 60%;
    }

    .work-section h1 {
        font-size: 4.8rem;
    }

    .work-section {
        width: 85%;
        margin: 80px auto 80px auto;
    }

    .work-item__title {
        font-size: 2.4rem;
    }

    .work-item-wrapper {
        grid-template-columns: repeat(2, minmax(165px, 1fr));
        margin-top: 80px;
    }

    .colum-jump__2 {
        grid-column: span 1;
    }
}

@media screen and (max-width: 425px) {
    .work-section h1 {
        font-size: 3.2rem;
    }

    .work-section {
        width: 90%;
        margin: 50px auto 50px auto;
    }

    .work-item-wrapper {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        margin-top: 50px;
        gap: 10px;
    }

    .work-item__title {
        font-size: 1.8rem;
    }
}