/*######################################################################
共通設定
######################################################################*/

:root {
    --width__main-content: min(100%, 1000px);
    /* --color__accent: #FF7BAC; */
}

/* コンテンツ全体の調整 */
body {
    width: min(100%, 750px);
    margin-inline: auto;
    font-family: "Noto Sans JP","Zen+Kaku+Gothic" ;
    font-optical-sizing: auto;
    background-color: #fff;
    color: #582904;
    margin-top: 0;
}

h1 {
    margin: 0;
}

p, a, ul, ol, table {
    /* 400-768 */
    font-size: clamp(0.875rem, 0.739rem + 0.543vw, 1rem);
}

/* imgタグの調整 */
img {
    vertical-align: top;
    width: 100%;
}

.sp {
    display: none;
}

/* SPでのみ折り返し */
br.sp {

    @media (min-width: 768px) {
        display: none;
    }
}

/*------------------------------------------------------------
スクロールアニメーション
------------------------------------------------------------*/
/* フェードイン */
.fadein-scrollin {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1.5s;


    &.scrollin-left {
        transform: translate(-30px, 0);
    }

    &.scrollin-right {
        transform: translate(30px, 0);
    }

    &.scrollin-bottom {
        transform: translate(0, 30px);
    }

    &.scrollin {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/*######################################################################
コンテンツ
######################################################################*/

/*------------------------------------------------------------
cta
------------------------------------------------------------*/
.cta {
    position: relative;
}

.cta__btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    bottom: clamp(0.625rem, 1.25rem + -2.667vw, 0rem);
    width: 95%;
    padding-left: 1%;
}
.cta__btn-2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    bottom: clamp(1.875rem, 0rem + 8vw, 3.75rem);
    width: 95%;
    padding-left: 1%;
}

/*------------------------------------------------------------
footer
------------------------------------------------------------*/
.footer {
    padding: 1.5rem 0;
    background-color: #4f3d30;
    color: #fff;
}

.footer__nav {
    font-size: clamp(0.875rem, 0.765rem + 0.49vw, 1rem);
    
    ul {
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;

        li:not(:last-child)::after {
            content: "｜";
        }
    }

    a {
        text-decoration: none;
        transition: 0.2s;

        &:hover {
            color: lightgray;
        }
    }
}

/*------------------------------------------------------------
ボタンアニメーション
------------------------------------------------------------*/
/* クリック */
.click {
    filter: drop-shadow(0 4px 0 #103f18);
    animation: click 1.5s infinite ease-in-out;
}

@keyframes click {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 4px 0 #fff);
    }
    10% {
        transform: translateY(4px);
        filter: drop-shadow(0 0 0 #fff);
    }
    20% {
        transform: translateY(0);
        filter: drop-shadow(0 4px 0 #fff);
    }
}

.click2 {
    filter: drop-shadow(0 4px 0 #fed742) !important;
    animation: click 1.5s infinite ease-in-out;
}

@keyframes click2 {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 4px 0 #fed742);
    }
    10% {
        transform: translateY(4px);
        filter: drop-shadow(0 0 0 #fed742);
    }
    20% {
        transform: translateY(0);
        filter: drop-shadow(0 4px 0 #fed742);
    }
}