.top,
.top *,
.top *:before,
.top *:after {
  box-sizing: border-box
}

.top a:hover {
  opacity: 1;
  color: inherit
}

html {
  overflow-x: clip;
  font-size: 62.5%
}

@media (min-width: 1921px) {
  html {
    font-size: .5208333333vw
  }
}

@media (max-width: 1440px) {
  html {
    font-size: .6944444444vw
  }
}

@media (max-width: 750px) {
  html {
    font-size: 62.5%
  }
}

body {
  font-family: Noto Sans JP, sans-serif
}

@media (min-width: 751px) {
  body {
    padding-top: clamp(60px, 4.1666666667vw, 80px)
  }
}

@media (max-width: 750px) {
  body {
    padding-top: 13.3333333333vw
  }
}

#contents {
  margin-top: 0
}

.top .p-fv {
  width: 100%
}

.top .p-fv__img_wrapper {
  position: relative;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-fv__img_wrapper {
    aspect-ratio: 1440/680
  }
}

@media (max-width: 750px) {
  .top .p-fv__img_wrapper {
    aspect-ratio: 375/400
  }
}

.top .p-fv__img_wrapper picture {
  display: block;
  width: 100%;
  height: 100%
}

.top .p-fv__img_wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.top .p-copy {
  width: 100%
}

@media (min-width: 751px) {
  .top .p-copy {
    padding: 8rem 0
  }
}

@media (max-width: 750px) {
  .top .p-copy {
    padding: 8vw 0
  }
}

.top .p-copy__inner {
  display: flex;
  flex-direction: column;
  align-items: center
}

@media (min-width: 751px) {
  .top .p-copy__inner {
    gap: 4rem
  }
}

@media (max-width: 750px) {
  .top .p-copy__inner {
    gap: 5.3333333333vw
  }
}

@media (min-width: 751px) {
  .top .p-copy__logo {
    width: 20.1rem;
    height: 9rem
  }
}

@media (max-width: 750px) {
  .top .p-copy__logo {
    width: 37.8666666667vw;
    height: 17.0666666667vw
  }
}

.top .p-copy__logo-wrap {
  width: 100%;
  height: 100%
}

.top .p-copy__logo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.top .p-copy__txt {
  display: flex;
  flex-direction: column;
  align-items: center
}

@media (min-width: 751px) {
  .top .p-copy__txt {
    gap: 4rem
  }
}

@media (max-width: 750px) {
  .top .p-copy__txt {
    gap: 8vw
  }
}

.top .p-copy__paragraph {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  color: #727171;
  text-align: center;
  line-height: 2
}

@media (min-width: 751px) {
  .top .p-copy__paragraph {
    font-size: 2.2rem;
    letter-spacing: .04em
  }
}

@media (max-width: 750px) {
  .top .p-copy__paragraph {
    font-size: 4.2666666667vw;
    letter-spacing: .04em
  }
}

.top .c-btn-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #d7000f;
  border-bottom: 1px solid #d7000f;
  text-decoration: none;
  text-align: center;
  transition: background-color .3s ease
}

@media (min-width: 751px) {
  .top .c-btn-card {
    height: 15rem;
    gap: 1rem
  }
}

@media (max-width: 750px) {
  .top .c-btn-card {
    height: 26.6666666667vw;
    gap: 2.6666666667vw
  }
}

@media (hover: hover) and (pointer: fine) {
  .top .c-btn-card:hover {
    background-color: #f7f7f7
  }

  .top .c-btn-card:hover .c-btn-card__jp {
    color: #727171
  }
}

.top .c-btn-card:active {
  background-color: #f7f7f7
}

.top .c-btn-card:active .c-btn-card__jp {
  color: #727171
}

.top .c-btn-card__en {
  font-family: Cormorant Garamond, serif;
  font-weight: 400;
  color: #727171;
  line-height: 1
}

@media (min-width: 751px) {
  .top .c-btn-card__en {
    font-size: 2.8rem
  }
}

@media (max-width: 750px) {
  .top .c-btn-card__en {
    font-size: 6.4vw
  }
}

.top .c-btn-card__jp {
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1;
  transition: color .3s ease
}

@media (min-width: 751px) {
  .top .c-btn-card__jp {
    font-size: 2rem;
    letter-spacing: .02em
  }
}

@media (max-width: 750px) {
  .top .c-btn-card__jp {
    font-size: 3.7333333333vw
  }
}

.top .c-btn-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #727171;
  color: #000;
  text-align: center;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease
}

@media (min-width: 751px) {
  .top .c-btn-b {
    width: 30rem;
    height: 6rem
  }
}

@media (max-width: 750px) {
  .top .c-btn-b {
    width: 69.3333333333vw;
    height: 11.7333333333vw
  }
}

@media (hover: hover) and (pointer: fine) {
  .top .c-btn-b:hover {
    background-color: #f7f7f7;
    color: #727171
  }
}

.top .c-btn-b:active {
  background-color: #f7f7f7;
  color: #727171
}

.top .c-btn-b__label {
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap
}

@media (min-width: 751px) {
  .top .c-btn-b__label {
    font-size: 1.6rem
  }
}

@media (max-width: 750px) {
  .top .c-btn-b__label {
    font-size: 3.2vw
  }
}

.top .c-view-more {
  position: relative;
  display: inline-block;
  font-family: Cormorant Garamond, serif;
  font-weight: 500;
  line-height: 1;
  color: #000;
  white-space: nowrap;
  transition: color .3s ease
}

@media (min-width: 751px) {
  .top .c-view-more {
    align-self: flex-start;
    font-size: 1.6rem;
    padding-bottom: .8rem
  }
}

@media (max-width: 750px) {
  .top .c-view-more {
    font-size: 3.2vw;
    padding-bottom: 1.6vw
  }
}

@media (hover: hover) and (pointer: fine) {
  .top a:hover .c-view-more {
    color: #727171
  }
}

.top a:active .c-view-more {
  color: #727171
}

.top .p-what-we-do {
  width: 100%;
  background-color: #fff
}

@media (min-width: 751px) {
  .top .p-what-we-do {
    padding: 8rem 17rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do {
    padding: 10.6666666667vw 5.3333333333vw
  }
}

.top .p-what-we-do__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-what-we-do__inner {
    max-width: 110rem;
    margin: 0 auto;
    gap: 3rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__inner {
    gap: 8vw
  }
}

.top .p-what-we-do__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-what-we-do__intro {
    gap: 2rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__intro {
    gap: 5.3333333333vw
  }
}

.top .p-what-we-do__ttl {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

@media (min-width: 751px) {
  .top .p-what-we-do__ttl {
    gap: 1rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__ttl {
    gap: 2.6666666667vw
  }
}

.top .p-what-we-do__ttl-en {
  margin: 0;
  font-family: Cormorant Garamond, serif;
  font-weight: 400;
  color: #727171;
  line-height: 1
}

@media (min-width: 751px) {
  .top .p-what-we-do__ttl-en {
    font-size: 5.6rem;
    letter-spacing: .02em
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__ttl-en {
    font-size: 8vw;
    letter-spacing: .02em
  }
}

.top .p-what-we-do__ttl-jp {
  margin: 0;
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1
}

@media (min-width: 751px) {
  .top .p-what-we-do__ttl-jp {
    font-size: 2rem;
    letter-spacing: .02em
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__ttl-jp {
    font-size: 3.7333333333vw
  }
}

.top .p-what-we-do__lead {
  margin: 0;
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 2;
  text-align: left
}

@media (min-width: 751px) {
  .top .p-what-we-do__lead {
    font-size: 1.6rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__lead {
    font-size: 3.2vw
  }
}

.top .p-what-we-do__brands {
  display: flex;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-what-we-do__brands {
    flex-direction: row;
    gap: 4.9rem;
    align-items: flex-start
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__brands {
    flex-direction: column;
    gap: 10.6666666667vw;
    align-items: center
  }
}

@media (min-width: 751px) {
  .top .p-what-we-do__brand {
    width: 33.4rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__brand {
    width: 100%
  }
}

.top .p-what-we-do__brand-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-what-we-do__brand-link {
    align-items: flex-start;
    gap: 2rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__brand-link {
    align-items: center;
    gap: 5.3333333333vw
  }
}

.top .p-what-we-do__brand-img_wrapper {
  overflow: hidden
}

@media (min-width: 751px) {
  .top .p-what-we-do__brand-img_wrapper {
    width: 33.4rem;
    height: 33.4rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__brand-img_wrapper {
    width: 80vw;
    height: 80vw
  }
}

.top .p-what-we-do__brand-img_wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease
}

.top .p-what-we-do__brand-content {
  display: flex;
  flex-direction: column;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-what-we-do__brand-content {
    align-items: flex-start;
    gap: 2rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__brand-content {
    align-items: center;
    gap: 2.6666666667vw
  }
}

.top .p-what-we-do__brand-logo img {
  display: block;
  width: 100%;
/*  height: 100%;*/
  object-fit: contain
}

.top .p-what-we-do__brand-text {
  display: flex;
  flex-direction: column;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-what-we-do__brand-text {
    align-items: flex-start;
    gap: 1.2rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__brand-text {
    align-items: center;
    gap: 3.2vw
  }
}

.top .p-what-we-do__brand-desc {
  margin: 0;
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 2;
  text-align: left;
  transition: color .3s ease
}

@media (min-width: 751px) {
  .top .p-what-we-do__brand-desc {
    font-size: 1.6rem
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do__brand-desc {
    font-size: 3.2vw;
    text-align: center
  }
}

@media (hover: hover) and (pointer: fine) {
  .top .p-what-we-do__brand-link:hover .p-what-we-do__brand-img_wrapper img {
    transform: scale(1.07)
  }

  .top .p-what-we-do__brand-link:hover .p-what-we-do__brand-desc {
    color: #727171
  }
}

@media (min-width: 751px) {
  .top .p-what-we-do .p-what-we-do__brand--arsoa .p-what-we-do__brand-logo {
    width: 13.3rem;
/*    height: 4rem*/
    margin: -0.6rem 0;
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do .p-what-we-do__brand--arsoa .p-what-we-do__brand-logo {
    width: 31.7333333333vw;
    height: 9.6vw
  }
}

@media (min-width: 751px) {
  .top .p-what-we-do .p-what-we-do__brand--megaminomori .p-what-we-do__brand-logo {
    width: 24rem;
/*    height: 2.8rem*/
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do .p-what-we-do__brand--megaminomori .p-what-we-do__brand-logo {
    width: 55.2vw;
    height: 6.4vw
  }
}

@media (min-width: 751px) {
  .top .p-what-we-do .p-what-we-do__brand--biokura .p-what-we-do__brand-logo {
    width: 20.7rem;
/*    height: 2.4rem*/
    margin: 0.2rem 0;
  }
}

@media (max-width: 750px) {
  .top .p-what-we-do .p-what-we-do__brand--biokura .p-what-we-do__brand-logo {
    width: 46.1333333333vw;
    height: 5.3333333333vw
  }
}

@media (min-width: 751px) {
  .top .p-what-we-do .p-what-we-do__brand--biokura .p-what-we-do__brand-desc {
    white-space: nowrap
  }
}

.top .p-synergy {
  position: relative;
  width: 100%;
  background-color: #f7f7f7;
  overflow: hidden
}

@media (min-width: 751px) {
  .top .p-synergy {
    padding: 4rem 0
  }
}

@media (max-width: 750px) {
  .top .p-synergy {
    padding: 10.6666666667vw 0
  }
}

.top .p-synergy__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

@media (min-width: 751px) {
  .top .p-synergy__inner {
    max-width: 110rem;
    margin: 0 auto;
    gap: 3rem
  }
}

@media (max-width: 750px) {
  .top .p-synergy__inner {
    padding: 0 5.3333333333vw;
    gap: 8vw
  }
}

.top .p-synergy__ttl {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

@media (min-width: 751px) {
  .top .p-synergy__ttl {
    gap: 1rem
  }
}

@media (max-width: 750px) {
  .top .p-synergy__ttl {
    gap: 2.6666666667vw
  }
}

.top .p-synergy__ttl-en {
  margin: 0;
  font-family: Cormorant Garamond, serif;
  font-weight: 400;
  color: #727171;
  line-height: 1
}

@media (min-width: 751px) {
  .top .p-synergy__ttl-en {
    font-size: 5.6rem;
    letter-spacing: .02em
  }
}

@media (max-width: 750px) {
  .top .p-synergy__ttl-en {
    font-size: 8vw;
    letter-spacing: .02em
  }
}

.top .p-synergy__ttl-jp {
  margin: 0;
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1
}

@media (min-width: 751px) {
  .top .p-synergy__ttl-jp {
    font-size: 2rem;
    letter-spacing: .02em
  }
}

@media (max-width: 750px) {
  .top .p-synergy__ttl-jp {
    font-size: 3.7333333333vw
  }
}

.top .p-synergy__items {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex
}

@media (min-width: 751px) {
  .top .p-synergy__items {
    flex-direction: row;
    gap: 4.9rem;
    align-items: flex-start
  }
}

@media (max-width: 750px) {
  .top .p-synergy__items {
    flex-direction: column;
    gap: 8vw
  }
}

.top .p-synergy__items-item {
  margin: 0
}

@media (min-width: 751px) {
  .top .p-synergy__items-item {
    flex: 1;
    min-width: 0
  }
}

@media (max-width: 750px) {
  .top .p-synergy__items-item {
    width: 100%
  }
}

.top .p-synergy__item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit
}

@media (min-width: 751px) {
  .top .p-synergy__item {
    gap: 1.2rem
  }
}

@media (max-width: 750px) {
  .top .p-synergy__item {
    gap: 3.2vw
  }
}

.top .p-synergy__item-img_wrapper {
  position: relative;
  width: 100%;
  overflow: hidden
}

@media (min-width: 751px) {
  .top .p-synergy__item-img_wrapper {
    height: 46rem
  }
}

@media (max-width: 750px) {
  .top .p-synergy__item-img_wrapper {
    height: 61.3333333333vw
  }
}

.top .p-synergy__item-img_wrapper picture {
  display: block;
  width: 100%;
  height: 100%
}

.top .p-synergy__item-img_wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease
}

.top .p-synergy__item-img_wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff3;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none
}

@media (hover: hover) and (pointer: fine) {
  .top .p-synergy__item:hover .p-synergy__item-img_wrapper img {
    transform: scale(1.07)
  }

  .top .p-synergy__item:hover .p-synergy__item-desc,
  .top .p-synergy__item:hover .p-synergy__item-label {
    color: #727171
  }
}

@media (max-width: 750px) {
  .top .p-synergy__item:active .p-synergy__item-img_wrapper:after {
    opacity: 1
  }

  .top .p-synergy__item:active .p-synergy__item-desc,
  .top .p-synergy__item:active .p-synergy__item-label {
    color: #727171
  }
}

.top .p-synergy__item-text {
  display: flex;
  flex-direction: column;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-synergy__item-text {
    gap: .8rem
  }
}

@media (max-width: 750px) {
  .top .p-synergy__item-text {
    gap: 2.1333333333vw
  }
}

.top .p-synergy__item-desc {
  margin: 0;
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 2;
  text-align: left;
  white-space: nowrap;
  transition: color .3s ease
}

@media (min-width: 751px) {
  .top .p-synergy__item-desc {
    font-size: 1.6rem
  }
}

@media (max-width: 750px) {
  .top .p-synergy__item-desc {
    font-size: 3.2vw
  }
}

.top .p-synergy__item-label {
  align-self: flex-start;
  position: relative;
  display: inline-block;
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1;
  white-space: nowrap;
  transition: color .3s ease
}

@media (min-width: 751px) {
  .top .p-synergy__item-label {
    font-size: 1.6rem
  }
}

@media (max-width: 750px) {
  .top .p-synergy__item-label {
    font-size: 3.2vw
  }
}

.top .p-sustainability {
  width: 100%
}

@media (min-width: 751px) {
  .top .p-sustainability {
    padding-top: 8rem
  }
}

@media (max-width: 750px) {
  .top .p-sustainability {
    padding: 10.6666666667vw 5.3333333333vw 0
  }
}

.top .p-sustainability__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-sustainability__inner {
    max-width: 110rem;
    margin: 0 auto;
    gap: 4rem
  }
}

@media (max-width: 750px) {
  .top .p-sustainability__inner {
    gap: 5.3333333333vw
  }
}

.top .p-sustainability__content {
  position: relative;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-sustainability__content {
    height: 46.3rem
  }
}

@media (max-width: 750px) {
  .top .p-sustainability__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.6666666667vw
  }
}

.top .p-sustainability__ttl {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

@media (min-width: 751px) {
  .top .p-sustainability__ttl {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    gap: 1rem
  }
}

@media (max-width: 750px) {
  .top .p-sustainability__ttl {
    gap: 2.6666666667vw
  }
}

.top .p-sustainability__ttl-en {
  margin: 0;
  font-family: Cormorant Garamond, serif;
  font-weight: 400;
  color: #727171;
  line-height: 1;
  text-align: left
}

@media (min-width: 751px) {
  .top .p-sustainability__ttl-en {
    font-size: 5.6rem;
    letter-spacing: .02em
  }
}

@media (max-width: 750px) {
  .top .p-sustainability__ttl-en {
    font-size: 8vw;
    letter-spacing: .02em
  }
}

.top .p-sustainability__ttl-jp {
  margin: 0;
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1;
  text-align: left
}

@media (min-width: 751px) {
  .top .p-sustainability__ttl-jp {
    font-size: 2rem;
    letter-spacing: .02em
  }
}

@media (max-width: 750px) {
  .top .p-sustainability__ttl-jp {
    font-size: 3.7333333333vw
  }
}

.top .p-sustainability__img_wrapper {
  width: 100%;
  overflow: hidden
}

@media (min-width: 751px) {
  .top .p-sustainability__img_wrapper {
    position: absolute;
    top: 8.2rem;
    left: 0;
    height: 38.1rem
  }
}

@media (max-width: 750px) {
  .top .p-sustainability__img_wrapper {
    height: 31.4666666667vw
  }
}

.top .p-sustainability__img_wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.top .p-corporate {
  width: 100%
}

@media (min-width: 751px) {
  .top .p-corporate {
    padding: 13rem 0
  }
}

@media (max-width: 750px) {
  .top .p-corporate {
    padding: 16vw 5.3333333333vw
  }
}

.top .p-corporate__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%
}

@media (min-width: 751px) {
  .top .p-corporate__items {
    flex-direction: row;
    gap: 6rem;
    justify-content: center
  }
}

@media (max-width: 750px) {
  .top .p-corporate__items {
    flex-direction: column;
    gap: 5.3333333333vw
  }
}

.top .p-corporate__items-item {
  margin: 0
}

@media (min-width: 751px) {
  .top .p-corporate__items-item {
    width: 42rem
  }
}

@media (max-width: 750px) {
  .top .p-corporate__items-item {
    width: 100%
  }
}





.top .p-movie {
  width: 100%;
  padding: 5.3333333333vw calc(40/750*100vw);
  background-color: #f7f7f7;
}
.top .p-movie__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.top .p-movie__inner > a {
  display: block;
  width: 89.3333333333vw;
  overflow: hidden;
}
.top .p-movie .p-movie__btn {
  display: block;
  width: calc(191/750*100vw);
  margin: calc(35/750*100vw) auto 0;
}

@media (min-width: 751px) {
  .top .p-movie {
    padding: 8rem 0 7rem;
  }
  .top .p-movie__inner > a {
    width: 90rem;
  }
  /*.top .p-movie__inner > a img {
    transform-origin: center;
    transition: transform 0.8s;
  }
  .top .p-movie__inner > a img:hover {
    transform: scale(1.07);
  }*/
  .top .p-movie .p-movie__btn {
    width: 14.1rem;
    margin-top: 3rem;
  }
  .top .p-movie .p-movie__btn img {
    transition: opacity 0.3s;
  }
  .top .p-movie .p-movie__btn:hover img {
    opacity: 0.7;
  }
}

.modalContent {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
}
.modalContent .modalBg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fff;
}
.modalContent .modalClose {
  position: absolute;
  top: -4rem; right: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  cursor: pointer;
}
.modalContent .modalArea {
  box-sizing: content-box;
  z-index: 10;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(740 / 750 * 100vw);
  height: calc(449 / 750 * 100vw);
  background: #fff;
}
.modalContent .modalArea .modalInner {
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0;
}
.modalContent .modalArea .modalInner img {
  width: 100%;
}
.modalContent .modalArea iframe, .modalContent .modalArea video {
  width: 100%; height: 100%;
  min-width: inherit;
  min-height: inherit;
}
@media (min-width: 751px) {
  .modalContent .modalArea {
    width: min(calc(900 / 940 * 100vw), 900px);
    height: min(calc(506.25 / 940 * 100vw), 506.25px);
  }
}