@charset "UTF-8";
/* CSS Document */
.section_gallery {
  padding: 106px 80px;
}

.section_gallery img{
  width: 100%;
  height: auto;
}
.section_gallery__category{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1.3;
  gap: 22px 0;
}

.section_gallery__category a {
  text-decoration: none;
  color: #4A4A4A;
}

.section_gallery li {
  text-align: center;
  list-style: none;
}

.section_gallery__category h1 {
  width: 80px;
}

.section_gallery__category___list {
  display: flex;
  gap: 1rem;
  width: calc(100% - 80px);
}

.section_gallery__category___list li {
    line-height: 1;
    border: 1px solid #ccc;
    padding: 4px 19px;
}

.section_gallery__menu h1 {
  padding: 70px 0 0 0;
}
.section_gallery__menu h2 {
  font-weight: 400;
  padding-top: 30px;
}

.fashion {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  line-height: 0;
}

.fashion li {
  width: calc((100% - 30px) / 4);
}

.pr {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  line-height: 0;
}


.pr li {
  width: calc((100% - 30px) / 4);
}

.pr .pr_egg {
  width: 78%;
  margin: 0 auto;
}

.pr_yoriai {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 50px 0;
}

.pr_yoriai li {
  width: calc((100% - 10px) / 2);
  line-height: 0;
}

.pr_buss {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  line-height: 0;
}

.pr_buss li {
  width: calc((100% - 10px) / 2);
}

.other_drone {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}


.other_drone img {
  object-fit: cover;
  height: 100%;
}

.other_drone li {
  width: calc((100% - 10px) / 2 + 5%);
}

.other_drone li:first-of-type,
.other_drone li:last-of-type{
  width: calc((100% - 10px) / 2 - 5%);
}

.other_film {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.other_beach {
  width: 100%;
  padding-bottom: 2px;
}

.other_film {
  display: flex;
  gap: 10px;
}

.other_film li {
  display: flex;
  gap: 10px;
  width: calc((100% - 10px) / 3);
  flex-wrap: wrap;
  flex-direction: column;
}

.other_film li div {
  line-height: 0;
  height: fit-content;
}


.other_film li:last-of-type {
  flex: 1;
  flex-direction: initial;
}
.other_film__half {
  width: calc((100% - 10px) / 2);
}

.other_film li .other_film__height {
  flex: 1;
}

.other_film__height img {
  height: 100%;
}

.other_film img {
  object-fit: cover;
}

.other_orignal {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
margin-bottom: 20px;
}

.other_orignal img {
  height: 100%;
  object-fit: cover;
}

.other_orignal li:nth-of-type(1) { grid-area: 1 / 1 / 5 / 4; }
.other_orignal li:nth-of-type(2)  { grid-area: 1 / 4 / 3 / 8; }
.other_orignal li:nth-of-type(3)  { grid-area: 3 / 4 / 5 / 8; }




/*sp*/
@media(max-width: 1160px) {
  .section_gallery {
    padding: 60px 20px;
    font-size: 1.6rem;
}
  .section_gallery__category h1 {
    width: 60px;
}
  .section_gallery__category {
    gap:11px 0;
  }
  
  .section_gallery__category___list{
    font-size: 1.3rem;
  }
  
  .section_gallery__category___list li {
    padding: 4px 12px;
  }
  
  .section_gallery__menu h1 {
    padding: 40px 0 0 0;
}
  .section_gallery__menu h2 {
    font-weight: 400;
    padding-top: 10px;
}
  .fashion {
    gap: 5px;
}  
  .fashion li {
    width: calc((100% - 5px) / 2);
}
  .pr {
    gap: 5px;
  }
  .pr li {
    width: calc((100% - 5px) / 2);
}
  .pr .pr_egg {
    width: 100%;
}
  .pr_yoriai {
    gap: 5px;
    margin: 20px 0;
}

  .pr_yoriai li {
    width: calc((100% - 5px) / 2);
}

  .pr_buss {
    gap: 5px;
    margin-bottom: 0;
}

  .pr_buss li {
    width: calc((100% - 5px) / 2);
}
  .other_drone {
    gap: 5px;
}

  .other_drone li {
    width: calc((100% - 5px) / 2 + 5%);
}

  .other_drone li:first-of-type,
  .other_drone li:last-of-type{
    width: calc((100% - 5px) / 2 - 5%);
}

  .other_film {
    gap: 5px;
}


  .other_film {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
  
  .other_film li {
    gap: 5px;
}



  .other_orignal {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}

.remodal img {
  width: 100%;
}