@charset "UTF-8";
/* reset:start */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul {
  list-style: none;
}

[hidden] {
  display: none;
}

.cont__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cont__center > * {
  min-height: 0%;
}

.movie__container, .lead__container, .cont__container, .cont__container--small {
  max-width: 1100px;
  margin: 0 auto;
}
@media screen and (max-width: 1440px) {
  .movie__container, .lead__container, .cont__container, .cont__container--small {
    max-width: 76.3888888889vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__container, .lead__container, .cont__container, .cont__container--small {
    max-width: 91.2646675359vw;
    padding: 0;
  }
}

.cont__container--small {
  max-width: 870px;
}
@media screen and (max-width: 767px) {
  .cont__container--small {
    max-width: 89.3333333333vw;
  }
}

.link {
  color: inherit;
  transition: opacity 0.3s;
  cursor: pointer;
}
.link:hover {
  opacity: 0.7;
}

.movie__title-dec, .movie__dec--01, .movie__dec--02, .movie__dec--03, .movie__dec--04, .movie__dec--05, .movie__content-dec--01, .movie__content-dec--02, .movie__content-dec--03, .make__dec, .make__glass, .lead::after, .lead__title-dec {
  position: absolute;
  display: block;
  z-index: 0;
}

/* common:start */
[v-cloak] {
  display: none;
}

@media screen and (max-width: 767px) {
  .pcOnly {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .spOnly {
    display: none !important;
  }
}

#kyogetsu {
  font-family: "Noto Sans JP", sans-serif;
  overflow: hidden;
}

/* ====================================
   フェードインのベーススタイル
   ==================================== */
.js-fadein {
  /* 初期状態: 透明かつ少し下に移動 */
  opacity: 0;
  transform: translateY(20px);
  /* アニメーション時間の設定 */
  transition: opacity 1s, transform 1s;
}
.js-fadein.left {
  transform: translateY(0) translateX(-20px);
}
.js-fadein.right {
  transform: translateY(0) translateX(20px);
}

/* ====================================
   表示時のスタイル (JSで付与されるクラス)
   ==================================== */
.js-fadein.is-show {
  /* 表示状態: 透明度を戻し、位置を元に戻す */
  opacity: 1;
  transform: translateY(0);
}
.js-fadein.is-show.dec {
  opacity: 0.4;
}

/* ====================================
   遅延フェードインのベーススタイル (.js-delay-fadeを持つ要素に適用)
   ==================================== */
/* フェードイン対象要素 */
.kv__bottle,
.kv__voice,
.kv__title {
  /* 初期状態: 非表示 */
  opacity: 0;
  /* 任意: わずかな動きを追加してよりリッチに */
  /* transform: translateY(10px); */
  /* アニメーションの時間を定義 */
  transition: opacity 1.2s ease-out; /* 0.8秒かけてフェードイン */
  /* transition: opacity 0.8s ease-out, transform 0.8s ease-out; */ /* 動きも加える場合 */
}

.kv__bottle {
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  transform: translateY(20px);
}

.kv__bottle.is-show {
  transform: translateY(0);
}

/* ====================================
   表示時のスタイル (JSで付与されるクラス)
   ==================================== */
.kv__bottle.is-show,
.kv__voice.is-show,
.kv__title.is-show {
  /* 表示状態: 透明度を戻す */
  opacity: 1;
  /* 任意: 動きを元に戻す */
  /* transform: translateY(0); */
}

/* common:end */
.kv__voice, .kv__bottle, .kv__title {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}

/* kv:start */
.kv {
  background-image: url(/sho-chu/kyougetsu/kamiwariuronhai/images/pc/kv_bg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .kv {
    background-image: url(/sho-chu/kyougetsu/kamiwariuronhai/images/sp/kv_bg.jpg);
  }
}
.kv__caution {
  width: 100%;
  position: relative;
  z-index: 1;
}
.kv__image {
  width: 100%;
}

/* kv:end */
/* lead:start */
.lead {
  background-image: url(/sho-chu/kyougetsu/kamiwariuronhai/images/pc/lead_bg.jpg);
  background-size: auto;
  background-repeat: repeat;
  background-position: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .lead {
    background-size: 26.075619296vw;
  }
}
.lead::after {
  content: "";
  width: 100%;
  height: 117px;
  background-image: url(/sho-chu/kyougetsu/kamiwariuronhai/images/pc/lead_bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1441px) {
  .lead::after {
    height: 8.1193615545vw;
  }
}
@media screen and (max-width: 767px) {
  .lead::after {
    background-image: url(/sho-chu/kyougetsu/kamiwariuronhai/images/sp/lead_bg.png);
    background-size: cover;
    height: 14.9934810952vw;
  }
}
.lead__container {
  padding-top: 103px;
  padding-bottom: 145px;
}
@media screen and (max-width: 1440px) {
  .lead__container {
    padding-top: 7.1527777778vw;
    padding-bottom: 10.0694444444vw;
  }
}
@media screen and (max-width: 767px) {
  .lead__container {
    padding-top: 13.6897001304vw;
    padding-bottom: 30.3780964798vw;
  }
}
.lead__title {
  max-width: 802px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1440px) {
  .lead__title {
    max-width: 55.6944444444vw;
  }
}
@media screen and (max-width: 767px) {
  .lead__title {
    max-width: 86.1799217731vw;
  }
}
.lead__title-image {
  position: relative;
  z-index: 1;
}
.lead__title-dec {
  width: 718px;
  height: 180px;
  left: -180px;
  top: -64px;
  z-index: 0;
  opacity: 0.5;
}
@media screen and (max-width: 1440px) {
  .lead__title-dec {
    width: 49.8611111111vw;
    height: 12.5vw;
    left: -12.1527777778vw;
    top: -4.4444444444vw;
  }
}
@media screen and (max-width: 767px) {
  .lead__title-dec {
    width: 84.2242503259vw;
    left: -6.518904824vw;
    top: -6.1277705346vw;
  }
}
.lead__text {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.75;
  color: #fff;
  text-align: center;
  margin-top: 3.4545454545%;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
}
@media screen and (max-width: 1440px) {
  .lead__text {
    font-size: 1.6666666667vw;
    margin-top: 2.6388888889vw;
  }
}
@media screen and (max-width: 767px) {
  .lead__text {
    font-size: 3.9113428944vw;
    line-height: 1.9333333333;
    margin-top: 7.1707953064vw;
    letter-spacing: 0.06em;
  }
}

/* lead:end */
/* make:start */
.make {
  margin-top: 85px;
}
@media screen and (max-width: 1440px) {
  .make {
    margin-top: 5.9027777778vw;
  }
}
@media screen and (max-width: 767px) {
  .make {
    margin-top: 11.3333333333vw;
  }
}
.make__container {
  position: relative;
  background-color: #1a6529;
  max-width: 870px;
  margin: 0 5.2727272727% 0 auto;
  padding: 50px 0 65px;
}
@media screen and (max-width: 1440px) {
  .make__container {
    padding: 3.4722222222vw 0 4.5138888889vw;
    max-width: 60.4166666667vw;
  }
}
@media screen and (max-width: 767px) {
  .make__container {
    padding: 6.6666666667vw 2.6666666667vw 25.3333333333vw;
    max-width: 100%;
    margin: 0 auto;
  }
}
.make__dec {
  width: 551px;
  height: 84px;
  top: -40px;
  right: -90px;
  z-index: 0;
  opacity: 0.5;
}
@media screen and (max-width: 1440px) {
  .make__dec {
    width: 38.2638888889vw;
    height: 5.8333333333vw;
    top: -2.7777777778vw;
    right: -6.25vw;
  }
}
@media screen and (max-width: 767px) {
  .make__dec {
    width: 64.7979139505vw;
    height: 9.778357236vw;
    top: -5.2151238592vw;
    right: -3.9113428944vw;
  }
}
.make__title {
  width: 35.7471264368%;
  margin: 0 auto 0 35.1724137931%;
}
@media screen and (max-width: 767px) {
  .make__title {
    width: 47.9791395046vw;
    margin-left: 20.2086049544vw;
  }
}
.make__image {
  width: 65.632183908%;
  margin: 3.6781609195% auto 0 18.9655172414%;
}
@media screen and (max-width: 767px) {
  .make__image {
    width: 80.8344198175vw;
    margin-top: 5.2151238592vw;
    margin-inline: auto;
  }
}
.make__text {
  width: 36.2068965517%;
  margin: 2.6436781609% auto 0 33.6781609195%;
}
@media screen and (max-width: 767px) {
  .make__text {
    width: 47.5880052151vw;
    margin: 5.2151238592vw auto 0;
  }
}
.make__note {
  color: #fff;
  font-size: 18px;
  line-height: 1.6666666667;
  text-align: center;
  margin-top: 2.0689655172%;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
  margin-left: 10px;
}
@media screen and (max-width: 1440px) {
  .make__note {
    font-size: 1.25vw;
    margin-left: 0.6944444444vw;
  }
}
@media screen and (max-width: 767px) {
  .make__note {
    font-size: 3.3898305085vw;
    line-height: 1.7692307692;
    margin: 2.3468057366vw auto 0;
  }
}
.make__caution {
  color: #fff;
  font-size: 14px;
  line-height: 1.5714285714;
  margin-top: 1.3793103448%;
  padding-left: 23.2183908046%;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
}
@media screen and (max-width: 1440px) {
  .make__caution {
    font-size: 0.9722222222vw;
    margin-top: 0.8333333333vw;
    padding-left: 14.0277777778vw;
  }
}
@media screen and (max-width: 767px) {
  .make__caution {
    font-size: 2.6075619296vw;
    line-height: 1.6;
    margin: 1.3037809648vw auto 0;
    padding-left: 0;
  }
}
.make__caution-item {
  padding-left: 1em;
  text-indent: -1em;
}
.make__caution-item::before {
  content: "※";
}
.make__glass {
  width: 372px;
  height: 679px;
  top: 149px;
  left: -258px;
}
@media screen and (max-width: 1440px) {
  .make__glass {
    width: 25.8333333333vw;
    height: 47.1527777778vw;
    top: 10.3472222222vw;
    left: -17.9166666667vw;
  }
}
@media screen and (max-width: 767px) {
  .make__glass {
    width: 74.44589309vw;
    height: 53.5853976532vw;
    left: 8.6049543677vw;
    top: auto;
    bottom: -30.6388526728vw;
  }
}

/* make:end */
/* movie:start */
.movie {
  background-image: url(/sho-chu/kyougetsu/kamiwariuronhai/images/pc/movie_bg.jpg);
  background-size: auto;
  background-repeat: repeat;
  background-position: center;
  position: relative;
}
@media screen and (max-width: 1440px) {
  .movie {
    background-size: 13.8888888889vw;
  }
}
@media screen and (min-width: 1441px) {
  .movie {
    background-size: 13.8888888889vw;
  }
}
@media screen and (max-width: 767px) {
  .movie {
    background-size: 26.075619296vw;
  }
}
.movie__container {
  padding-top: 78px;
  padding-bottom: 140px;
}
@media screen and (max-width: 767px) {
  .movie__container {
    padding-top: 11.0821382008vw;
    padding-bottom: 20.2086049544vw;
  }
}
.movie__title {
  width: 747px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 1440px) {
  .movie__title {
    width: 51.875vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__title {
    width: 79.4002607562vw;
  }
}
.movie__title-image {
  position: relative;
  z-index: 1;
}
.movie__title-dec {
  width: 585px;
  height: 181px;
  top: -8px;
  left: 80px;
}
@media screen and (max-width: 1440px) {
  .movie__title-dec {
    width: 40.625vw;
    height: 12.5694444444vw;
    top: -0.5555555556vw;
    left: 5.5555555556vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__title-dec {
    width: 68.5788787484vw;
    height: 22.4250325945vw;
    top: -0.5215123859vw;
    left: 5.9973924381vw;
  }
}
.movie__dec--01 {
  width: 428px;
  height: 67px;
  top: 11px;
  right: 0;
  opacity: 0.1;
}
@media screen and (max-width: 1440px) {
  .movie__dec--01 {
    width: 29.7222222222vw;
    height: 4.6527777778vw;
    top: 0.7638888889vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__dec--01 {
    width: 18.1225554107vw;
    height: 6.9100391134vw;
    top: -0.6518904824vw;
  }
}
.movie__dec--02 {
  width: 314px;
  height: 63px;
  top: 242px;
  left: 0;
  opacity: 0.1;
}
@media screen and (max-width: 1440px) {
  .movie__dec--02 {
    width: 21.8055555556vw;
    height: 4.375vw;
    top: 16.8055555556vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__dec--02 {
    width: 16.29726206vw;
    height: 6.7796610169vw;
    top: 32.9856584094vw;
  }
}
.movie__dec--03 {
  width: 169px;
  height: 36px;
  top: 707px;
  right: 0;
  opacity: 0.1;
}
@media screen and (max-width: 1440px) {
  .movie__dec--03 {
    width: 11.7361111111vw;
    height: 2.5vw;
    top: 49.0972222222vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__dec--03 {
    width: 21.5123859192vw;
    height: 4.0417209909vw;
    top: 153.8461538462vw;
    right: 0;
  }
}
.movie__dec--04 {
  width: 314px;
  height: 51px;
  top: 1198px;
  left: 0;
  opacity: 0.1;
}
@media screen and (max-width: 1440px) {
  .movie__dec--04 {
    width: 21.8055555556vw;
    height: 3.5416666667vw;
    top: 83.1944444444vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__dec--04 {
    width: 25.4237288136vw;
    height: 4.4328552803vw;
    top: 275.4889178618vw;
  }
}
.movie__dec--05 {
  width: 410px;
  height: 91px;
  top: 1642px;
  right: 0;
  opacity: 0.1;
}
@media screen and (max-width: 1440px) {
  .movie__dec--05 {
    width: 28.4722222222vw;
    height: 6.3194444444vw;
    top: 114.0277777778vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__dec--05 {
    width: 37.2881355932vw;
    height: 9.9087353325vw;
    top: 404.4328552803vw;
  }
}
.movie__content {
  margin-top: 82px;
}
@media screen and (max-width: 1440px) {
  .movie__content {
    margin-top: 5.6944444444vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content {
    margin-top: 9.1264667536vw;
  }
}
.movie__content-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (max-width: 767px) {
  .movie__content-item {
    flex-direction: column;
  }
}
.movie__content-item:nth-child(even) {
  flex-direction: row-reverse;
  margin-left: -5px;
}
@media screen and (max-width: 1440px) {
  .movie__content-item:nth-child(even) {
    margin-left: -0.3472222222vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-item:nth-child(even) {
    flex-direction: column;
    margin-left: 0;
  }
}
.movie__content-item:not(:last-child) {
  margin-bottom: 82px;
}
@media screen and (max-width: 1440px) {
  .movie__content-item:not(:last-child) {
    margin-bottom: 5.6944444444vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-item:not(:last-child) {
    margin-bottom: 11.7340286832vw;
  }
}
.movie__content-name {
  position: relative;
}
.movie__content-name-image {
  position: relative;
  z-index: 1;
}
.movie__content-dec--01 {
  width: 197px;
  height: 74px;
  top: -30px;
  right: 5px;
}
@media screen and (max-width: 1440px) {
  .movie__content-dec--01 {
    width: 13.6805555556vw;
    height: 5.1388888889vw;
    top: -2.0833333333vw;
    right: 0.3472222222vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-dec--01 {
    width: 25.6844850065vw;
    height: 9.6479791395vw;
    top: -1.3037809648vw;
    right: -3.3898305085vw;
  }
}
.movie__content-dec--02 {
  width: 220px;
  height: 74px;
  top: -42px;
  left: 0;
}
@media screen and (max-width: 1440px) {
  .movie__content-dec--02 {
    width: 15.2777777778vw;
    height: 5.1388888889vw;
    top: -2.9166666667vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-dec--02 {
    width: 28.5528031291vw;
    height: 9.6479791395vw;
    top: -1.1734028683vw;
    left: auto;
    right: -4.4328552803vw;
  }
}
.movie__content-dec--03 {
  width: 208px;
  height: 74px;
  top: -14px;
  right: -5px;
}
@media screen and (max-width: 1440px) {
  .movie__content-dec--03 {
    width: 14.4444444444vw;
    height: 5.1388888889vw;
    top: -0.9722222222vw;
    right: -0.3472222222vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-dec--03 {
    width: 28.5528031291vw;
    height: 9.6479791395vw;
    top: -2.0860495437vw;
    right: -5.2151238592vw;
  }
}
.movie__content-thumbnail {
  width: 680px;
  overflow: hidden;
}
@media screen and (max-width: 1440px) {
  .movie__content-thumbnail {
    width: 47.2222222222vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-thumbnail {
    width: 100%;
  }
}
.movie__content-thumbnail a img {
  transition: 0.2s transform;
}
.movie__content-thumbnail a img:hover {
  transform: scale(1.2);
}
.movie__content-text--01 {
  width: 395px;
  margin-left: 25px;
  padding-top: 21px;
}
@media screen and (max-width: 1440px) {
  .movie__content-text--01 {
    width: 27.4305555556vw;
    margin-left: 1.7361111111vw;
    padding-top: 1.4583333333vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-text--01 {
    width: 100%;
    padding-top: 0;
    margin-top: 5.6062581486vw;
    margin-left: 0;
  }
}
.movie__content-text--01 .movie__content-name {
  width: 390px;
}
@media screen and (max-width: 1440px) {
  .movie__content-text--01 .movie__content-name {
    width: 27.0833333333vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-text--01 .movie__content-name {
    width: 73.5332464146vw;
    margin: 0 auto;
  }
}
.movie__content-text--02 {
  width: 399px;
  margin-right: 23px;
  padding-top: 45px;
}
@media screen and (max-width: 1440px) {
  .movie__content-text--02 {
    width: 27.7083333333vw;
    margin-right: 1.5972222222vw;
    padding-top: 3.125vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-text--02 {
    width: 100%;
    padding-top: 0;
    margin-top: 5.6062581486vw;
    margin-right: 0;
  }
}
.movie__content-text--02 .movie__content-name {
  width: 395px;
}
@media screen and (max-width: 1440px) {
  .movie__content-text--02 .movie__content-name {
    width: 27.4305555556vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-text--02 .movie__content-name {
    width: 72.2294654498vw;
    margin: 0 auto;
  }
}
.movie__content-text--03 {
  width: 381px;
  margin-left: 31px;
  padding-top: 3px;
}
@media screen and (max-width: 1440px) {
  .movie__content-text--03 {
    width: 26.4583333333vw;
    margin-left: 2.1527777778vw;
    padding-top: 0.2083333333vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-text--03 {
    width: 100%;
    padding-top: 0;
    margin-top: 5.6062581486vw;
    margin-left: 0;
  }
}
.movie__content-text--03 .movie__content-name {
  width: 381px;
}
@media screen and (max-width: 1440px) {
  .movie__content-text--03 .movie__content-name {
    width: 26.4583333333vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-text--03 .movie__content-name {
    width: 71.186440678vw;
    margin: 0 auto;
  }
}
.movie__content-detail {
  font-size: 18px;
  line-height: 1.6666666667;
  margin-top: 23px;
  margin-left: 5px;
  font-feature-settings: "palt";
}
@media screen and (max-width: 1440px) {
  .movie__content-detail {
    font-size: 1.25vw;
  }
}
@media screen and (max-width: 767px) {
  .movie__content-detail {
    font-size: 3.3898305085vw;
    line-height: 1.7692307692;
    margin-top: 3.3898305085vw;
    margin-left: auto;
    margin-right: auto;
    width: 80.8344198175vw;
    letter-spacing: 0.02em;
  }
}

/* movie:end */
/* banner:start */
.banner__container {
  background-color: #fff;
  padding-top: 80px;
  padding-bottom: 82px;
  max-width: 840px;
  margin-inline: auto;
}
@media screen and (max-width: 1440px) {
  .banner__container {
    padding-top: 5.5555555556vw;
    padding-bottom: 5.6944444444vw;
    max-width: 58.3333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .banner__container {
    padding-top: 8.8657105606vw;
    padding-bottom: 3.1290743155vw;
    max-width: 91.2646675359vw;
  }
}
.banner__link {
  box-shadow: 0px 6px 13px 0px rgba(56, 56, 56, 0.3);
  background-color: #000;
}
@media screen and (max-width: 767px) {
  .banner__link {
    box-shadow: 0px 0.8vw 3.4666666667vw 0px rgba(56, 56, 56, 0.3);
  }
}
.banner__link a img {
  transition: 0.2s opacity;
}
.banner__link a img:hover {
  opacity: 0.9;
}
.banner__note {
  font-size: 14px;
  line-height: 1.8571428571;
  margin-top: 55px;
}
@media screen and (max-width: 1440px) {
  .banner__note {
    font-size: 0.9722222222vw;
    margin-top: 3.8194444444vw;
  }
}
@media screen and (max-width: 767px) {
  .banner__note {
    font-size: 2.6075619296vw;
    line-height: 1.6;
    margin-top: 6.9333333333vw;
    letter-spacing: 0.04em;
  }
}
.banner__note-item {
  padding-left: 1em;
  text-indent: -1em;
}
.banner__note-item::before {
  content: "※";
}

/* banner:end */
/* xxx:start */
.modal {
  /* 初期状態は非表示 */
  display: none;
  /* 常に最前面に表示 */
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* モーダル自体がスクロールしないように */
  /* JavaScriptでモーダルが表示されたときに適用 */
  /* ====================================
    モーダルの背景
    ==================================== */
  /* ====================================
    モーダルの中身（動画コンテナと閉じるボタン）
    ==================================== */
  /* ====================================
    動画コンテナ（レスポンシブ対応のための親要素）
    ==================================== */
  /* iframe（動画プレイヤー）のスタイル */
  /* ====================================
  閉じるボタン
  ==================================== */
}
.modal.is-active {
  display: block;
}
.modal__bg {
  background: rgba(255, 255, 255, 0.9);
  /* 半透明の黒 */
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  /* 背景クリックで閉じられることを示す */
}
.modal__content {
  /* 画面中央に配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* サイズ設定 */
  width: 90%;
  max-width: 1140px;
  /* 動画の最大幅の目安 */
  padding: 0;
}
@media screen and (max-width: 767px) {
  .modal__content {
    width: 100%;
  }
}
.modal__video-container {
  position: relative;
  /* 16:9のアスペクト比を維持するためのpadding (縦/横 = 9/16 = 56.25%) */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background-color: black;
}
.modal__video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal__close {
  position: absolute;
  top: -56px;
  /* 動画コンテナの上部に配置 */
  right: 22.5px;
  /* ボタンの見た目 */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.2s;
  font-size: 0;
}
.modal__close::before {
  position: absolute;
  display: block;
  content: "";
  width: 45px;
  height: 6px;
  background-color: #007b2f;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}
@media screen and (max-width: 767px) {
  .modal__close::before {
    width: 5.8670143416vw;
    height: 0.7822685789vw;
  }
}
.modal__close::after {
  position: absolute;
  display: block;
  content: "";
  width: 45px;
  height: 6px;
  background-color: #007b2f;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
@media screen and (max-width: 767px) {
  .modal__close::after {
    width: 5.8670143416vw;
    height: 0.7822685789vw;
  }
}
@media screen and (max-width: 767px) {
  .modal__close {
    top: -5.6062581486vw;
    right: 4.3024771838vw;
  }
}
.modal__close:hover {
  opacity: 1;
}

/* xxx:end */