.mv__title-en {
  margin-bottom: min(25px, 25 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .mv__title-en {
    margin-bottom: calc(9 / 390 * var(--inner-width) * 1px);
  }
}

.real-wrap {
  position: relative;
  padding-top: min(120px, 120 / 1280 * var(--inner-width) * 1px);
  padding-bottom: min(160px, 160 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-wrap {
    padding-top: calc(30 / 390 * var(--inner-width) * 1px);
    padding-bottom: calc(120 / 390 * var(--inner-width) * 1px);
  }
}

.real-container {
  position: relative;
  width: min(1280px, 1280 / 1280 * var(--inner-width) * 1px);
  margin: 0 auto;
  padding-right: min(120px, 120 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-container {
    width: 100%;
    padding-right: 0;
  }
}

.real-inner {
  width: min(880px, 880 / 1280 * var(--inner-width) * 1px);
  margin-left: auto;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 48em) {
  .real-inner {
    width: 100%;
  }
}

.real-title {
  font-size: min(40px, 40 / 1280 * var(--inner-width) * 1px);
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: min(40px, 40 / 1280 * var(--inner-width) * 1px);
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 48em) {
  .real-title {
    font-size: calc(32 / 390 * var(--inner-width) * 1px);
    margin-bottom: calc(32 / 390 * var(--inner-width) * 1px);
  }
}
.real-title span {
  font-size: min(20px, 20 / 1280 * var(--inner-width) * 1px);
  font-family: "Syncopate", sans-serif;
}
@media only screen and (max-width: 48em) {
  .real-title span {
    font-size: calc(20 / 390 * var(--inner-width) * 1px);
  }
}

.real-lead {
  font-size: min(16px, 16 / 1280 * var(--inner-width) * 1px);
  line-height: 2;
  padding: 0 min(80px, 80 / 1280 * var(--inner-width) * 1px);
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 48em) {
  .real-lead {
    padding: 0 calc(32 / 390 * var(--inner-width) * 1px);
    font-size: calc(16 / 390 * var(--inner-width) * 1px);
  }
}

.real-intro {
  margin-bottom: min(80px, 80 / 1280 * var(--inner-width) * 1px);
  position: relative;
}
@media only screen and (max-width: 48em) {
  .real-intro {
    margin-bottom: calc(80 / 390 * var(--inner-width) * 1px);
  }
}

.crosstalk {
  padding-bottom: min(120px, 120 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .crosstalk {
    padding-bottom: calc(56 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .real-lead {
  margin-bottom: min(57px, 57 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .crosstalk .real-lead {
    margin-bottom: calc(40 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .crosstalk-contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-contents {
    flex-direction: column;
  }
}
.crosstalk .crosstalk-contents + .crosstalk-contents {
  padding-top: min(36px, 36 / 1280 * var(--inner-width) * 1px);
  margin-top: min(36px, 36 / 1280 * var(--inner-width) * 1px);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-contents + .crosstalk-contents {
    border: none;
    padding-top: 0;
    margin-top: calc(56 / 390 * var(--inner-width) * 1px);
  }
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-contents.crosstalk02 {
    flex-direction: column-reverse;
  }
}
.crosstalk .crosstalk-img {
  width: min(440px, 440 / 1280 * var(--inner-width) * 1px);
  height: min(290px, 290 / 1280 * var(--inner-width) * 1px);
  border-radius: min(4px, 4 / 1280 * var(--inner-width) * 1px);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: min(13px, 13 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-img {
    width: 100%;
    height: calc(257 / 390 * var(--inner-width) * 1px);
    border-radius: 0;
    padding-bottom: calc(23 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .bg {
  position: absolute;
  top: 0;
  left: 0;
}
.crosstalk .crosstalk-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
}
.crosstalk .crosstalk-caption > img {
  width: min(81px, 81 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-caption > img {
    width: calc(72 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .crosstalk-caption span {
  font-size: min(24px, 24 / 1280 * var(--inner-width) * 1px);
  color: #fff;
  width: min(158px, 158 / 1280 * var(--inner-width) * 1px);
  height: min(51px, 51 / 1280 * var(--inner-width) * 1px);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-caption span {
    font-size: calc(24 / 390 * var(--inner-width) * 1px);
    width: calc(140 / 390 * var(--inner-width) * 1px);
    height: calc(45 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .crosstalk-caption span:first-child {
  background: linear-gradient(to left, rgba(72, 166, 63, 0) 0%, rgba(72, 166, 63, 0.5) 14%, rgb(154, 197, 12) 88%, rgb(169, 203, 3) 100%);
}
.crosstalk .crosstalk-caption span:last-child {
  background: linear-gradient(to right, rgba(72, 166, 63, 0) 0%, rgba(72, 166, 63, 0.5) 14%, rgb(154, 197, 12) 88%, rgb(169, 203, 3) 100%);
}
.crosstalk .crosstalk-body {
  width: min(400px, 400 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-body {
    width: 100%;
    padding: 0 calc(24 / 390 * var(--inner-width) * 1px);
    margin-top: calc(32 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .crosstalk-body .crosstalk-theme {
  color: #48a63f;
  font-size: min(12px, 12 / 1280 * var(--inner-width) * 1px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: min(8px, 8 / 1280 * var(--inner-width) * 1px);
  margin-bottom: min(8px, 8 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-body .crosstalk-theme {
    font-size: calc(16 / 390 * var(--inner-width) * 1px);
    gap: calc(8 / 390 * var(--inner-width) * 1px);
    margin-bottom: calc(16 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .crosstalk-body .crosstalk-theme span {
  font-family: "Syncopate", sans-serif;
  font-size: min(20px, 20 / 1280 * var(--inner-width) * 1px);
  font-weight: 700;
  border-right: 1px solid #48a63f;
  line-height: 1;
  padding-right: min(8px, 8 / 1280 * var(--inner-width) * 1px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-body .crosstalk-theme span {
    font-size: calc(20 / 390 * var(--inner-width) * 1px);
    padding-right: calc(8 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .crosstalk-body .crosstalk-theme span b {
  transform: translateY(0.05em);
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-body .crosstalk-theme span b {
    transform: translateY(0.1em);
  }
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-body .crosstalk-theme.theme01 span b {
    transform: translateY(0.05em);
  }
}
.crosstalk .crosstalk-body h3 {
  font-size: min(20px, 20 / 1280 * var(--inner-width) * 1px);
  font-weight: 700;
  margin-bottom: min(20px, 20 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-body h3 {
    font-size: calc(20 / 390 * var(--inner-width) * 1px);
    margin-bottom: calc(7 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .crosstalk-body p {
  font-size: min(14px, 14 / 1280 * var(--inner-width) * 1px);
  line-height: 2;
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-body p {
    font-size: calc(14 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .crosstalk-body p + p {
  margin-top: 1em;
}
.crosstalk .crosstalk-body .button {
  margin-left: auto;
  width: min(168px, 168 / 1280 * var(--inner-width) * 1px);
  height: min(39px, 39 / 1280 * var(--inner-width) * 1px);
  padding: 0 min(10px, 10 / 1280 * var(--inner-width) * 1px);
  margin-top: min(24px, 24 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-body .button {
    width: calc(168 / 390 * var(--inner-width) * 1px);
    height: calc(40 / 390 * var(--inner-width) * 1px);
    padding: 0 calc(10 / 390 * var(--inner-width) * 1px);
    margin: calc(24 / 390 * var(--inner-width) * 1px) auto 0;
  }
}
.crosstalk .crosstalk-body .button > span {
  font-size: min(14px, 14 / 1280 * var(--inner-width) * 1px);
  white-space: nowrap;
}
@media only screen and (max-width: 48em) {
  .crosstalk .crosstalk-body .button > span {
    font-size: calc(14 / 390 * var(--inner-width) * 1px);
  }
}
.crosstalk .crosstalk-body .button .arrow {
  --arrow-size: 22;
  --arrow-sp-size: 22;
  background: #4dad30;
  color: #fff;
}

.movie-container {
  position: relative;
  padding-top: min(80px, 80 / 1280 * var(--inner-width) * 1px);
  padding-bottom: min(120px, 120 / 1280 * var(--inner-width) * 1px);
  background: #f3f3f3;
}
@media only screen and (max-width: 48em) {
  .movie-container {
    padding-top: calc(80 / 390 * var(--inner-width) * 1px);
    padding-bottom: calc(80 / 390 * var(--inner-width) * 1px);
  }
}
.movie-container .shortmovie-contents {
  width: 100%;
  margin-top: min(80px, 80 / 1280 * var(--inner-width) * 1px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: min(32px, 32 / 1280 * var(--inner-width) * 1px);
  row-gap: min(64px, 64 / 1280 * var(--inner-width) * 1px);
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 48em) {
  .movie-container .shortmovie-contents {
    margin-top: calc(36 / 390 * var(--inner-width) * 1px);
    gap: calc(9 / 390 * var(--inner-width) * 1px);
    row-gap: calc(40 / 390 * var(--inner-width) * 1px);
    padding: 0 calc(16 / 390 * var(--inner-width) * 1px);
  }
}
.movie-container .shortmovie-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(24px, 24 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .movie-container .shortmovie-item {
    gap: calc(16 / 390 * var(--inner-width) * 1px);
  }
}
.movie-container .shortmovie-item .shortmovie-thumbnail {
  width: min(272px, 272 / 1280 * var(--inner-width) * 1px);
  height: min(492px, 492 / 1280 * var(--inner-width) * 1px);
  border-radius: min(8px, 8 / 1280 * var(--inner-width) * 1px);
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 48em) {
  .movie-container .shortmovie-item .shortmovie-thumbnail {
    width: calc(171 / 390 * var(--inner-width) * 1px);
    height: calc(330 / 390 * var(--inner-width) * 1px);
    border-radius: calc(8 / 390 * var(--inner-width) * 1px);
  }
}
.movie-container .shortmovie-item .tag {
  width: min(114px, 114 / 1280 * var(--inner-width) * 1px);
  height: min(45px, 45 / 1280 * var(--inner-width) * 1px);
  background: #000;
  font-size: min(16px, 16 / 1280 * var(--inner-width) * 1px);
  font-weight: 700;
  color: #fff;
  font-family: "Syncopate", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: min(8px, 8 / 1280 * var(--inner-width) * 1px) 0 min(8px, 8 / 1280 * var(--inner-width) * 1px) 0;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 48em) {
  .movie-container .shortmovie-item .tag {
    width: calc(113 / 390 * var(--inner-width) * 1px);
    height: calc(34 / 390 * var(--inner-width) * 1px);
    border-radius: calc(8 / 390 * var(--inner-width) * 1px) 0 calc(8 / 390 * var(--inner-width) * 1px) 0;
    font-size: calc(16 / 390 * var(--inner-width) * 1px);
  }
}
.movie-container .shortmovie-item .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.movie-container .shortmovie-item .bg img {
  transition: 0.2s ease;
}
.movie-container .shortmovie-item .copy {
  font-size: min(16px, 16 / 1280 * var(--inner-width) * 1px);
  font-weight: 700;
  position: absolute;
  bottom: min(64px, 64 / 1280 * var(--inner-width) * 1px);
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: min(4px, 4 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .movie-container .shortmovie-item .copy {
    font-size: calc(18 / 390 * var(--inner-width) * 1px);
    bottom: calc(63 / 390 * var(--inner-width) * 1px);
    gap: calc(3 / 390 * var(--inner-width) * 1px);
  }
}
.movie-container .shortmovie-item .copy span {
  background: #fff;
  height: min(34px, 34 / 1280 * var(--inner-width) * 1px);
  padding: 0 min(10px, 10 / 1280 * var(--inner-width) * 1px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 48em) {
  .movie-container .shortmovie-item .copy span {
    height: calc(30 / 390 * var(--inner-width) * 1px);
    padding: 0 calc(8 / 390 * var(--inner-width) * 1px);
  }
}
.movie-container .shortmovie-item .data {
  width: 100%;
  height: min(48px, 48 / 1280 * var(--inner-width) * 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 0 0 min(8px, 8 / 1280 * var(--inner-width) * 1px) min(8px, 8 / 1280 * var(--inner-width) * 1px);
  font-size: min(14px, 14 / 1280 * var(--inner-width) * 1px);
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
@media only screen and (max-width: 48em) {
  .movie-container .shortmovie-item .data {
    height: calc(52 / 390 * var(--inner-width) * 1px);
    border-radius: 0 0 calc(8 / 390 * var(--inner-width) * 1px) calc(8 / 390 * var(--inner-width) * 1px);
    font-size: calc(14 / 390 * var(--inner-width) * 1px);
    text-align: center;
  }
}
.movie-container .shortmovie-item .button {
  width: min(160px, 160 / 1280 * var(--inner-width) * 1px);
  height: min(56px, 56 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .movie-container .shortmovie-item .button {
    width: calc(120 / 390 * var(--inner-width) * 1px);
    height: calc(34 / 390 * var(--inner-width) * 1px);
    padding-left: calc(24 / 390 * var(--inner-width) * 1px);
    padding-right: calc(16 / 390 * var(--inner-width) * 1px);
  }
  .movie-container .shortmovie-item .button span {
    font-size: calc(14 / 390 * var(--inner-width) * 1px);
  }
}
.movie-container .shortmovie-item .button .arrow {
  --arrow-size: 32;
  --arrow-sp-size: 22;
  background: #4dad30;
  color: #fff;
}
.movie-container .shortmovie-item:hover .bg img {
  transform: scale(1.1);
}

.real-questionnaire {
  padding-top: min(120px, 120 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-questionnaire {
    padding-top: calc(80 / 390 * var(--inner-width) * 1px);
  }
}
.real-questionnaire .real-lead {
  margin-bottom: min(56px, 56 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-questionnaire .real-lead {
    margin-bottom: calc(40 / 390 * var(--inner-width) * 1px);
  }
}
.real-questionnaire > img {
  border-radius: min(8px, 8 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-questionnaire > img {
    border-radius: 0;
    width: 100%;
    height: calc(280 / 390 * var(--inner-width) * 1px);
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.real-questionnaire .button {
  margin: min(40px, 40 / 1280 * var(--inner-width) * 1px) auto 0;
  width: min(240px, 240 / 1280 * var(--inner-width) * 1px);
  height: min(56px, 56 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-questionnaire .button {
    margin-top: calc(24 / 390 * var(--inner-width) * 1px);
    width: calc(184 / 390 * var(--inner-width) * 1px);
    height: calc(38 / 390 * var(--inner-width) * 1px);
    padding-left: calc(24 / 390 * var(--inner-width) * 1px);
    padding-right: calc(16 / 390 * var(--inner-width) * 1px);
  }
  .real-questionnaire .button span {
    font-size: calc(14 / 390 * var(--inner-width) * 1px);
  }
}
.real-questionnaire .button .arrow {
  --arrow-size: 32;
  --arrow-sp-size: 22;
  background: #4dad30;
  color: #fff;
}

.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: min(64px, 64 / 1280 * var(--inner-width) * 1px);
  bottom: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: min(32px, 32 / 1280 * var(--inner-width) * 1px) 0;
}
@media only screen and (max-width: 48em) {
  .modal {
    top: calc(64 / 390 * var(--inner-width) * 1px);
    padding: calc(16 / 390 * var(--inner-width) * 1px) 0;
  }
}
.modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #c1c1c1;
  mix-blend-mode: multiply;
}

.modal.is-open {
  display: flex;
}

.modal-inner {
  position: relative;
  background: #fff;
  width: min(920px, 920 / 1280 * var(--inner-width) * 1px);
  height: 100%;
  max-height: min(828px, 828 / 1280 * var(--inner-width) * 1px);
  border-radius: min(8px, 8 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal-inner {
    width: calc(358 / 390 * var(--inner-width) * 1px);
    padding: 0;
    max-height: calc(974 / 390 * var(--inner-width) * 1px);
    border-radius: calc(8 / 390 * var(--inner-width) * 1px);
    overflow: auto;
  }
}
.modal-inner .line-2 {
  left: min(656px, 656 / 1280 * var(--inner-width) * 1px);
  top: min(84px, 84 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal-inner .line-2 {
    left: calc(150 / 390 * var(--inner-width) * 1px);
    top: calc(84 / 390 * var(--inner-width) * 1px);
  }
}
.modal-inner .line-2 {
  width: min(528px, 528 / 1280 * var(--inner-width) * 1px);
  height: min(318px, 318 / 1280 * var(--inner-width) * 1px);
}
.modal-inner .line-2 img {
  width: min(528px, 528 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal-inner .line-2 {
    width: calc(464 / 390 * var(--inner-width) * 1px);
    height: calc(0.6022727273 * 464 / 390 * var(--inner-width) * 1px);
  }
  .modal-inner .line-2 img {
    width: calc(464 / 390 * var(--inner-width) * 1px);
  }
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: min(80px, 80 / 1280 * var(--inner-width) * 1px);
  height: min(80px, 80 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal-close {
    width: calc(48 / 390 * var(--inner-width) * 1px);
    height: calc(48 / 390 * var(--inner-width) * 1px);
  }
}

@media only screen and (max-width: 48em) {
  .modal-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(32 / 390 * var(--inner-width) * 1px);
    margin-top: calc(24 / 390 * var(--inner-width) * 1px);
  }
}

.modal-prev,
.modal-next {
  position: absolute;
  z-index: 2;
  width: min(55px, 55 / 1280 * var(--inner-width) * 1px);
  height: min(55px, 55 / 1280 * var(--inner-width) * 1px);
  bottom: min(64px, 64 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal-prev,
  .modal-next {
    position: relative;
    width: calc(55 / 390 * var(--inner-width) * 1px);
    height: calc(55 / 390 * var(--inner-width) * 1px);
    bottom: calc(48 / 390 * var(--inner-width) * 1px);
  }
}
.modal-prev .arrow,
.modal-next .arrow {
  --arrow-size: 55;
  --arrow-sp-size: 55;
  background: #4dad30;
  color: #fff;
}

.modal-prev {
  right: min(140px, 140 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal-prev {
    right: auto;
  }
}

.modal-next {
  right: min(52px, 52 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal-next {
    right: auto;
  }
}

.modal .swiper {
  height: 100%;
}
@media only screen and (max-width: 48em) {
  .modal .swiper {
    height: auto;
  }
}
.modal .swiper-slide {
  padding: min(64px, 64 / 1280 * var(--inner-width) * 1px) min(48px, 48 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal .swiper-slide {
    padding: calc(48 / 390 * var(--inner-width) * 1px) calc(32 / 390 * var(--inner-width) * 1px);
  }
}
.modal .slide-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 5fr 3fr;
  height: 100%;
  gap: min(40px, 40 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal .slide-inner {
    display: block;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }
}
.modal .movie {
  grid-column: 1/2;
  grid-row: 1/3;
  flex-shrink: 0;
  width: auto;
  height: 100%;
  max-width: min(390px, 390 / 1280 * var(--inner-width) * 1px);
  max-height: min(694px, 694 / 1280 * var(--inner-width) * 1px);
  aspect-ratio: 9/16;
  border-radius: min(8px, 8 / 1280 * var(--inner-width) * 1px);
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
@media only screen and (max-width: 48em) {
  .modal .movie {
    order: 2;
    max-width: unset;
    max-height: unset;
    width: auto;
    height: auto;
    border-radius: 0;
    overflow: visible;
    aspect-ratio: unset;
    margin-bottom: calc(12 / 390 * var(--inner-width) * 1px);
  }
}
.modal .movie button {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(136px, 136 / 1280 * var(--inner-width) * 1px);
  height: min(136px, 136 / 1280 * var(--inner-width) * 1px);
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media only screen and (max-width: 48em) {
  .modal .movie button {
    width: calc(116 / 390 * var(--inner-width) * 1px);
    height: calc(116 / 390 * var(--inner-width) * 1px);
  }
}
.modal .movie button:hover {
  opacity: 0.6;
}
.modal .movie img {
  position: absolute;
  left: 0;
  top: 0;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
.modal .movie iframe {
  width: 100%;
  height: 100%;
  display: block;
}
@media only screen and (max-width: 48em) {
  .modal .movie iframe {
    width: calc(294 / 390 * var(--inner-width) * 1px);
    height: calc(523 / 390 * var(--inner-width) * 1px);
  }
}
.modal .movie.is-active button,
.modal .movie.is-active img {
  opacity: 0;
  pointer-events: none;
}
.modal .movie-body {
  grid-column: 2/3;
  grid-row: 1/2;
  align-self: end;
}
@media only screen and (max-width: 48em) {
  .modal .movie-body {
    order: 1;
    align-self: stretch;
    margin-bottom: calc(32 / 390 * var(--inner-width) * 1px);
  }
}
.modal .movie-body h3 {
  font-size: min(32px, 32 / 1280 * var(--inner-width) * 1px);
  font-weight: 700;
  border-bottom: 1px solid #c8c8c8;
  padding-bottom: min(24px, 24 / 1280 * var(--inner-width) * 1px);
  margin-bottom: min(16px, 16 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal .movie-body h3 {
    font-size: calc(32 / 390 * var(--inner-width) * 1px);
    margin-bottom: calc(8 / 390 * var(--inner-width) * 1px);
    padding-bottom: calc(8 / 390 * var(--inner-width) * 1px);
  }
}
.modal .movie-body h3 small {
  font-size: min(24px, 24 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal .movie-body h3 small {
    font-size: calc(24 / 390 * var(--inner-width) * 1px);
  }
}
.modal .movie-body p {
  font-size: min(16px, 16 / 1280 * var(--inner-width) * 1px);
  font-weight: 500;
  line-height: 2;
}
@media only screen and (max-width: 48em) {
  .modal .movie-body p {
    font-size: calc(16 / 390 * var(--inner-width) * 1px);
  }
}
.modal .button {
  grid-column: 2/3;
  grid-row: 2/3;
  align-self: start;
  width: min(224px, 224 / 1280 * var(--inner-width) * 1px);
  height: min(40px, 40 / 1280 * var(--inner-width) * 1px);
  padding-left: min(56px, 56 / 1280 * var(--inner-width) * 1px);
  padding-right: min(10px, 10 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal .button {
    order: 3;
    align-self: center;
    width: calc(176 / 390 * var(--inner-width) * 1px);
    height: calc(40 / 390 * var(--inner-width) * 1px);
    padding-left: calc(18 / 390 * var(--inner-width) * 1px);
    padding-right: calc(10 / 390 * var(--inner-width) * 1px);
    margin: 0 auto;
  }
}
.modal .button span {
  font-size: min(14px, 14 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .modal .button span {
    font-size: calc(14 / 390 * var(--inner-width) * 1px);
  }
}
.modal .button .arrow {
  --arrow-size: 22;
  --arrow-sp-size: 22;
  background: #4dad30;
  color: #fff;
}

.real-lines-1 .lines {
  transform: translate(0, max(-100px, -100 / 1280 * var(--inner-width) * 1px));
}
@media only screen and (max-width: 48em) {
  .real-lines-1 .lines {
    transform: translate(0, 0);
  }
}
.real-lines-1 .line-4 {
  top: 0;
  left: calc(50% + min(397px, 397 / 1280 * var(--inner-width) * 1px));
}
@media only screen and (max-width: 48em) {
  .real-lines-1 .line-4 {
    left: auto;
    top: calc(150 / 390 * var(--inner-width) * 1px);
    right: calc(-252 / 390 * var(--inner-width) * 1px);
  }
}
.real-lines-1 .line-4 {
  width: min(582px, 582 / 1280 * var(--inner-width) * 1px);
  height: min(500px, 500 / 1280 * var(--inner-width) * 1px);
}
.real-lines-1 .line-4 img {
  width: min(582px, 582 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-lines-1 .line-4 {
    width: calc(424 / 390 * var(--inner-width) * 1px);
    height: calc(0.8591065292 * 424 / 390 * var(--inner-width) * 1px);
  }
  .real-lines-1 .line-4 img {
    width: calc(424 / 390 * var(--inner-width) * 1px);
  }
}

.real-lines-2 .line-1 {
  top: min(780px, 780 / 1280 * var(--inner-width) * 1px);
  right: calc(50% + min(324px, 324 / 1280 * var(--inner-width) * 1px));
}
@media only screen and (max-width: 48em) {
  .real-lines-2 .line-1 {
    top: calc(1220 / 390 * var(--inner-width) * 1px);
    right: auto;
    left: calc(-340 / 390 * var(--inner-width) * 1px);
  }
}
.real-lines-2 .line-1 {
  width: min(548px, 548 / 1280 * var(--inner-width) * 1px);
  height: min(362px, 362 / 1280 * var(--inner-width) * 1px);
}
.real-lines-2 .line-1 img {
  width: min(548px, 548 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-lines-2 .line-1 {
    width: calc(494 / 390 * var(--inner-width) * 1px);
    height: calc(0.6605839416 * 494 / 390 * var(--inner-width) * 1px);
  }
  .real-lines-2 .line-1 img {
    width: calc(494 / 390 * var(--inner-width) * 1px);
  }
}

.real-lines-3 .lines {
  transform: translate(0, max(-128px, -128 / 1280 * var(--inner-width) * 1px));
}
@media only screen and (max-width: 48em) {
  .real-lines-3 .lines {
    transform: translate(0, calc(-160 / 390 * var(--inner-width) * 1px));
  }
}
.real-lines-3 .line-2 {
  top: 0;
  left: calc(50% + min(384px, 384 / 1280 * var(--inner-width) * 1px));
}
@media only screen and (max-width: 48em) {
  .real-lines-3 .line-2 {
    left: auto;
    right: calc(-298 / 390 * var(--inner-width) * 1px);
  }
}
.real-lines-3 .line-2 {
  width: min(528px, 528 / 1280 * var(--inner-width) * 1px);
  height: min(318px, 318 / 1280 * var(--inner-width) * 1px);
}
.real-lines-3 .line-2 img {
  width: min(528px, 528 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-lines-3 .line-2 {
    width: calc(484 / 390 * var(--inner-width) * 1px);
    height: calc(0.6022727273 * 484 / 390 * var(--inner-width) * 1px);
  }
  .real-lines-3 .line-2 img {
    width: calc(484 / 390 * var(--inner-width) * 1px);
  }
}

@media only screen and (max-width: 48em) {
  .real-lines-4 .lines {
    transform: translate(0, calc(70 / 390 * var(--inner-width) * 1px));
  }
}
.real-lines-4 .line-2 {
  bottom: min(330px, 330 / 1280 * var(--inner-width) * 1px);
  right: calc(50% + min(360px, 360 / 1280 * var(--inner-width) * 1px));
  transform: scale(-1, 1);
}
@media only screen and (max-width: 48em) {
  .real-lines-4 .line-2 {
    bottom: 0;
    right: auto;
    left: calc(-281 / 390 * var(--inner-width) * 1px);
  }
}
.real-lines-4 .line-2 {
  width: min(528px, 528 / 1280 * var(--inner-width) * 1px);
  height: min(318px, 318 / 1280 * var(--inner-width) * 1px);
}
.real-lines-4 .line-2 img {
  width: min(528px, 528 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-lines-4 .line-2 {
    width: calc(484 / 390 * var(--inner-width) * 1px);
    height: calc(0.6022727273 * 484 / 390 * var(--inner-width) * 1px);
  }
  .real-lines-4 .line-2 img {
    width: calc(484 / 390 * var(--inner-width) * 1px);
  }
}

@media only screen and (max-width: 48em) {
  .real-lines-5 .line-4 {
    top: calc(546 / 390 * var(--inner-width) * 1px);
    right: calc(-176 / 390 * var(--inner-width) * 1px);
  }
}
.real-lines-5 .line-4 {
  width: min(666px, 666 / 1280 * var(--inner-width) * 1px);
  height: min(572px, 572 / 1280 * var(--inner-width) * 1px);
}
.real-lines-5 .line-4 img {
  width: min(666px, 666 / 1280 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .real-lines-5 .line-4 {
    width: calc(424 / 390 * var(--inner-width) * 1px);
    height: calc(0.8588588589 * 424 / 390 * var(--inner-width) * 1px);
  }
  .real-lines-5 .line-4 img {
    width: calc(424 / 390 * var(--inner-width) * 1px);
  }
}/*# sourceMappingURL=real.css.map */