@charset "utf-8";

/* sec02 */

/* Bubbles */
.sec02-bubbles {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.sec02-bubble {
  position: absolute;
  height: auto;
  will-change: transform;
}

/* PC */
.sec02-bubble--01 { top: 3%; left: 86%; width: 77px !important; }
.sec02-bubble--02 { top: 4.5%; left: 82%; width: 40px !important; }
.sec02-bubble--03 { top: 45.5%; left: 7%; width: 116px !important; }
.sec02-bubble--04 { top: 45%; left: 12%; width: 68px !important; }

@media (max-width: 1280px) and (min-width: 802px) {
  .sec02-bubble--01 { width: calc(77 / 1280 * 100vw) !important; }
  .sec02-bubble--02 { width: calc(40 / 1280 * 100vw) !important; }
  .sec02-bubble--03 { width: calc(116 / 1280 * 100vw) !important; }
  .sec02-bubble--04 { width: calc(68 / 1280 * 100vw) !important; }
}

/* SP */
@media (max-width: 801px) {
  .sec02-bubble--01 { top: 3%; left: 85.5%; width: calc(40 / 440 * 100vw) !important; }
  .sec02-bubble--02 { top: 4.1%; left: 79%; width: calc(21 / 440 * 100vw) !important; }
  .sec02-bubble--03 { top: 35%; left: 2%; width: calc(69 / 440 * 100vw) !important; }
  .sec02-bubble--04 { top: 34%; left: 11%; width: calc(40 / 440 * 100vw) !important; }
}

/* Bubbles展開時 */
#sec02.is-expanded .sec02-bubble--01 { top: 0.8%; }
#sec02.is-expanded .sec02-bubble--02 { top: 1.1%; }
#sec02.is-expanded .sec02-bubble--03 { top: 12%; }
#sec02.is-expanded .sec02-bubble--04 { top: 11.9%; }

@media (max-width: 801px) {
  #sec02.is-expanded .sec02-bubble--01 { top: 0.9%; }
  #sec02.is-expanded .sec02-bubble--02 { top: 1%; }
  #sec02.is-expanded .sec02-bubble--03 { top: 8.4%; }
  #sec02.is-expanded .sec02-bubble--04 { top: 8.2%; }
}

/* 配置・マージン */
#sec02 {
  margin-bottom: -1300px;
}

#sec02 .sec02-img img {
  width: calc(100%);
  max-width: none;
}

@media (max-width: 1280px) and (min-width: 802px) {
  #sec02 {
    margin-bottom: calc(-1300 / 1280 * 100vw + (1280px - 100vw) * 0.1);
  }
}

@media (max-width: 801px) {
  #sec02 {
    margin-bottom: calc(-320 / 440 * 100vw + (440px - 100vw) * 0.1);
  }
  #sec02.is-expanded {
    margin-bottom: calc(-690 / 440 * 100vw + (440px - 100vw) * 0.1);
  }
}

/* VIEW MORE button */
.sec02-wrap {
  position: relative;
}

.sec02-img {
  display: block;
}

.sec02-img img {
  display: block;
  width: 100%;
}

.sec02-view-more {
  position: absolute;
  bottom: 21.2%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease, filter 0.15s ease;
}

.sec02-view-more img {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
}

.sec02-view-more:hover {
  opacity: 0.9;
  filter: brightness(1.03);
}

.sec02-view-more:active {
  transform: translateX(-50%) scale(0.95);
  opacity: 0.7;
  filter: brightness(0.95);
}

.sec02-view-more.is-hidden {
  display: none;
}

@media (max-width: 801px) {
  .sec02-view-more {
    bottom: 8.4%;
  }
  .sec02-view-more img {
    max-width: 180px;
  }
}

/* CLOSE button */
.sec02-close {
  position: absolute;
  bottom: 5.2%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease, filter 0.15s ease;
}

.sec02-close img {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
}

.sec02-close:hover {
  opacity: 0.9;
  filter: brightness(1.03);
}

.sec02-close:active {
  transform: translateX(-50%) scale(0.95);
  opacity: 0.7;
  filter: brightness(0.95);
}

.sec02-close.is-hidden {
  display: none;
}

@media (max-width: 801px) {
  .sec02-close {
    bottom: 6.8%;
  }
}