@charset "UTF-8";
:root {
  --inner-scale: 1;
  --vw-base: calc(1440 / var(--inner-scale));
  --inner: 1280;
  --inner-1305: 1305;
  --fz-ratio: 1; /* font-size倍率 */
}
@media screen and (max-width: 1024px) {
  :root {
    --inner-scale: calc(0.9 / (1280 / 1440));
    --fz-ratio: 1.57;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --vw-base: 375;
    --inner-scale: 1;
    --inner: 343;
    --fz-ratio: 1;
  }
}

/* ===============================
  姫路エービーシー商会フェア2021
=============================== */
.abcfair__hero {
  background: url(../img/abcfair/abcfair_hero.jpg) no-repeat center center/cover;
}
.abcfair__hero .abcfair__hero--ja {
  margin-top: 1.4em;
}

/*------------------------------
hank-you 
------------------------------*/
.thank-you {
  padding-top: min( 155 * 100vw / var(--vw-base) , 155/var(--vw-base) * 1440px );
}
@media (max-width: 767px) {
  .thank-you {
    padding-top: min( 100 * 100vw / var(--vw-base) , 100/var(--vw-base) * 1440px );
  }
}

.thank-you__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 767px) {
  .thank-you__wrapper {
    display: block;
  }
}

.thank-you__body {
  width: calc(500 / var(--inner) * 100%);
}
@media (max-width: 767px) {
  .thank-you__body {
    width: 100%;
  }
}

.thank-you__message {
  font-size: min( 16 * 100vw / var(--vw-base) , 16/var(--vw-base) * 1440px );
  font-weight: 400;
  line-height: 1.8;
  margin-top: 4em;
}
@media (max-width: 767px) {
  .thank-you__message {
    font-size: min( 14 * 100vw / var(--vw-base) , 14/var(--vw-base) * 1440px );
  }
}

.thank-you__image {
  width: calc(700 / var(--inner) * 100%);
}
@media (max-width: 767px) {
  .thank-you__image {
    width: 100%;
    margin-top: calc(30 / var(--inner) * 100%);
  }
} /*------------------------------
overview
------------------------------*/
.overview {
  margin-top: min( 224 * 100vw / var(--vw-base) , 224/var(--vw-base) * 1440px );
  position: relative;
}
.overview::before {
  content: "";
  position: absolute;
  top: min( 224 * 100vw / var(--vw-base) , 224/var(--vw-base) * 1440px );
  top: 0;
  right: 0;
  background: #515151;
  width: calc(min( 830 * 100vw / var(--vw-base),830px) + max(0px, (100vw - 1440px) / 2));
  height: 100%;
  mix-blend-mode: multiply;
  -webkit-backdrop-filter: blur(9px);
          backdrop-filter: blur(9px);
  z-index: 2;
}
@media (min-width: 768px) {
  .overview {
    min-height: 56vw;
  }
  .overview::before {
    display: none;
  }
}
@media (max-width: 767px) {
  .overview {
    padding-top: min( 100 * 100vw / var(--vw-base) , 100/var(--vw-base) * 1440px );
    margin-top: 0;
  }
  .overview::before {
    top: min( 380 * 100vw / var(--vw-base) , 380/var(--vw-base) * 1440px );
    top: min( 439 * 100vw / var(--vw-base) , 439/var(--vw-base) * 1440px );
    height: calc(100% - min( 380 * 100vw / var(--vw-base) , 380/var(--vw-base) * 1440px ));
    mix-blend-mode: unset;
    -webkit-backdrop-filter: unset;
            backdrop-filter: unset;
  }
}

.overview__content {
  width: calc(685 / var(--inner) * 100%);
  margin-left: auto;
  color: #fff;
  position: relative;
  z-index: 3;
  padding: min( 140 * 100vw / var(--vw-base) , 140/var(--vw-base) * 1440px ) 0 min( 80 * 100vw / var(--vw-base) , 80/var(--vw-base) * 1440px );
}
@media (min-width: 768px) {
  .overview__content {
    padding-top: 7%;
  }
}
@media (max-width: 767px) {
  .overview__content {
    width: 100%;
    padding: 27% 0;
  }
}

.overview__heading {
  font-size: min( 24 * 100vw / var(--vw-base) , 24/var(--vw-base) * 1440px );
  font-weight: 500;
  line-height: 1.8;
  margin-top: 2.9em;
}
@media (max-width: 767px) {
  .overview__heading {
    font-size: min( 16 * 100vw / var(--vw-base) , 16/var(--vw-base) * 1440px );
  }
}

.overview__message {
  font-size: min( 16 * 100vw / var(--vw-base) , 16/var(--vw-base) * 1440px );
  font-weight: 400;
  line-height: 1.8;
  margin-top: 4em;
}
@media (max-width: 767px) {
  .overview__message {
    font-size: min( 14 * 100vw / var(--vw-base) , 14/var(--vw-base) * 1440px );
    margin-top: 3em;
  }
}

.overview__button {
  margin-top: min( 70 * 100vw / var(--vw-base) , 70/var(--vw-base) * 1440px );
}
.overview__button a {
  display: inline-block;
  font-size: min( 16 * 100vw / var(--vw-base) , 16/var(--vw-base) * 1440px );
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  border: 1px solid #fff;
  padding: 1.25em 5em;
  border-radius: 6.25em;
}
@media (max-width: 767px) {
  .overview__button a {
    width: 100%;
    padding: 1.25em 3em;
  }
}

.overview__signature {
  margin-top: 4em;
  font-size: min( 16 * 100vw / var(--vw-base) , 16/var(--vw-base) * 1440px );
  font-weight: 400;
  line-height: 1.6;
  font-family: "Noto Serif JP", serif;
  text-align: right;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: 1em;
  text-align: left;
}
.overview__signature strong {
  display: inline-block;
  font-size: min( 24 * 100vw / var(--vw-base) , 24/var(--vw-base) * 1440px );
  margin-left: 0.9em;
}

@media (min-width: 768px) {
  .overview__image-wrap {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 768px) {
  .overview-text-wrap {
    z-index: 10;
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 63%;
    height: calc(100% - 30.7vw);
    display: flex;
    align-items: flex-end;
  }
  .overview-text-wrap .overview-text[class] {
    position: -webkit-sticky;
    position: sticky;
    width: 33%;
    left: 0;
    bottom: max(100vh - (min( 100 * 100vw / var(--vw-base) , 100/var(--vw-base) * 1440px ) + 55.5555555556vw), 0px);
  }
}
.overview__image {
  position: absolute;
  top: min( 224 * 100vw / var(--vw-base) , 224/var(--vw-base) * 1440px );
  left: 0;
  width: 100%;
}
.overview__image::before {
  content: "";
  position: absolute;
  background: url(../img/abcfair/overview_text.svg) no-repeat center center/100%;
  aspect-ratio: 468/353;
  transform: translate(0%, -50%);
  width: 33%;
  max-width: 475px;
  left: 0%;
  top: 100%;
  mix-blend-mode: multiply;
}
.overview__image img {
  width: 100%;
  max-height: 807px;
  max-height: min(807px, 100vh - 15vw);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
@media (min-width: 768px) {
  .overview__image {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    top: min( 74 * 100vw / var(--vw-base) , 74/var(--vw-base) * 1440px );
    left: 0;
  }
  .overview__image::before {
    top: min(55.5555555556vw, 100vh - min( 100 * 100vw / var(--vw-base) , 100/var(--vw-base) * 1440px ));
    transform: translateY(-100%);
    left: min( 10 * 100vw / var(--vw-base) , 10/var(--vw-base) * 1440px );
    display: none;
  }
  .overview__image::after {
    content: "";
    position: absolute;
    background: #515151;
    width: 57.6%;
    right: 0%;
    top: 0%;
    height: 100%;
    mix-blend-mode: multiply;
    -webkit-backdrop-filter: blur(9px);
            backdrop-filter: blur(9px);
  }
  .overview__image img {
    max-height: unset;
  }
}
@media (max-width: 767px) {
  .overview__image {
    position: relative;
    top: unset;
    left: unset;
  }
  .overview__image::before {
    background: url(../img/abcfair/overview_text_sp.svg) no-repeat center center/100%;
    aspect-ratio: 214/184;
    left: unset;
    z-index: 10;
    right: 0;
    top: 91%;
    top: 73%;
    width: 52%;
    max-width: unset;
    display: none;
  }
  .overview__image img {
    max-height: unset;
  }
}

/*------------------------------
gallery
------------------------------*/
.gallery {
  padding-top: min( 300 * 100vw / var(--vw-base) , 300/var(--vw-base) * 1440px );
  overflow: hidden;
}
@media (max-width: 767px) {
  .gallery {
    padding-top: 30%;
  }
}

.gallery__items {
  margin-top: 9%;
  position: relative;
}
.gallery__items .swiper-button-prev,
.gallery__items .swiper-button-next {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  margin: 0;
  height: auto;
  width: auto;
  position: absolute;
  background: url(../img/icon_arrow_blue.svg) no-repeat center center/100%;
  aspect-ratio: 1/1;
  width: 4.3%;
  top: 50%;
}
.gallery__items .swiper-button-prev::after,
.gallery__items .swiper-button-next::after {
  display: none;
}
.gallery__items .swiper-button-next {
  left: 80%;
  transform: translate(-50%, -50%);
}
.gallery__items .swiper-button-prev {
  left: 20%;
  transform: translate(-50%, -50%) scale(-1, 1);
}
@media (max-width: 767px) {
  .gallery__items .swiper-button-prev,
.gallery__items .swiper-button-next {
    width: 14%;
  }
  .gallery__items .swiper-button-next {
    left: 91%;
  }
  .gallery__items .swiper-button-prev {
    left: 9%;
  }
}

.gallery__item {
  width: 97%;
  margin: 0 auto;
}

.gallerySwiper .swiper-slide:not(.swiper-slide-active)::before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
}

.gallery-num {
  font-size: min( (20 * 100vw / var(--vw-base)) * var(--fz-ratio) , 20/var(--vw-base) * 1440px );
  margin: 1.7em auto 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.gallery-num span:nth-child(2) {
  margin: 0 0.8em;
}

/*------------------------------
video
------------------------------*/
.video {
  padding: min( 225 * 100vw / var(--vw-base) , 225/var(--vw-base) * 1440px ) 0;
}
@media (max-width: 767px) {
  .video {
    padding: 15% 0;
  }
}

.video__content {
  width: calc(930 / var(--inner) * 100%);
  margin: 0 auto;
}
@media (max-width: 767px) {
  .video__content {
    width: 100%;
  }
}

.video__media {
  margin-top: min( 94 * 100vw / var(--vw-base) , 94/var(--vw-base) * 1440px );
}
.video__media iframe {
  width: 100%;
  aspect-ratio: 1000/550;
  height: auto;
}
@media (max-width: 767px) {
  .video__media {
    margin-top: 10%;
  }
}
/*# sourceMappingURL=abcfair.css.map */