:root {
  --vw-unit-750: 0.1333333333vw; /* 100vw / 750 */
  --vw-unit-500: 0.2vw; /* 100vw / 500 */
}

body {
  margin: auto 0;
}

figure {
  margin: 0;
}

ul, li {
  list-style: none;
  padding: 0;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  width: 100%;
}

.contents {
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 769px) {
  .contents {
    max-width: 750px;
  }
  a {
    transition: opacity 0.3s;
  }
  a:hover {
    opacity: 0.7;
  }
}
.block_movie {
  background-color: #292929;
  position: relative;
}
.block_movie ::after {
  position: absolute;
  content: "";
  width: 169px;
  height: 131px;
  top: 0;
  background: url(../images/PONPON.png) center/contain;
  right: 0;
  transform: translate(-15%, -50%);
}
@media (max-width: 750px) {
  .block_movie ::after {
    width: calc(169 * var(--vw-unit-750)) !important;
    height: calc(131 * var(--vw-unit-750)) !important;
  }
}
.block_movie .videowrap {
  width: 661px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.block_movie video {
  width: 100%;
  clip-path: inset(-3% 12% 0% 13%);
}

@media screen and (max-width: 768px) {
  .block_movie {
    background-color: #292929;
    position: relative;
  }
  .block_movie ::after {
    position: absolute;
    content: "";
    width: 169px;
    height: 131px;
    top: 0;
    background: url(../images/PONPON.png) center/contain;
    right: 0;
    transform: translate(-15%, -50%);
  }
  .block_movie .videowrap {
    width: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}
.ponpon {
  background-color: #292929;
  padding: 135px 5%;
}
@media (max-width: 750px) {
  .ponpon {
    padding: calc(135 * var(--vw-unit-750)) 5%;
  }
}
.ponpon .links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
}
.ponpon .links li {
  /* width: 48%; */
  width: 100%;
  margin-top: 8px;
}
.ponpon .links li a {
  display: block;
}

.careshop {
  padding: 0px 110px;
}
@media (max-width: 750px) {
  .careshop {
    padding: 0 calc(80 * var(--vw-unit-750)) !important;
  }
}
.careshop .shop-ttl {
  width: 337px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 74px;
}
@media (max-width: 750px) {
  .careshop .shop-ttl {
    width: calc(337 * var(--vw-unit-750)) !important;
    margin-bottom: calc(74 * var(--vw-unit-750)) !important;
  }
}
.careshop .online {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 115px;
  margin-bottom: 49px;
}
@media (max-width: 750px) {
  .careshop .online {
    width: calc(300 * var(--vw-unit-750)) !important;
    margin-top: calc(115 * var(--vw-unit-750)) !important;
    margin-bottom: calc(49 * var(--vw-unit-750)) !important;
  }
}
.careshop .shop_list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  width: 100%;
  justify-content: center;
}
@media (max-width: 750px) {
  .careshop .shop_list {
    gap: calc(18 * var(--vw-unit-750)) !important;
  }
}
.careshop .shop_list li {
  width: calc(50% - 9px);
}
@media (max-width: 750px) {
  .careshop .shop_list li {
    width: calc(50% - 18 * var(--vw-unit-750)) !important;
  }
}
.careshop .shop_list li a {
  display: block;
}

.block_button {
  position: relative;
}
.block_button .button {
  position: absolute;
  width: calc(100% - 60px);
  bottom: 120px;
  margin: 0 30px;
  
}
@media (max-width: 750px) {
  .block_button .button {
    bottom: calc(120 * var(--vw-unit-750)) !important;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.makeoff {
  position: relative;
}
.makeoff .button {
  position: absolute;
  bottom: 246px;
  margin: 0 20px;
}
@media (max-width: 750px) {
  .makeoff .button {
    bottom: calc(246 * var(--vw-unit-750)) !important;
    margin: 0 calc(20 * var(--vw-unit-750)) !important;
  }
}
.makeoff .button a {
  display: block;
}

.yume {
  position: relative;
}
.yume .button {
  position: absolute;
  bottom: 346px;
  margin: 0 20px;
}
@media (max-width: 750px) {
  .yume .button {
    bottom: calc(318 * var(--vw-unit-750)) !important;
    margin: 0 calc(20 * var(--vw-unit-750)) !important;
  }
}
.yume .button a {
  display: block;
}

.cv_area {
  position: relative;
}
.cv_area .cv01 {
  left: 0;
  position: absolute;
  bottom: 100px;
  left: 75px;
  width: 280px;
}
@media (max-width: 750px) {
  .cv_area .cv01 {
    width: calc(280 * var(--vw-unit-750)) !important;
    left: calc(75 * var(--vw-unit-750)) !important;
    bottom: calc(100 * var(--vw-unit-750)) !important;
  }
}
.cv_area .cv01 a {
  display: block;
}
.cv_area .cv02 {
  position: absolute;
  bottom: 100px;
  right: 75px;
  width: 280px;
}
@media (max-width: 750px) {
  .cv_area .cv02 {
    width: calc(280 * var(--vw-unit-750)) !important;
    right: calc(75 * var(--vw-unit-750)) !important;
    bottom: calc(100 * var(--vw-unit-750)) !important;
  }
}
.cv_area .cv02 a {
  display: block;
}

.followus {
  margin-top: 134px;
}
@media (max-width: 750px) {
  .followus {
    margin-top: calc(100 * var(--vw-unit-750)) !important;
  }
}
.followus .ttl {
  width: 180px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 65px;
}
@media (max-width: 750px) {
  .followus .ttl {
    width: calc(180 * var(--vw-unit-750)) !important;
    margin-bottom: calc(65 * var(--vw-unit-750)) !important;
  }
}
.followus .lists {
  background-color: #3c3c3c;
  display: flex;
  padding: 71px 101px;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 750px) {
  .followus .lists {
    padding: calc(71 * var(--vw-unit-750)) calc(101 * var(--vw-unit-750)) !important;
  }
}
.followus .lists li {
  width: 80px;
}
@media (max-width: 750px) {
  .followus .lists li {
    width: calc(80 * var(--vw-unit-750)) !important;
  }
}
.followus .lists li a {
  display: block;
}

.footer {
  padding: 64px 0;
}
@media (max-width: 750px) {
  .footer {
    padding: calc(64 * var(--vw-unit-750)) !important;
  }
}
.footer .copy {
  text-align: center;
  font-size: 24px;
}
@media (max-width: 750px) {
  .footer .copy {
    font-size: calc(24 * var(--vw-unit-750)) !important;
  }
}

.youtube-ratio iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}