body{
  max-width: 100vw;
}

/* header */
header{
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: #ffffff96;
}

.header-inner{
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 2rem;
  margin-left: 10px;
}

button{
  display: none;
}

.header-inner ul{
  display: flex;
  gap: 10px;
  margin-right: 10px;
}
/* header */

/* section全体 */
section{
  margin-top: 100px;
}
h2{
  margin-left: 50px;
  margin-bottom: 50px;
}

/* fv */

#fv{
  margin-top: 80px;
  height: calc(100vh - 80px);
  position: relative;
}

#fv .textarea{
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 4;
}

#fv h1,
#fv p{
  color: #ffffff;
}

h1{
  font-size: 3rem;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/* fv */

/* concept */
#concept .haikei{
  background-image: url(../img/naikan.jpg);
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
  clip-path: polygon(45% 0,100% 0,100% 100%,20% 100%);
  width: 100vw;
  height: 500px;
}

#concept{
  position: relative;
}

#concept .textarea{
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 10;
  width: 50vw;
}
#concept h2{
  margin-left: 0;
}
/* concept */

/* shopimg */

#shopimg h2{
  margin-left: 50px;
}
#shopimg img{
  width: 100%;
  height: 100%;
}

.gridcontainer{
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr  1fr 1fr 1fr 1fr;
  grid-template-rows: 2fr 2fr 1fr 1fr;
  gap: 10px;
}

#shopimg .item1{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}

#shopimg .item2{
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
  font-size: 10vw;
}

#shopimg .item3{
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
}

#shopimg .item4{
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 3;
}

#shopimg .item5{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 5;
}

#shopimg .item6{
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 5;
}

#shopimg .item7{
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

#shopimg .item8{
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 4;
  grid-row-end: 5;
}
/* shopimg */

/* menu */
.menu-box{
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
dl{
  border: 1px solid gold;
  text-align: center;
}

dl img{
  width: 400px;
  margin-bottom: 10px;
}

/* menu */

/* access */
.accessinfo{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* access */

/* footer */
footer{
  background-color: gold;
  text-align: center;
  margin-top: 100px;
  padding-bottom: 50px;
}

footer ul{
  padding: 50px;
}

footer li{
  margin-top: 50px;
}


@media(max-width:800px){
  .header-site-menu ul{
    flex-direction: column;
    gap: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .header-inner{
    position: relative;
  }
 .header-site-menu{
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  z-index: 100;
  display: none;
  }

.header-site-menu.is-show{
  display: block;

}

.toggle-menu-button {
  display: block;
  position: relative;
  width: 40px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
}

.toggle-menu-button::before,
.toggle-menu-button::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;
  transition: transform 0.3s;
}

.toggle-menu-button::before {
  top: 0;
}

.toggle-menu-button::after {
  bottom: 0;
}

.toggle-menu-button span {
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 4px;
  background-color: #000;
  transform: translateY(-50%);
  transition: opacity 0.3s;
}
  /* ここでバッテンの形にする */
.toggle-menu-button.is-active::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.toggle-menu-button.is-active::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.toggle-menu-button.is-active span {
  opacity: 0;
}


  .accessinfo{
    flex-direction: column;
  }
}