@charset "utf-8";


header {
  width: 100%;
  height: 10%;
  background-color: #e8b5b5;
  position: fixed;
  z-index: 5;
  box-shadow: 0px -5px 10px rgb(96 73 73);
}

header .header_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 10%;
  position: relative;
}

header .header_content .ham_btn {
  margin-left: 25px;
  cursor: pointer;
}

header .header_content div:last-child {
  z-index: 5;
}

header a,
header .ham_btn {
  transition: .3s;
}

header a:hover,
header .ham_btn:hover {
  opacity: 0.7;
}

.gallery_area {
  width: 60%;
  margin: 0 auto;
  background-color: #ffdfd3;
  padding: 15px;
}

.gallery_area_upper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.gallery_area_lower {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.gallery_area img {
  width: 100%;
}

.gallery_image_01 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.gallery_image_02 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.gallery_image_03 {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

.gallery_image_04 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.gallery_image_05 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.gallery_image_06 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

.gallery_image_07 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
}

.gallery_image_08 {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
}

.gallery_image_09 {
  grid-column: 7 / 10;
  grid-row: 1 / 2;
}

.gallery_image_10 {
  grid-column: 10 / 13;
  grid-row: 1 / 2;
}

.gallery_image_11 {
  grid-column: 13 / 17;
  grid-row: 1 / 3;
}

.gallery_image_12 {
  grid-column: 7 / 13;
  grid-row: 2 / 3;
}

.gallery_image_13 {
  grid-column: 1 / 17;
  grid-row: 3 / 5;
}