@charset "utf-8";
/* =====
common
===== */
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

:root {
    --primary-white: #ffffff;
    --primary-black: #281a14;
    /* --contentwidth: 91.4%;
    --contentpadding: 4.2%; */
    --primary-fonts1: "Special Elite";
    --primary-fonts2: "Cormorant Garamond";
    --primary-fonts3: "Zen Old Mincho";
    --primary-fontsize40px: clamp(0.1rem, 2.8vw, 4.8rem);
    --primary-fontsize24px: clamp(0.1rem, 1.7vw, 3.2rem);
    --primary-fontsize20pxpc: clamp(0.1rem, 1.4vw, 2.4rem);
    --primary-fontsize16pxpc: clamp(0.1rem, 1.1vw, 2.0rem);
    --primary-fontsize16px: clamp(0.1rem, 4.27vw, 2.0rem);
    --primary-fontsize14px: clamp(0.1rem, 3.73vw, 1.8rem);
    --primary-fontsize12px: clamp(0.1rem, 3.2vw, 1.6rem);
    --primary-margin25pxsp: 6.7%;
    --primary-margin120pxpc: 8.34vw;
}

body{
    font-family:"Special Elite", 
        "Cormorant Garamond",
        "Zen Old Mincho",
        Arial,
        sans-serif;;
    font-style: normal;
    color: var(--primary-black);
    background-color: var(--primary-white);
    line-height: 1.5;
}

/*==========================
fadeIn
==========================*/
.fadein{
    transform: translate(0,50px);
    /* 下に５０pxズレている */
    opacity: 0;
    transition: 0.8s;
    /* ふわっと出てくるように */
}
/* htmlにもfadeinを設定 */

.fadein.animated{
    transform: translate(0,0);
    opacity: 1;
}

/* =====
opacity
===== */
.opacity {
    opacity: 0;
    filter: blur(8px);
    transition: all 1s ease;
}

.opacity.animated {
  opacity: 1;
  filter: blur(0);
}

/* =====
footer
===== */
.footer{
    background-image: url(../img/item/insta__background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 8vw 10px;
}

.footer h2{
    margin-top: 0px;
    padding-top: 60px;
    color: var(--primary-white);
    font-size: var(--primary-fontsize16px);
    line-height: 1;
    position: relative;
}

.footer h2::before{
    display: block;
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    background-color:transparent;
    border: 0.5px solid #D0D0D0;
    position: absolute;
    left: -20px;
    top: 40px;
}


.footer__txt{
    font-size: 1rem;
    margin-top: 10px;
    color: var(--primary-white);
    text-align: center;
    font-family: var(--primary-fonts3),Arial, Helvetica, sans-serif;
    text-decoration: underline;
    text-decoration-color: var(--primary-white);
}

.instagram{
    display: flex;
    gap: 4vw;
    margin-top: 40px;
    justify-content: center;
}

.instagram1,
.instagram2{
    width: 40vw;
    max-width: 150px;
}

.instagram1 img,
.instagram2 img{
    width: 100%;
    aspect-ratio: 1/1;
}

.copy{
    margin: 40px auto 0px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

/* pc */
@media screen and (min-width:769px){
    .footer{
        padding: 0px 0px 10px 0px;
    }

    .footer h2{
        padding-top: 120px;
        font-size: var(--primary-fontsize40px);
        padding-left: var(--primary-margin120pxpc);
    }
    

    .footer h2::before{
        top: 70px;
        left: calc(var(--primary-margin120pxpc) - 50px);
        width: 100px;
        height: 100px;
    }

    .footer__txt{
        font-size: 1.6rem;
        margin-top: 30px;
    }

    .instagram{
        display: flex;
        gap: 5.56vw;
        /* 80px */
        margin-top: 100px;
        justify-content: center;
    }

    .instagram1,
    .instagram2{
        width: 27.78vw;
        /* 400 */
        max-width: 500px;
    }

    .copy{
        margin: 80px auto 20px;
    }
}