@charset "utf-8";
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 16px;
}
body{
    overflow-x: hidden; /*スクロールバーを隠す*/
}
a{
    display: block;
    text-decoration: none;
}
li{
    text-decoration: none;
}
ul {
    list-style: none;
}
body{
    font-size:16px;
    line-height: 1.7;
    letter-spacing: .1rem;
    color:rgba(62,58,57,1);
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.fadein {
    opacity : 0;
    transform: translateY(20px);
    transition: all 1s;
}

/* @media screen and (max-width: 480px){
    body{
        line-height: 1.5;
        letter-spacing: 0;
    }    
} */
/* 横幅が1500px以上の時は内側は1400px以上にはならない */
/* @media(min-width:1500px){
    .area01{
        max-width: 1400px;
    }
} */


/* ↓↓↓ ロゴフェードイン ↓↓↓ */
.logo_fadein{
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999;
}
.logo_fadein p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}
/* ↑↑↑ ロゴフェードイン ↑↑↑ */



/* .header-nav{
    width: 90vw;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    position: absolute;

} */
/* .header-logo{
    display: flex;
    align-items: center;
} */
.header-logo h1{
    margin-top: 0.5rem;
}
.header-logo p{
    margin-left: 1.5rem;
    font-size: 1.1rem;
    /* font-weight: 500; */
    letter-spacing: 0;
}
/* .header-nav-in{
    display: flex;
    text-decoration: none;
    justify-content: space-between;
}
.header-nav-in li{
    margin-left: 2rem;
    letter-spacing: 0;
} */
.header-nav-in li a{
    color: #fff;
}

/* 書き直し */
.header-nav{
    width: 90vw;
    display: grid;
    position: absolute;
    grid-template-columns: 300px 1fr;
    margin: 0 5vw;
    align-items: center;
    text-align: center;
    /* background-color: #555; */
}

.header-nav-in{
    /* width: 80%; */
    margin: 0px auto;
    display: grid;
    grid-auto-flow: column;
    list-style-type: none;
    /* font-weight: bold; */
}
.header-nav-in li{
    font-size: 0.9rem;
    font-weight: 500;
}
.header-nav-in li a{
    color: #fff;
}
.header-nav-in{
    /* background-color: #555; */
}
#home{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
}





/* top heroスライドショー */
.slide {
    position: relative;
    width: 100vw;
    height:100vh;
    z-index: -1;
}
.top-hero01,.top-hero02,.top-hero03,.top-hero04,.top-hero05{
    position: absolute;
    width: 100vw;
    height:100vh;
    opacity: 0;
    animation :slideshow 30s linear infinite;
    background-size: cover;
    background-repeat: no-repeat;
}


.top-hero01{
    background-image: url(../image/top01.jpg);
    background-position: center;
}
.top-hero02{
    background-image: url(../image/top02.jpg);
    background-position: center;
}
.top-hero03{
    background-image: url(../image/top03.jpg);
    background-position: top;
}
.top-hero04{
    background-image: url(../image/top04.jpg);
    background-position: top;
}
.top-hero05{
    background-image: url(../image/top05.jpg);
    background-position: center;
}





@keyframes slideshow {
    /* 0%{
      opacity: 0;
    }
    5%{
      opacity: 1;
    }
    23%{
      opacity: 1
    }
    33%{
      opacity: 0;
    }
    100%{
      opacity: 0;
    } */


/* ここから復活↓ */
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    26%{
        opacity: 1
    }
    30%{
        opacity: 1
    }
    33%{
        opacity: 0;
    }
    100%{
        opacity: 0;   
    }
}
/* ここから↑ */

/* ここから復活↓ */
.top-hero02{
    /* animation-delay: 9s; */
    animation-delay: 9s;
}
.top-hero03{
    /* animation-delay: 14s; */
    animation-delay: 15s;
}
.top-hero04{
    /* animation-delay: 19s; */
    animation-delay: 20s;
}
.top-hero05{
    /* animation-delay: 24s; */
    animation-delay: 25s;
}
/* ここから↑ */

/* 富士山熔岩とは */
.top-wrapper01{
    background-image: url(../image/top07.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 10rem 1rem;
}
.top-art{
    /* padding: 8rem 1rem; */
    max-width: 1000px;
    margin: 0 auto;
}
.top-grid01 ,.top-grid02{
    display: grid;
    grid-template-columns: 60% 38%;
    grid-column-gap: 2%;
    /* place-items: center; */
    align-items: center;
    color: #fff;
    padding: 0 2rem;
}
.top-grid02{
    padding-top: 5rem;
}
.top-grid02 img{
    width: 100%;
}
.top-grid01 h3 , .top-grid02 h3{
    font-weight: 500;
    font-size: 1.5rem;
    padding: 1rem 0 2rem 0;
}
.top-text01{
    padding: 1rem 1.5rem;
}
.top-text02{
    padding: 1rem 6rem 1rem 0;
}
.top-text02 p{
    margin-top: 2rem;
}
.top-abo-img{
    padding: 1rem;
}
.top-abo-img img:first-of-type{
    margin: 4rem 0 3rem 0;
}

/* 富士山熔岩へのこだわり */
.top-wrapper02{
    background-image: url(../image/back04.jpg);
    width: 100vw;
    min-height: 55vh;
    /* min-height: 70vh; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.top-wrapper02 h3{
    font-weight: 500;
    font-size: 1.5rem;
    /* padding: 1rem 0 2rem 0; */
    color: #fff;
    display: inline-block;
    /* top:50%; */
    margin-top: 2rem;
}
.co-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    place-items: center;
    min-height: 55vh;
    
}
.pc-only{
    display: block;
  }
  .sp-only{
    display: none;
  }
.co_ho:hover , .item_ho:hover{
    opacity: 0.6;
    transition-duration: 0.3s;
  
}

/* .youtube iframe{
    width: 500px;
    height: 300px;
} */
/* 取り扱い商品 */
.top-wrapper03{
    padding: 8rem 1rem 5rem 1rem;
    background-image: url(../image/back01.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.top-item{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.top-item h3{
    font-weight: 500;
    font-size: 1.5rem;
    padding: 1rem 0 4rem 0;
}
.top-item-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 5%;
}
.top-item-grid h4{
    font-weight: 500;
    font-size: 1.25rem;
}
.top-item-grid img{
    width: 100%;
}
.top-item-cap{
    background-color: #fff;
}
.top-item-grid p{
    text-align: left;
    padding: 0.75rem;
    letter-spacing: 0;
    font-size: 0.9rem;
}
.top-item a{
    display: inline-block;
    color: #fff;
    background-color: rgb(114,113,113);
    padding: 1rem 2rem;
    margin: 3rem auto;
}

/* テイクアウト */
.top-wrapper04{
    padding: 5rem 1rem;
    background-image: url(../image/back02.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.top-take-grid{
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 5%;
    align-items: center;
}
.top-take-grid div{
    text-align: center;
    padding: 1rem;
}
.top-take-grid div h3{
    font-weight: 500;
    font-size: 1.5rem;
    padding-bottom: 2rem;
    color: rgb(64,34,15);
}
.top-take-grid div p{
    text-align: left;
}
.top-take-grid a{
    display: inline-block;
    color: #fff;
    margin: 2rem 0;
    padding: 1rem 2rem;
    background-color: rgb(103,57,27);
}
.top-meat{
    width: 100%;
}


.hamburger , .globalMenuSp{
    display: none;
}


.youtube {
    position: relative;
    width: 85%;
    padding-top: 56.25%;
  }
  .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

  .sp{
    display: none;
  }
  .spadd{
      margin-top: 0.5rem;
  }