@charset "UTF-8";

/* 1100~ PC */
/* 1099~770 TB */
/* 769~ SP */

/* ぱんくず */
.level-2-header.bg-umios-dark_blue2 .breadcrumbs * {
  color: var(--Umios_White);
}

/* 汎用タイポグラフィー */
.pc-main-copy {
  font-size: 4.4rem;
  font-weight: 300;
  line-height: 1.2;
}

@media screen and (max-width: 1099px) {
  .pc-main-copy {
    font-size: 2.6rem;
  }
}

/* =========================
  action-mv
========================= */
.action-mv {
  padding: 24px 0 44px;
  background: url(/en/sustainability/common/img/action/01.png) no-repeat center;
  background-size: cover;

  &.type-2 {
    background: url(/en/sustainability/common/img/action/03.png) no-repeat center;
    background-size: cover;
  }
}

.action-mv-h1 {
  background: url(/en/sustainability/common/img/action/02.png) no-repeat center;
  background-size: cover;
  padding: 60px 54px;
  border-radius: 20px;

  .action-h1-copy {
    font-size: 2rem;
    font-weight: bold;
    color: var(--Umios_White);
  }

  .action-h1 {
    font-size: 6.8rem;
    font-weight: bold;
    color: var(--Umios_White);
    line-height: 1.1;
  }

  p {
    width: 526px;
    max-width: 100%;
    color: var(--Umios_White);
  }
}

.action-mv-card {
  background: rgba(255, 255, 255, .08);
  padding: 20px 32px 32px 32px;
  border-radius: 20px;

  p {
    font-size: 1.5rem;
  }

  .number {
    font-size: 5.6rem;
    font-weight: 700;
    color: var(--Umios_green);
    line-height: 1.2;
  }

  .sub-title {
    font-size: 2rem;
  }

  p {
    color: var(--Umios_White);
  }
}

@media screen and (max-width: 1099px) {
  .action-mv {
    padding: 24px 0;
  }

  .action-mv-h1 {
    padding: 24px;

    .action-h1-copy {
      font-size: 1.6rem;
    }

    .action-h1 {
      font-size: 2.8rem;
    }
  }

  .action-mv-card {
    .number {
      font-size: 3.6rem;
    }

    .sub-title {
      font-size: 1.8rem;
    }
  }
}

/* =========================
  column-img-box
========================= */
a.column {
  .column-img-box {
    width: 50%;
    aspect-ratio: 155 / 93;
    border-radius: 16px;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      display: block;
      transition: all 0.6s ease;
    }
  }

  h3 {
    color: var(--Umios_Black);
  }

  &:hover {

    .column-img-box {
      img {
        transform: scale(1.1);
      }
    }
  }
}

/* =========================
  Sticky Gallery
========================= */
.sticky-gallery__media { display: none; }

.sticky-item {
  min-height: 600px;
  margin-top: -80px;
}

.sticky-item__src{
  display:block;
  width:100%;
  height:auto;
}

@media (min-width: 770px) {
  .sticky-gallery{
    position: relative;
  }

  .sticky-gallery__rail{
    position: absolute;
    top: 0;
    right: 0;
    width: 46vw;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  .sticky-gallery__media{
    display:block;
    width: 100%;
    aspect-ratio: 1172 / 754;
    position: absolute;
    top: 120px;
    right: 0;
  }

  .sticky-gallery__media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: contain;
    opacity:0;
    transition: opacity 360ms ease;
    display:block;
  }

  .sticky-gallery__media img.is-active{
    opacity:1;
  }

  .sticky-item__src {
    display:none; 
  }

  .sticky-item {
    transition: opacity .3s ease;
  }

  .sticky-item.is-inactive {
    opacity: .3;
  }

  .sticky-item.is-active {
    opacity: 1;
  }

  .sticky-gallery__rail {
    overflow: hidden;
  }
}

/* =========================
  action-under
========================= */
.action-under {
  color: var(--Umios_White);
  position: relative;
  z-index: 0;

  h2 {
    width: 512px;
    color: var(--Umios_White);
  }

  p {
    width: 464px;
    color: var(--Umios_White);
  }
}

.action-under-txt {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1099px) {
  .action-under {
    h2,p {
      width: 367px;
    }
  }
}

@media screen and (max-width: 769px) {
  .action-under {
    padding: 8px 8px 24px 8px;
    background: url(/en/sustainability/common/img/action/13_sp.png) no-repeat center;
    background-size: cover;
    border-radius: 10px;

    h2,p {
      width: 100%;
    }
  }
  .action-under-txt {
    position: inherit;
    top: auto;
    left: auto;
    transform: none;
    padding: 0 16px;
  }
}