@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
@import url(common.css);

/* 画像のドラッグアンドドロップ禁止 */
/* img {
  pointer-events: none;
} */

/* work */
main section.whitebeer,
section.takoran,
section.boota,
section.others {
  background-color: #c7af73;
}

main article section.whitebeer h1 img:hover {
  transform: rotate(10deg);
}

/* 1.whitebear */
main section.whitebeer h1 {
  position: relative;
  top: 50px;
  /* z-index: 5px; */
  /* left: -45px; */
  padding-bottom: 60px;
}

main section.whitebeer h2 {
  font-family: "Righteous", cursive;
  text-align: left;
  font-size: 28px;
  padding-left: 15px;
  padding-top: 30px;
  padding-bottom: 37px;
}

main section.whitebeer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 30px;
  padding-bottom: 50px;
}

/* 2.TAKORAN AND IKAPON */
main section.takoran h2 {
  font-family: "Righteous", cursive;
  padding-left: 15px;
  text-align: left;
  font-size: 28px;
  padding-top: 100px;
  padding-bottom: 37px;
}

main section.takoran ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 30px;
  padding-bottom: 50px;
}

/* 3.BOOTA */
main section.boota h2 {
  font-family: "Righteous", cursive;
  padding-left: 15px;
  text-align: left;
  font-size: 28px;
  padding-top: 100px;
  padding-bottom: 37px;
}

main section.boota ul.gridgarelly {
  display: grid;
  gap: 30px;
}

main section.boota ul.gridgarelly .item01 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
main section.boota ul.gridgarelly .item02 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}
main section.boota ul.gridgarelly .item03 {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
}
main section.boota ul.gridgarelly .item04 {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}
main section.boota ul.gridgarelly .item05 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
main section.boota ul.gridgarelly .item06 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}
main section.boota ul.gridgarelly .item07 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

/* 4.Othsers */
main section.others h2 {
  font-family: "Righteous", cursive;
  padding-left: 15px;
  text-align: left;
  font-size: 28px;
  padding-top: 150px;
  padding-bottom: 37px;
}

main section.others ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 30px;
  padding-bottom: 100px;
}

/*--------------
  レスポンシブ
--------------*/
@media (max-width: 767px) {
  /* 幅:auto */
  /* main section.whitebeer ul li {
    max-width: 767px;
    flex-basis: 100%;
  } */
  main section.boota ul.gridgarelly {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 30px;
    padding-bottom: 30px;
  }

  /* @media (max-width: 575px) { */
  /* main section.boota ul li {
    max-width: 575px;
    flex-basis: 100%;
  } */
  main section.others ul li a video.vsub {
    width: 100%;
    max-width: 540px;
  }
}