/* *******************
共通部分
******************** */
body{
    width: 100%;
    font-family: "Noto Sans", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: #333333;
}

.en{
  font-family: "Parisienne", cursive;
  font-weight: 400;
}

.flex{
    display: flex;
}

.grid{
    display: grid;
}

a{
    text-decoration: none;
    color: #000;
}

img{
    max-width: 100%;
    display: block;
}

h2{
    font-size: 3rem;
    color: #8c7a66;
    text-align: center;
    font-weight: 400;
    font-family: "Parisienne", cursive;
}

.title{
    text-align: center;
    display: block;
    margin-bottom: 29px;
    font-size: 0.75rem;
}

h3{
    font-weight: 400;
}

main{
    max-width: 1110px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn{
    border: solid 1px #8c7a66;
    color: #8c7a66;
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 15px 75px;
}
/* 
.pc{
    display: block !important;
}

.sp{
    display: none !important;
} */

/* *******************
ヘッダー
******************** */
header{
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}

header .header-title{
    width: 75px;
    text-align: left;
    padding: 10px 0;
}

.mv{
    background-image: url(../img/fv.jpg);
    background-size: cover;
    aspect-ratio: 144 / 59;
    position: relative;
}

.mv .mv-item{
    position: absolute;
    top: 65%;
    left: 15%;
}

.mv .big-text{
    font-size: 6vw;
    color: #4A4949;
}

.mv .sub-text{
    font-size: 1.11vw;
    color: #4A4949;
    text-align: right;
}

nav{
    width: 30%;
}

ul{
    justify-content: space-between;
    gap: 10px;
}

li{
    list-style: none;
    font-size: 1rem;
}

li a{
    color: #8c7a66;
}

/* *******************
コンセプト
******************** */
.about{
   margin: 68px 0 100px;
}

.about .title,
.access .title{
    margin-top: -1em;
}

.about .flex{
    align-items: center;
    gap: 40px;
}

.about .r-box h2{
    margin: 12px 0 25px;
    color: #8c7a66;
    font-weight: 400;
    font-size: 2rem;
}

/* *******************
ギャラリー
******************** */
.gallery{
    margin: 68px 0 100px;
}

.gallery .title,
.blog .title{
    margin-top: 0.5em;
}

.gallery .scroll-infinity img{
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.scroll-infinity__list{
    padding-left: 10px;
}
/* スライドショー設定　↓　ここから */
@keyframes infinity-scroll-left{
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
    .scroll-infinity__wrap{
      display: flex;
      overflow: hidden;
    }
    .scroll-infinity__list{
      display: flex;
      list-style: none;
      padding: 5px;
    }
    .scroll-infinity__list--left{
      animation: infinity-scroll-left 80s infinite linear 0.5s both;
    }
    .scroll-infinity__item{
      width: calc(100vw / 6);
    }
    .scroll-infinity__item>img{
      width: 100%;
    }
/* スライドショー設定　↑　ここまでここまで */

/* ホバーここから　↓ */
.hover-item{
    transition: all 0.2s;
}

.hover-item:hover{
  transform: translateY(-20px);
  box-shadow: 0 3px 10px 0 #414040;
  opacity: 0.8;
  cursor: pointer;
}
/*  ホバーここまで　↑*/

/* *******************
ブログ
******************** */
.blog .grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 54px 30px;
    font-size: 0.85rem;
}

.blog h3{
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.blog p:last-of-type{
    text-align: right;
    font-size: 0.75rem;
}

/* *******************
アクセス
******************** */
.details{
    width: 100%;
}
.access{
    margin: 80px 0;
}

.access .flex{
    gap: 50px;
    align-items: center;
}

.access dl{
    padding: 2.08% 2.7%;
    border-bottom: solid 1px #DDDDDD;
}

.access dt{
    min-width: 5em;
}

#map{
    width: 50%;
    aspect-ratio: 1;
}

.btn{
    margin-top: 30px;
}

.btn::after{
    content: url(../img/icon_arrow-right.png);
    right: 5px;
    right: 5px;
    position: relative;
    top: -1px;
    left: 15px;
}

/* *******************
フッター
******************** */
footer{
    background-image: url(../img/footer-bg.jpg);
    background-repeat: repeat;
    text-align: center;
    margin-top: 50px;
    padding: 70px 0 30px;
}

footer .logo{
    width: 75px;
    margin: 0 auto 50px;
}

/********************************
アニメーション 
 *******************************/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    /* 何秒でフェードインが完了するか */
    transition: all 1.5s;
    /* 左から */
  &.fadein-left{
      transform: translate(-30px,0);
  }
  /* 右から */
  &.fadein-right{
      transform: translate(30px,0);
  }
  /* 上から */
  &.fadein-up{
      transform: translate(0,-30px);
  }
  /* 下から */
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  /* その場で */
  &.fadein-sonoba{
    transform: translate(0,0px);
}
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}

/* *******************
レスポンシブ
******************** */
@media (max-width: 768px){
    header{
        width: 100%;
    }

    header .header-title{
        width: 75px;
        padding: 10px 0;
    }


    .mv{
        background-image: url(../img/fv-sp.jpg);
        background-size: cover;
        aspect-ratio: 125  / 114;
        position: relative;
    }

    nav{
        width: fit-content;
        padding: 0 5px;
    }

    li{
        font-size: 0.5rem;
    }

    .about .flex{
        flex-direction: column;
        align-items: flex-start;
    }

    .about img{
        width: 100%;
    }

    .about .r-box{
        padding-left: 0;
        margin-top: 10%;
    }

    h2{
        font-size: 1.5rem;
    }

    .blog .grid{
        grid-template-columns: 1fr;
    }

    .blog img{
        width: 100%;
    }
    
    #map{
        width: 100%;
        height: 35.78vh;
        margin: 50px 0;
    }

    .details{
        margin: 30px 0;
        height: auto;
    }

    .access .flex{
        display: block;
        align-items: center;
    }

    .access dl{
        padding: 1% 0;
    }

    .btn{
        width: 100%;
        text-align: center;
    }

    footer{
        padding: 20px 0 15px;
    }

    footer .logo{
        width: 75px;
    }

    footer small{
        font-size: 40%;
    }
/*     
    .pc{
        display: none !important;
    }

    .sp{
        display: block !important;
    } */

}