@font-face{
    font-family: “Quicksand”;
    font-display: swap;
    src:
    url("/NotoSansJP/NotoSansJP-VariableFont_wght.eot")format("eot"),
    url("/NotoSansJP/NotoSansJP-VariableFont_wght.ttf")format("ttf"),
    url("/NotoSansJP/NotoSansJP-VariableFont_wght.woff")format("woff"),
    url("/NotoSansJP/NotoSansJP-VariableFont_wght.woff2")format("woff2"),
}



:root{

    --black:#333;
    --white:#FFF;
    --gray:#4C4948;
    --yellow:#D4AF37;
    --lightgray:#b3a9a6;

}



/* toggleメニューの設定 */
.open{
    transform:translateX(-800px);
}

#toggle_btn{

    display:none;
}


body{
    color:var(--black);
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
}

a{color:var(--black);text-decoration: none;}

#loading{
    background-color:var(--lightgray);
    position:fixed;
    inset:0;
    z-index:999;
    display:grid;
    place-items:center;

}

#loading p{
    font-weight:bold;
    font-size:3rem;
    color:var(--white);
}

#loading-screen{
    background: var(--gray);
    position:fixed;
    inset:0;
    z-index:998;
    translate:0 100vh;

}


header{
    display:grid;
    grid-template-columns: 15rem  auto 10rem;
    align-items:center;
    background:var(--gray);
    color:var(--white);
   }

#logo{margin-left:1rem; font-size:1.5rem;}

nav{text-align:right;}
nav ul{display:inline-flex;list-style:none;
}

nav ul li a{margin:0 1rem; color:var(--white)}
nav ul li a:hover{color:var(--lightgray)}
#btn_contact{

    background-color: var(--yellow);
    padding:2rem;
}

#btn_contact a{
    color:var(--white);
}

#btn_contact:hover{
    color:var(--white);
    background-color: var(--lightgray);

}

#mainvisual{
    background-image: url(../img/dining-table.png);
    background-size:cover;
    height:30rem;
}

#catch{
    width:6em;
    padding:3rem;
    font-size:3rem;
    }

section{
    display:flex;
    justify-content:space-between;
    margin:3rem 0;
    padding:0 10%;
    overflow: hidden;

}

h2{
    font-size:2rem;
}

 .con01 img{
    width:100%;height:auto;
}

.con03 img{
    width:120%;
    height:120%;
    object-fit: cover;
    margin-left:-25%;
}

.con_text,.con_image{
    width:50%;
}

 .con_text{
    padding:2rem;
    padding-top:4rem;
} 


.con02{
    background-image: url(../img/dog.png);
    background-size:cover;
    background-position-y:20%;
    height:18rem;
    padding:2rem;
    margin:2rem 10%;
}
.con02{
    color:var(--white);
    padding-top:4rem;
    text-shadow:var(--gray)1px 1px 5px ;

}


.con02 .btn_next{
    background:var(--white);
    text-shadow:none;

}
.con02 .btn_next a{
     color:var(--gray)
    }

.btn_next{
    background:var(--gray);
    padding:0.5rem 3rem;
    display:inline-block;
    margin:2rem 0;
}
.btn_next a{
    color:var(--white)
}
.btn_next:hover{
    color:var(--white);
    background:var(--yellow);
}

section.con04{
    background:var(--gray);
    flex-direction: column;
    text-align:center;
    padding: 0;

}

.con04 h2{
    color:var(--white);
    font-weight:bold;
    padding:2rem;
    }

    .gallery {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    margin-bottom:0;
    overflow: hidden;
    }

    .gallery img{
     width:100%;aspect-ratio: 1;object-fit:cover;

    }



.con04{
margin-bottom:0;
}

.con04 h2{
margin:2rem;
}

.btn_viewmore a{
    background:var(--white);
    color:var(--gray);
    display:inline-block;
    padding:0.5rem 3rem;
    margin:2rem;

}
.btn_viewmore a:hover{
    background:var(--lightgray);
    color:var(--white);

}

footer{
    background: var(--gray);
    color:var(--white);
    text-align:center;
    padding-bottom:2rem;
}



.right{
transform:translate(20rem, 0 );
opacity:0;
}

.right.show{
transform:translate(0,0);
opacity:1;
transition:2s;
transition-delay:4s;
}


.left{
    transform:translate(-20rem, 0 );
    opacity:0;
}

.left.show{
    transform:translate(0,0);
    opacity:1;
    transition:2s;
    transition-delay:1s;
    }

.appear{
    opacity:0;
    transition:2s;
    transition-delay:1s;
   }

.appear.show{
    opacity:1;
    transition:2s;
    transition-delay:1s;
}

.up {
transform:translate(0,10rem);
opacity:0;
}
.up.show{
    transform:translate(0,0);
    opacity:1;
    transition:1s;
}


.gallery .up.show:nth-child(1){
    transition-delay:0;
}

.gallery .up.show:nth-child(2){
    transition-delay:0.3s;
}

.gallery .up.show:nth-child(3){
    transition-delay:0.6s;
}

.gallery .up.show:nth-child(4){
    transition-delay:0.9s;
}

.gallery .up.show:nth-child(5){
    transition-delay:1.2s;
}