@charset "UTF-8";

:root {
    /* グローバルのCSS Variablesを上書きする場合にはここに記述 */
    --section-margin-ratio:2.5;
    --font-family-headline: "Noto Serif JP", serif;
    --font-family-main: "Noto Serif JP", serif;
}

body {
  animation-name:loading;
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-delay:0.4s;
  opacity:0;
  background-color: #e7e4da;
}

@keyframes loading {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

header{
    margin-bottom:0 !important;
}

.p-gf__main{
    background-color: #f2f2f2 !important;
}

.hero  img{
    aspect-ratio:16/9;
    object-fit: cover;
}

.pic_07 img{
    aspect-ratio:766/533;
    object-fit: cover;
}

.c-vl{
    margin-top:5rem;
    margin-bottom:5rem;
}

.staff{
    line-height: 1.5em;
}

.logo_bottom{
    /*width:160px;*/
    width:10rem;
    text-align: center;
    line-height:0;
    margin-left:auto;
    margin-right:auto;
    /*margin-top:200px;
    margin-bottom:30px;*/
    margin-top:12.5rem;
    margin-bottom:1.875rem;
}

.logo_bottom img{
    max-width: 100%;
    height: auto;
}

.banner_style{
    background-color: #9e8e75 !important;
}


@media only screen and (min-device-width: 320px) and (max-width: 767px) {

    .hero  img{
        aspect-ratio: 22 / 19;
        object-fit: cover;
    }

    .pic_07 img{
        aspect-ratio:1/1;
        object-fit: cover;
    }

    .c-vl{
        /*margin-top:60px;
        margin-bottom:60px;*/
        margin-top:16vw;
        margin-bottom:16vw;

    }

    .logo_bottom{
        /*margin-top:155px;
        margin-bottom:30px;*/
        margin-top:41.33333333vw;
        margin-bottom:8vw;
    }
}