@charset "UTF-8";
/*******************************************
「★PC版 CSS★」
*******************************************/
@media all and (min-width: 751px) {
  #gallery {
    height: 900px;
    box-sizing: border-box;
    padding: 168px;
    margin: -169px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    clip-path: polygon(0 168px, 100% 0, 100% calc(100% - 168px), 0 100%);
  }
  #gallery::before, #gallery::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: url(../images/top_vis_btm.png) no-repeat bottom center;
  }
  #gallery::before {
    top: -16px;
    right: 0;
    transform: rotate(180deg);
  }
  #gallery::after {
    bottom: -2px;
    left: 0;
  }
  #gallery .txt {
    width: 486px;
    margin-top: 80px;
    filter: drop-shadow(#000C19 0 4px 16px);
  }
  #gallery .txt p {
    margin: 8px 0 40px;
    text-align: justify;
    font-size: 18px;
    color: #fff;
  }
  #gallery .txt ul {
    margin: 0;
    padding: 0;
  }
  #gallery .txt ul li a {
    line-height: 0;
    margin-bottom: 8px;
  }
  #gallery .txt ul li a img {
    width: 100%;
  }
  #gallery .main_gallery {
    display: flex;
    width: fit-content;
    box-shadow: #000C19 0 0 24px;
    margin-top: -330px;
  }
  #gallery .main_gallery ul {
    margin: 0;
    padding: 0;
  }
  #gallery .main_gallery ul * {
    line-height: 0;
  }
  #gallery .main_gallery ul li img {
    border: #1E3651 3px solid;
    box-sizing: border-box;
    height: 320px;
    width: 480px;
  }
  #gallery .main_gallery ul:nth-of-type(2) {
    margin-top: -130px;
  }
  #gallery .bg {
    position: absolute;
    transform: rotate(-5deg);
    top: 174px;
    left: -80px;
    transform-origin: top left;
    z-index: -1;
  }
  #gallery .bg ul {
    margin: 0;
    padding: 0;
  }
  #gallery .bg ul * {
    line-height: 0;
  }
  #gallery .bg ul {
    display: flex;
    width: fit-content;
  }
  #gallery .bg ul li img {
    width: 360px;
    height: 240px;
  }
  #gallery .bg ul {
    animation: gallery-bg 30s infinite linear both;
  }
  #gallery .bg ul:nth-of-type(even) {
    animation-direction: reverse;
  }
  #gallery .bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1E3651;
    opacity: 0.7;
  }
  @keyframes gallery-bg {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  #gallery .txt a {
    transition: 0.2s;
  }
  #gallery .txt a:hover {
    transform: translateX(8px);
  }
}
/*******************************************
「★SP版 CSS★」
*******************************************/
@media all and (max-width: 750px) {
  #gallery {
    height: 1544px;
    box-sizing: border-box;
    margin: -96px 0;
    padding: 144px 0 0;
    position: relative;
    clip-path: polygon(0 65px, 100% 0, 100% calc(100% - 65px), 0 100%);
    z-index: 1;
  }
  #gallery::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: url(../images/top_vis_btm.png) no-repeat bottom left;
  }
  #gallery::after {
    bottom: -2px;
    left: 0;
  }
  #gallery .txt {
    width: 690px;
    margin: -48px auto 0;
    filter: drop-shadow(#000C19 0 4px 16px);
    position: relative;
  }
  #gallery .txt > img {
    width: 102%;
  }
  #gallery .txt p {
    margin: 8px 0 32px;
    text-align: justify;
    font-size: 28px;
    color: #fff;
  }
  #gallery .txt ul {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -980px;
    left: 0;
  }
  #gallery .txt ul li a {
    line-height: 0;
    margin-bottom: 16px;
  }
  #gallery .txt ul li a img {
    width: 100%;
  }
  #gallery .main_gallery {
    width: fit-content;
    box-shadow: #000C19 0 0 56px;
    margin-left: -440px;
  }
  #gallery .main_gallery ul {
    margin: 0;
    padding: 0;
    display: flex;
    margin-left: 60px;
    background: #1E3651;
  }
  #gallery .main_gallery ul * {
    line-height: 0;
  }
  #gallery .main_gallery ul li img {
    border: #012 solid;
    border-width: 4px 0;
    box-sizing: border-box;
    width: 540px;
    padding: 0 16px;
    background: #012;
  }
  #gallery .main_gallery ul:nth-of-type(even) {
    margin-left: -50px;
  }
  #gallery .bg {
    position: absolute;
    transform: rotate(-5deg);
    top: 108px;
    left: -160px;
    transform-origin: top left;
    z-index: -1;
  }
  #gallery .bg ul {
    margin: 0;
    padding: 0;
  }
  #gallery .bg ul * {
    line-height: 0;
  }
  #gallery .bg ul {
    display: flex;
    width: fit-content;
  }
  #gallery .bg ul li img {
    width: 360px;
    height: 240px;
  }
  #gallery .bg ul {
    animation: gallery-bg infinite linear both;
  }
  #gallery .bg ul:nth-of-type(even) {
    animation-direction: reverse;
  }
  #gallery .bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#012, #1E3651 24px);
    opacity: 0.7;
  }
  @keyframes gallery-bg {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}/*# sourceMappingURL=gallery.css.map */