@charset "UTF-8";
/* CSS Document */
.section-gallery-main {
  display: flex;
  justify-content: center;
}
.section-gallery-main-wrap {
  margin: 12.5vw -18.61vw 8.33vw 0;
  position: relative;
}
.image-container {
  width: 36.81vw;
  height: 34.72vw;
  background: #171717;
  box-shadow: 4px 4px 10px 0px rgba(17, 17, 17, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-container img {
  width: 37.36vw;
  height: 32.43vw;
  object-fit: cover;
}
.theme-container {
  position: absolute;
  bottom: 0;
  left: -18.61vw;
}
.gallery-mv {
  display: block;
  width: 23.89vw;
  height: 6.74vw;
}
.gallery-mv-sp {
  display: none;
}
@media screen and (max-width: 770px) {
  .section-gallery-main-wrap {
    margin: 38.76vw -33.6vw 26.67vw 0;
    position: relative;
  }
  .image-container {
    width: 53.33vw;
    height: 46.93vw;
    background: #171717;
    box-shadow: 4px 4px 10px 0px rgba(17, 17, 17, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .image-container img {
    width: 49.87vw;
    height: 43.2vw;
    object-fit: cover;
  }
  .theme-container {
    position: absolute;
    bottom: 0;
    left: -33.6vw;
  }
  .gallery-mv {
    display: none;
  }
  .gallery-mv-sp {
    display: block;
    width: 47.47vw;
    height: 15.2vw;
  }
}
.section-gallery {
  margin: 0 13.89vw 8.33vw;
}
.gallery-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}
.gallery-list li {
  margin-bottom: 0.69vw;
}
.image_link1, .image_link2, .image_link3, .image_link4, .image_link5, .image_link6, .image_link7, .image_link8, .image_link9, .image_link10, .image_link11, .image_link12, .image_link13, .image_link14, .image_link15, .image_link16 {
  display: block;
  position: relative;
  text-decoration: none;
}
.image_link1 img, .image_link2 img, .image_link3 img, .image_link4 img, .image_link5 img, .image_link6 img, .image_link7 img, .image_link8 img, .image_link9 img, .image_link10 img, .image_link11 img, .image_link12 img, .image_link13 img, .image_link14 img, .image_link15 img, .image_link16 img {
  display: block;
  height: 20.83vw;
  object-fit: cover;
}
.image_link1:before, .image_link2:before, .image_link3:before, .image_link4:before, .image_link5:before, .image_link6:before, .image_link7:before, .image_link8:before, .image_link9:before, .image_link10:before, .image_link11:before, .image_link12:before, .image_link13:before, .image_link14:before, .image_link15:before, .image_link16:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  background: #111111;
  opacity: 0;
  transition: 0.3s;
}
.image_link1:after, .image_link2:after, .image_link3:after, .image_link4:after, .image_link5:after, .image_link6:after, .image_link7:after, .image_link8:after, .image_link9:after, .image_link10:after, .image_link11:after, .image_link12:after, .image_link13:after, .image_link14:after, .image_link15:after, .image_link16:after {
  display: block;
  color: #fcfffe;
  padding: 5.9vw 0;
  width: 12.5vw;
  border: solid 1px #fcfffe;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  z-index: 3;
  transition: 0.3s;
  font-size: 0.83vw;
  font-weight: 600;
}
.image_link1:after {
  content: "九谷金襴手「夜桜」";
}
.image_link2:after {
  content: "九谷\A「花詰めワイングラス」";
  white-space: pre-line;
  padding: 5.56vw 0;
}
.image_link3:after {
  content: "「水盤で泳ぐ金魚」";
}
.image_link4:after {
  content: "「アフタヌーンティースタンドに\Aフルーツ盛り」";
  white-space: pre-line;
  padding: 5.56vw 0;
}
.image_link5:after {
  content: "ノリタケカップ＆ソーサー\A「小鳥のさえずり」";
  white-space: pre-line;
  padding: 5.56vw 0;
}
.image_link6:after {
  content: "「ブルーローズ」";
}
.image_link7:after {
  content: "ビーズ盛りコラレン「桜」";
}
.image_link8:after {
  content: "九谷五彩\A「茂みのパンサーカメレオン」";
  white-space: pre-line;
  padding: 5.56vw 0;
}
.image_link9:after {
  content: "「赤絵に舞う蝶」";
}
.image_link10:after {
  content: "「人魚姫の想い」";
}
.image_link11:after {
  content: "アンティーク調\A「けしの花」";
  white-space: pre-line;
  padding: 5.56vw 0;
}
.image_link12:after {
  content: "「九谷モザイク模様のカップ」";
}
.image_link13:after {
  content: "国家試験課題の壺\A「三光鳥　羽ばたくジュビロ」";
  white-space: pre-line;
  padding: 5.56vw 0;
}
.image_link14:after {
  content: "九谷金襴手　中級課題\A「孔雀」";
  white-space: pre-line;
  padding: 5.56vw 0;
}
.image_link15:after {
  content: "コラレン「花の小箱」";
}
.image_link16:after {
  content: "九谷金襴手　中級課題\A「蝶のカップ&ソーサー」";
  white-space: pre-line;
  padding: 5.56vw 0;
}
.image_link1:hover:before, .image_link2:hover:before, .image_link3:hover:before, .image_link4:hover:before, .image_link5:hover:before, .image_link6:hover:before, .image_link7:hover:before, .image_link8:hover:before, .image_link9:hover:before, .image_link10:hover:before, .image_link11:hover:before, .image_link12:hover:before, .image_link13:hover:before, .image_link14:hover:before, .image_link15:hover:before, .image_link16:hover:before {
  opacity: 0.7;
}
.image_link1:hover:after, .image_link2:hover:after, .image_link3:hover:after, .image_link4:hover:after, .image_link5:hover:after, .image_link6:hover:after, .image_link7:hover:after, .image_link8:hover:after, .image_link9:hover:after, .image_link10:hover:after, .image_link11:hover:after, .image_link12:hover:after, .image_link13:hover:after, .image_link14:hover:after, .image_link15:hover:after, .image_link16:hover:after {
  opacity: 1;
}
@media screen and (max-width: 770px) {
  .section-gallery {
    margin: 0 6.4vw 21.33vw;
  }
  .gallery-list li {
    margin-bottom: 2.67vw;
  }
  .image_link1 img, .image_link2 img, .image_link3 img, .image_link4 img, .image_link5 img, .image_link6 img, .image_link7 img, .image_link8 img, .image_link9 img, .image_link10 img, .image_link11 img, .image_link12 img, .image_link13 img, .image_link14 img, .image_link15 img, .image_link16 img {
    display: block;
    height: 26.67vw;
    object-fit: cover;
  }
  .image_link1 img {
    width: 31.2vw;
  }
  .image_link2 img {
    width: 18.67vw;
  }
  .image_link3 img {
    width: 34.67vw;
  }
  .image_link4 img {
    width: 21.33vw;
  }
  .image_link5 img {
    width: 31.47vw;
  }
  .image_link6 img {
    width: 31.73vw;
  }
  .image_link7 img {
    width: 30.4vw;
  }
  .image_link8 img {
    width: 18.67vw;
  }
  .image_link9 img {
    width: 35.73vw;
  }
  .image_link10 img {
    width: 32vw;
  }
  .image_link11 img {
    width: 32vw;
  }
  .image_link12 img {
    width: 20.53vw;
  }
  .image_link13 img {
    width: 17.07vw;
  }
  .image_link14 img {
    width: 17.6vw;
  }
  .image_link15 img {
    width: 26.67vw;
  }
  .image_link16 img {
    width: 21.87vw;
  }
  .image_link1:before, .image_link2:before, .image_link3:before, .image_link4:before, .image_link5:before, .image_link6:before, .image_link7:before, .image_link8:before, .image_link9:before, .image_link10:before, .image_link11:before, .image_link12:before, .image_link13:before, .image_link14:before, .image_link15:before, .image_link16:before {
    display: none;
  }
  .image_link1:after, .image_link2:after, .image_link3:after, .image_link4:after, .image_link5:after, .image_link6:after, .image_link7:after, .image_link8:after, .image_link9:after, .image_link10:after, .image_link11:after, .image_link12:after, .image_link13:after, .image_link14:after, .image_link15:after, .image_link16:after {
    display: none;
  }
  .image_link1:hover:before, .image_link2:hover:before, .image_link3:hover:before, .image_link4:hover:before, .image_link5:hover:before, .image_link6:hover:before, .image_link7:hover:before, .image_link8:hover:before, .image_link9:hover:before, .image_link10:hover:before, .image_link11:hover:before, .image_link12:hover:before, .image_link13:hover:before, .image_link14:hover:before, .image_link15:hover:before, .image_link16:hover:before {
    display: none;
  }
  .image_link1:hover:after, .image_link2:hover:after, .image_link3:hover:after, .image_link4:hover:after, .image_link5:hover:after, .image_link6:hover:after, .image_link7:hover:after, .image_link8:hover:after, .image_link9:hover:after, .image_link10:hover:after, .image_link11:hover:after, .image_link12:hover:after, .image_link13:hover:after, .image_link14:hover:after, .image_link15:hover:after, .image_link16:hover:after {
    display: none;
  }
}