#article .section .s1_p1_img {
  width: 26.2222222222em;
}
#article .section .s2_pg1_fig {
  margin-left: auto;
  margin-right: auto;
  width: 23.6666666667em;
}
#article .section .pg.item {
  margin-top: 5.5555555556em;
  padding-right: 6.1111111111em;
  justify-content: end;
  align-items: center;
  position: relative;
}
#article .section .pg.item + .item {
  margin-top: 6.6666666667em;
}
#article .section .pg.item::after {
  content: "";
  border-radius: 0.8333333333em;
  background: var(--grade-gray);
  height: 21.6666666667em;
  opacity: 0.8;
  position: absolute;
  bottom: 0;
  z-index: -1;
}
#article .section .pg.item:nth-child(odd)::after {
  width: 43.3333333333em;
  right: 0;
}
#article .section .pg.item:nth-child(even)::after {
  width: 38.3333333333em;
  height: 21.1111111111em;
  left: 0;
}
#article .section .pg.item > .img {
  width: 21.1111111111em;
}
#article .section .pg.item > .img .ph {
  margin: 0 auto;
  width: 11.2222222222em;
}
#article .section .pg.item > .img .info {
  font-weight: 500;
  text-align: center;
  margin-top: 1.1111111111em;
}
#article .section .pg.item > .img .info * {
  display: block;
}
#article .section .pg.item > .img .info .copy {
  font-size: 1.2222222222em;
}
#article .section .pg.item > .img + .txt {
  margin-left: 0;
}
#article .section .pg.item > .txt {
  width: 24.4444444444em;
}
#article .section .pg.item > .txt p {
  letter-spacing: normal;
}
#article .section .pg.item > .txt .note {
  font-size: 0.6666666667em;
}
#article .section .pg.item > .txt .movie {
  border-radius: 0.8333333333em;
  margin-top: 2.2222222222em;
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
#article .section .pg.item > .txt .movie::after {
  content: "";
  background: url(../images/common/icon_play.svg) 0/contain no-repeat;
  width: 3em;
  aspect-ratio: 1/1;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0.8;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
}
@media screen and (any-hover: hover) {
  #article .section .pg.item > .txt .movie {
    position: relative;
  }
  #article .section .pg.item > .txt .movie img {
    transition: transform 0.4s var(--easeOutCubic);
  }
  #article .section .pg.item > .txt .movie:hover img {
    transform: scale(1.15);
  }
  #article .section .pg.item > .txt .movie:hover::after {
    opacity: 0.4;
  }
}
#article .section .pg.item > .txt .fig {
  margin-top: 2.7777777778em;
  width: 21.1111111111em;
}
#article .section .pg.item > .txt .note {
  margin-top: 0.8333333333em;
}
#article .section .pg.item.item1 {
  padding-bottom: 1.3888888889em;
}
#article .section .pg.item.item2 {
  padding-bottom: 4.4444444444em;
}
#article .section .pg.item.item3 {
  padding-bottom: 0.5555555556em;
}
#article .section .pg.item.item3 > .txt .fig {
  margin-left: 1.1111111111em;
}
#article .section .pg.item.item4 {
  padding-bottom: 2.2222222222em;
}
#article .section .pg.item.item4 > .img .ph {
  width: 11.8888888889em;
}
#article .section .pg.item.item4 > .txt .fig {
  margin-left: auto;
}
@media screen and (max-width: 767.9px) {
  #article .section .s1_p1_img {
    width: 17.6666666667em;
  }
  #article .section .s2_pg1_fig {
    width: 16.4444444444em;
  }
  #article .section .s2_pg1_fig figcaption {
    font-size: 0.7777777778em;
  }
  #article .section .pg.item {
    margin-top: 2.2222222222em;
    padding-bottom: 2.2222222222em;
    padding-right: 0;
  }
  #article .section .pg.item + .item {
    margin-top: 3.3333333333em;
  }
  #article .section .pg.item::after {
    content: "";
    border-radius: 0.5555555556em;
    width: 15.8333333333em !important;
    top: 2.7777777778em;
  }
  #article .section .pg.item:nth-child(odd)::after {
    height: calc(100% - 2.7777777778em);
    right: -1.6666666667em;
  }
  #article .section .pg.item:nth-child(even)::after {
    height: calc(100% - 2.7777777778em);
    left: -1.6666666667em;
  }
  #article .section .pg.item > .img {
    margin-top: 0 !important;
    width: 100%;
  }
  #article .section .pg.item > .img .ph {
    width: 8.1428571429em;
  }
  #article .section .pg.item > .img .info .copy {
    font-size: 1.2142857143em;
  }
  #article .section .pg.item > .txt {
    margin-top: 0 !important;
    width: 100%;
  }
  #article .section .pg.item > .txt .note {
    font-size: 0.5555555556em;
  }
  #article .section .pg.item > .txt .movie {
    border-radius: 0.5555555556em;
    margin-top: 1.6666666667em;
  }
  #article .section .pg.item > .txt .fig {
    margin-top: 3.3333333333em;
    margin-left: 0 !important;
    width: 21.1111111111em;
    width: 100%;
  }
  #article .section .pg.item.item3 {
    padding-bottom: 0;
  }
  #article .section .pg.item.item3::after {
    height: 19.7222222222em;
  }
  #article .section .pg.item.item4 {
    padding-bottom: 0;
  }
  #article .section .pg.item.item4::after {
    height: 19em;
  }
  #article .section .pg.item.item4 > .img .ph {
    width: 8.8571428571em;
  }
}