@charset "utf-8";

/*=================== 
変数宣言
======================*/

:root {
    --main-color: rgb(237, 204, 111);
    --main-color-rgb: 237, 204, 111;
    --text-color: rgb(51, 51, 51);
    --text-color-rgb: 51, 51, 51;
    --size-sm: 1.2rem;
    --size-md: 1.6rem;
    --size-lg: 2.6rem;
    --size-xl: 4.2rem;
    --size-xxl: 6.6rem;
    --font-sans: "Noto Sans JP", serif;
    --font-serif: "Noto Serif JP", serif;
    --gutter-base: 8px;
    --contents-side-gutter: calc(var(--gutter-base)*2);
    --contents-gutter: calc(var(--gutter-base)*5);
    --contents-gutter-pc: calc(var(--gutter-base)*10);
    --section-gutter: calc(var(--gutter-base)*10);
    --section-gutter-pc: calc(var(--gutter-base)*20);
    --footer-gutter: calc(var(--gutter-base)*30);
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

/* ==================================== */

.workshop_inner {
    margin-top: var(--section-gutter);
    margin-inline: var(--contents-side-gutter);
    margin-bottom: var(--contents-gutter);
}

.workshop_inner .title {
    font-size: var(--size-xl);
    line-height: 1;
    margin-bottom: var(--contents-gutter);
}


.workshop_inner .title span {
    display: block;
    font-size: var(--size-sm);
    line-height: 2;
}

.workshop_text {
    margin-bottom: var(--contents-gutter);
}

.workshop_inner img {
    display: none;
}

.contents {
    margin-inline: var(--contents-side-gutter);
}

.contents_box {
    padding: var(--contents-side-gutter);
    padding-bottom: var(--contents-gutter);
    margin-bottom: var(--contents-gutter);
    border-bottom: var(--text-color) 1px solid;
    /* border: 1px solid #fff; */
    /* border-radius: var(--contents-side-gutter); */
}


.contents_box img {
    height: 240px;
    object-fit: cover;
}

.contents_title {
    font-size: calc(var(--size-sm)*2);
    border-bottom: 1px solid var(--text-color);
}

.contents_text {
    margin-bottom: calc(var(--contents-side-gutter)/2);
}



.reserve_btn {
    display: block;
    width: 200px;
    border: 1px solid #fff;
    background-color: #fff;
    text-align: center;
    margin-inline: auto;
    line-height: 3;
    border-radius: 24px;
    margin-top: var(--contents-side-gutter);
}

@media screen and (min-width:520px) {
    .workshop_inner {
        max-width: 700px;
        margin-inline: auto;
        margin-top: var(--section-gutter-pc);
        display: flex;
        gap: var(--contents-gutter);
    }

    .workshop_inner img {
        display: block;
        width: 200px;
        height: 200px;
        object-fit: contain;
        opacity: 0;
        animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .text span {
        display: block;
        font-size: var(--size-sm);
    }

    /* 
    .contents {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: var(--contents-gutter);
        max-width: 700px;
        margin-inline: auto;
    } */
    .contents_box {
        display: flex;
        gap: var(--contents-gutter);
        max-width: 700px;
        margin-inline: auto;
        padding-inline: 0;
    }

    .contents_box img {
        height: 300px;
    }

    .reserve_btn:hover {
        background-color: transparent;
        color: #fff;
        transition: 0.3s;
    }
}

/*============min-width:520px============*/