@charset 'utf-8';

/* こだわりセクション */
.dedication {
    display: grid;
    grid-template: .4fr 60%/.1fr 1fr .1fr;
    justify-items: center;
    align-items: center;

    h1 {
        grid-column: 2;
        grid-row: 1;
    }

    .dedication-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        background-color: rgba(8, 8, 8, .3);
        grid-area: 2 / 2 / 3 / 3;
        z-index: 1;
        width: 100%;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s ease-out, transform 1s ease-out;
        text-shadow: 0px 5px 4px rgba(0, 0, 0, 1);

        h2,
        p {
            font-weight: 800;
        }

        h2 {
            margin-bottom: 2rem;
        }
    }

    .dedication-container.visible {
        opacity: 1;
        transform: translateY(0);
    }

    img {
        grid-column: 2;
        grid-row: 2;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    .dedication {
        grid-template: .6fr 60%/5% 1fr 5%;

        .dedication-container {
            width: 100%;
            height: 100%;

            h2 {
                font-size: clamp(1.125rem, 1.014rem + 0.56vw, 1.5rem);
                margin-bottom: .8rem;
            }

            p {
                font-size: clamp(0.813rem, 0.766rem + 0.23vw, 1rem);
            }
        }
    }
}

/* ********************** */
/* 魅力セクション */
.attractive {
    margin: 0 clamp(0.938rem, -0.438rem + 5.5vw, 4.375rem) clamp(2.5rem, 1.136rem + 7.27vw, 7.5rem);

    h1 {
        width: 50%;
        margin: 0 auto 5%;
        text-align: center;
    }

    .attractive-container {
        display: grid;
        grid-template: repeat(2, 1fr) /repeat(2, 1fr);
        align-items: center;

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .item-text h2 {
            margin-bottom: 3%;
        }

        .item-text:nth-of-type(1) {
            padding-left: 2rem;
        }

        .item-text:nth-of-type(2) {
            padding-right: 2rem;
        }
    }
}

@media screen and (max-width: 768px) {
    .attractive {
        width: 100%;
        margin: 0 0 5%;

        h1 {
            width: auto;
        }

        .attractive-container {
            grid-template: 35vh auto 35vh auto / 1fr;
            margin: 0 1rem;



            .item-text:nth-of-type(1) {
                padding: 3%;
                margin-bottom: 10%;
            }

            .item-text:nth-of-type(2) {
                grid-row: 4;
                padding: 3%;
            }
        }
    }
}

/* ********************** */