@charset "UTF-8";
/* aタグ設定
------------------------------------- */
@media (any-hover: hover) {
  a:hover, button:hover {
    opacity: 0.75;
  }
}

a, button {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
  text-decoration: none;
  color: currentColor;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* 基本設定
------------------------------------- */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  -webkit-text-size-adjust: 100%;
  font-size: 1.4rem; /* =14px */
  color: #2A2E4F;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
}
body.on {
  overflow: hidden;
}

ul {
  list-style: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media print {
  img {
    display: none;
  }
}
img {
  pointer-events: none;
}

h1,
h2,
p,
img,
ul,
ol {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* デフォルトの三角形アイコンを非表示にする */
summary {
  display: block;
  list-style: none;
}

summary::-webkit-details-marker,
summary::marker {
  display: none;
}

/* レスポンシブ設定
------------------------------------- */
.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}
.font-en {
  font-family: "Open Sans", "Noto Sans JP", sans-serif;
}

.font-en02 {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.inner {
  max-width: 1240px;
  padding: 0 20px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .inner {
    max-width: 100%;
    padding: 0 5.3333333333vw;
  }
}

.movie {
  margin: 120px auto 0;
  max-width: 966px;
}
@media screen and (max-width: 768px) {
  .movie .main-body__top {
    margin-bottom: 0;
  }
}

.main-body {
  padding: 186px 20px 120px;
  background-color: rgba(255, 255, 255, 0.6);
}
@media screen and (max-width: 768px) {
  .main-body {
    padding: 16vw 4vw;
  }
}
.main-body__top {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .main-body__top {
    margin-bottom: 16vw;
  }
}
.main-body__top iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.main-body__thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  cursor: pointer;
  pointer-events: inherit;
}

.section-title {
  width: -moz-fit-content;
  width: fit-content;
  min-height: 71px;
  background-image: url("../images/bg-title.webp");
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.6rem;
  font-weight: 600;
  font-style: italic;
  color: #fff;
  letter-spacing: 0.0571428571;
  padding: 2px 30px;
  margin-bottom: 45px;
}
@media screen and (max-width: 768px) {
  .section-title {
    min-height: 11.7333333333vw;
    font-size: 5.8666666667vw;
    padding: 0.5333333333vw 5.3333333333vw;
    margin-bottom: 5.3333333333vw;
  }
}

.section-text {
  line-height: 1.5;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .section-text {
    font-size: 4.2666666667vw;
  }
}

.opening {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E9E9E9;
  z-index: 100;
  display: none;
}
.opening__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.opening__bg video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.opening__text {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #1F1B1B;
  text-align: center;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .opening__text {
    font-size: 5.3333333333vw;
  }
}
.opening__skip {
  width: 148px;
  position: absolute;
  right: 45px;
  bottom: 30px;
}
@media screen and (max-width: 768px) {
  .opening__skip {
    width: 34.6666666667vw;
    right: 5.3333333333vw;
    bottom: 5.3333333333vw;
  }
}

.bg-movie {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}
.bg-movie01, .bg-movie02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bg-movie01 video, .bg-movie02 video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 40px 54px 0 50px;
}
@media screen and (max-width: 768px) {
  .header__inner {
    padding: 5.3333333333vw 5.3333333333vw 0;
  }
}
.header__logo {
  width: 346px;
}
@media screen and (max-width: 768px) {
  .header__logo {
    width: 42.6666666667vw;
  }
}
.header nav ul {
  display: flex;
  align-items: center;
  gap: 33px;
}
.header nav ul li a {
  font-size: 1.8rem;
  font-weight: bold;
  font-style: italic;
}
@media screen and (max-width: 1000px) {
  .header nav ul li a {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .header__btn {
    width: 8vw;
    height: 5.3333333333vw;
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  .header__btn.on .header__line {
    top: 50%;
    left: 50%;
  }
}
@media screen and (max-width: 768px) {
  .header__btn.on .header__line:first-of-type {
    transform: translate(-50%, -50%) rotate(30deg);
  }
}
@media screen and (max-width: 768px) {
  .header__btn.on .header__line:nth-of-type(2) {
    transform: translate(-50%, -50%) rotate(-30deg);
  }
}
@media screen and (max-width: 768px) {
  .header__line {
    width: 100%;
    height: 2px;
    background-color: #231815;
    position: absolute;
    transition: 0.15s ease-in;
  }
}
@media screen and (max-width: 768px) {
  .header__line:first-of-type {
    top: 1.3333333333vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 768px) {
  .header__line:nth-of-type(2) {
    top: 4vw;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 769px) {
  .menu-sp {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .menu-sp {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: -1;
  }
}
@media screen and (max-width: 768px) {
  .menu-sp__inner {
    padding: 10.6666666667vw 5.3333333333vw 10.6666666667vw;
  }
}
@media screen and (max-width: 768px) {
  .menu-sp ul li:not(:first-of-type) {
    margin-top: 5.3333333333vw;
  }
}
@media screen and (max-width: 768px) {
  .menu-sp ul a {
    font-size: 5.3333333333vw;
    color: #231815;
    font-weight: bold;
    font-style: italic;
  }
}

.footer {
  margin-top: 150px;
  padding: 70px 0 20px;
  background-color: #2A2E4F;
  position: relative;
}
@media screen and (max-width: 768px) {
  .footer {
    margin-top: 10.6666666667vw;
    padding: 18.6666666667vw 0 5.3333333333vw;
  }
}
.footer::after {
  content: "";
  width: 100%;
  height: 20px;
  background-color: #2A2E4F;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
}
.footer__top {
  width: 208px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .footer__top {
    width: 42.6666666667vw;
  }
}
.footer__sns {
  margin: 20px auto 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 768px) {
  .footer__sns {
    margin-top: 5.3333333333vw;
    max-width: none;
    width: -moz-fit-content;
    width: fit-content;
    gap: 2.6666666667vw;
    border-radius: 2.6666666667vw;
  }
}
.footer__x {
  display: block;
  width: 41px;
}
@media screen and (max-width: 768px) {
  .footer__x {
    width: 9.6vw;
  }
}
.footer__facebook {
  display: block;
  width: 40px;
}
@media screen and (max-width: 768px) {
  .footer__facebook {
    width: 9.3333333333vw;
  }
}
.footer__line {
  display: block;
  width: 41px;
}
@media screen and (max-width: 768px) {
  .footer__line {
    width: 9.6vw;
  }
}
.footer__copyright {
  margin-top: 30px;
  font-weight: 200;
  text-align: center;
  font-size: 1.4rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .footer__copyright {
    margin-top: 5.3333333333vw;
    font-size: 3.2vw;
  }
}

.mv {
  position: relative;
}
.mv h1 {
  max-width: 708px;
  margin: 0 auto;
}
.mv__caution {
  font-size: 1.4rem;
  text-align: center;
  margin: 20px auto 0;
  color: #000;
}
@media screen and (max-width: 768px) {
  .mv__caution {
    font-size: 2.6666666667vw;
    margin-top: 2.6666666667vw;
  }
}
.mv__top {
  font-size: 10rem;
  display: block;
  margin-bottom: 10px;
}
@media screen and (max-width: 1200px) {
  .mv__top {
    font-size: 8.3333333333vw;
  }
}
@media screen and (max-width: 768px) {
  .mv__top {
    font-size: 9.0666666667vw;
    margin-bottom: 2.1333333333vw;
  }
}
.mv__middle {
  margin-left: -0.6em;
}
.mv__bottom {
  display: block;
  font-size: 7rem;
  font-weight: 600;
  margin-top: 10px;
}
@media screen and (max-width: 1200px) {
  .mv__bottom {
    font-size: 4.55vw;
  }
}
@media screen and (max-width: 768px) {
  .mv__bottom {
    font-size: 6.6666666667vw;
    margin-top: 2.6666666667vw;
  }
}
.mv__bottom:last-of-type {
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .mv__bottom:last-of-type {
    margin-top: 0;
  }
}

.concept {
  margin: 120px auto 0;
  max-width: 966px;
}
@media screen and (max-width: 768px) {
  .concept {
    margin-top: 21.3333333333vw;
  }
}

.about {
  margin: 120px auto 0;
  max-width: 966px;
}
@media screen and (max-width: 768px) {
  .about {
    margin-top: 21.3333333333vw;
  }
}
.about__caution {
  font-size: 0.6em;
}
.about__bottom {
  margin-top: 60px;
  padding: 80px 50px;
  display: flex;
  align-items: center;
  gap: 40px;
  background-color: #fff;
  border: 6px solid #000;
  box-shadow: 10px 10px 0 #231815;
}
@media screen and (max-width: 1200px) {
  .about__bottom {
    padding: 50px 20px;
    gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .about__bottom {
    margin-top: 13.3333333333vw;
    padding: 8vw 5.3333333333vw;
    display: block;
  }
}
.about__bottom-img {
  width: min(23.0833333333vw, 277px);
  flex: 0 0 auto;
}
@media screen and (max-width: 768px) {
  .about__bottom-img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .about__bottom-body {
    margin-top: 5.3333333333vw;
  }
}
.about__bottom-body h3 {
  font-size: 3rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.0666666667em;
}
@media screen and (max-width: 768px) {
  .about__bottom-body h3 {
    font-size: 6.4vw;
  }
}
.about__bottom-body p {
  margin-top: 30px;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .about__bottom-body p {
    margin-top: 5.3333333333vw;
    font-size: 4.2666666667vw;
  }
}
.about__bottom-link {
  display: inline-block;
  text-decoration: underline;
  font-size: 1.4rem;
  line-height: 1.5;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .about__bottom-link {
    margin-top: 4vw;
    font-size: 4.2666666667vw;
  }
}

.artist {
  margin: 130px auto 0;
  max-width: 966px;
}
@media screen and (max-width: 768px) {
  .artist {
    margin-top: 21.3333333333vw;
  }
}
.artist__body {
  display: flex;
  gap: 60px 36px;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .artist__body {
    gap: 8vw 2.6666666667vw;
  }
}
.artist__body-item {
  width: calc(33.3333333333% - 24px);
  text-align: center;
}
@media screen and (max-width: 768px) {
  .artist__body-item {
    width: calc(50% - 1.3333333333vw);
  }
}
.artist__body-item > img {
  border-radius: 80px;
}
@media screen and (max-width: 768px) {
  .artist__body-item > img {
    border-radius: 8vw;
  }
}
.artist__body-item p {
  font-size: min(2.6086956522vw, 3rem);
  letter-spacing: -0.04em;
  margin-top: 10px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .artist__body-item p {
    font-size: 4.8vw;
    margin-top: 2.6666666667vw;
  }
}
.artist__body-item .artist__heysayjump {
  max-width: 290px;
  margin: 18px auto 0;
}
@media screen and (max-width: 768px) {
  .artist__body-item .artist__heysayjump {
    max-width: 36vw;
    margin-top: 3.7333333333vw;
  }
}

.comment {
  margin-top: 130px;
}
@media screen and (max-width: 768px) {
  .comment {
    margin-top: 21.3333333333vw;
  }
}
.comment__box {
  padding: 80px 50px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 60px;
  background-color: #fff;
  border: 6px solid #000;
  box-shadow: 10px 10px 0 #231815;
}
@media screen and (max-width: 1200px) {
  .comment__box {
    padding: 50px 30px;
    gap: 30px;
  }
}
@media screen and (max-width: 768px) {
  .comment__box {
    padding: 8vw 5.3333333333vw;
    display: block;
    box-shadow: 5px 5px 0 #231815;
  }
}
.comment__box > img {
  width: min(27.5vw, 330px);
  border-radius: 80px;
}
@media screen and (max-width: 768px) {
  .comment__box > img {
    width: 100%;
  }
}
.comment__top {
  font-size: 4rem;
  font-weight: 800;
}
@media screen and (max-width: 768px) {
  .comment__top {
    font-size: 6.4vw;
    margin-top: 5.3333333333vw;
  }
}
.comment__top .small {
  display: inline-block;
  font-size: 3rem;
}
@media screen and (max-width: 768px) {
  .comment__top .small {
    font-size: 4.8vw;
  }
}
.comment__text {
  font-size: 2rem;
  margin-top: 26px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
  .comment__text {
    font-size: 4.2666666667vw;
    margin-top: 2.6666666667vw;
  }
}

.area-cd {
  max-width: 966px;
  margin: 155px auto 0;
  display: flex;
  align-items: flex-start;
  gap: 46px;
}
@media screen and (max-width: 1200px) {
  .area-cd {
    gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .area-cd {
    max-width: 100%;
    margin-top: 21.3333333333vw;
    display: block;
  }
}
.area-cd > img {
  max-width: min(27.7142857143vw, 388px);
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 768px) {
  .area-cd > img {
    max-width: 100%;
  }
}
.area-cd__top {
  font-weight: 900;
  font-size: 3rem;
}
@media screen and (max-width: 768px) {
  .area-cd__top {
    font-size: 8vw;
    margin-top: 5.3333333333vw;
    line-height: 1.5;
    text-indent: 0.5em;
    margin-left: -0.5em;
  }
}
.area-cd__area1 {
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
}
@media screen and (max-width: 768px) {
  .area-cd__area1 {
    margin-top: 2.6666666667vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.3333333333vw;
  }
}
.area-cd__area1 dt {
  font-size: 1.4rem;
  padding: 2px 10px;
  border: 1px solid #231815;
  margin-right: 1em;
}
@media screen and (max-width: 768px) {
  .area-cd__area1 dt {
    font-size: 3.7333333333vw;
    padding: 0.5333333333vw 2.6666666667vw;
    margin-right: 0;
  }
}
.area-cd__area1:first-of-type {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .area-cd__area1:first-of-type {
    margin-top: 5.3333333333vw;
  }
}
.area-cd__area1 dd {
  font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
  .area-cd__area1 dd {
    font-size: 4.2666666667vw;
  }
}
.area-cd__area2 {
  margin-top: 20px;
  font-size: 1.4rem;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .area-cd__area2 {
    margin-top: 5.3333333333vw;
    font-size: 3.7333333333vw;
  }
}
.area-cd__note {
  font-size: 1.4rem;
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .area-cd__note {
    font-size: 3.7333333333vw;
    margin-top: 2.6666666667vw;
  }
}

.reservation {
  margin: 150px auto 0;
  max-width: 966px;
}
@media screen and (max-width: 768px) {
  .reservation {
    margin-top: 26.6666666667vw;
  }
}
.reservation.streaming {
  margin-top: 120px;
}
@media screen and (max-width: 768px) {
  .reservation.streaming {
    margin-top: 26.6666666667vw;
  }
}
.reservation__text-kari {
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .reservation__text-kari {
    font-size: 4.2666666667vw;
  }
}
.reservation .streaming__sub-title {
  font-size: 2.8rem;
  margin-top: 45px;
}
@media screen and (max-width: 768px) {
  .reservation .streaming__sub-title {
    font-size: 6.4vw;
    margin-top: 8vw;
  }
}
.reservation h2 {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 30px;
}
@media screen and (max-width: 768px) {
  .reservation h2 {
    padding: 0 2.6666666667vw;
    font-size: 5.8666666667vw;
  }
}
.reservation__list {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
@media screen and (max-width: 768px) {
  .reservation__list {
    margin-top: 2.6666666667vw;
    gap: 2.6666666667vw;
  }
}
.reservation__list li {
  width: calc(25% - 13.5px);
}
@media screen and (max-width: 768px) {
  .reservation__list li {
    width: calc(50% - 1.3333333333vw);
  }
}

.img-tokuten {
  width: 300px;
  margin: 10px 0 0;
}
@media screen and (max-width: 768px) {
  .img-tokuten {
    width: 100%;
    max-width: 350px;
    margin: 2.6666666667vw auto 0;
  }
}

.img-sample {
  width: 300px;
  margin: 10px 0 0;
}
@media screen and (max-width: 768px) {
  .img-sample {
    width: 100%;
    max-width: 350px;
    margin: 2.6666666667vw auto 0;
  }
}

.modal-first {
  max-width: 580px;
  margin: 80px auto 0;
}
@media screen and (max-width: 768px) {
  .modal-first {
    max-width: 100%;
    margin: 10.6666666667vw auto 0;
  }
}
.modal-first h2 {
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid #fff;
  margin: 0 auto 10px;
}
@media screen and (max-width: 768px) {
  .modal-first h2 {
    font-size: 4.2666666667vw;
    padding-bottom: 1.6vw;
    margin-bottom: 2.6666666667vw;
  }
}
.modal-first p {
  font-size: 1.4rem;
  line-height: 1.75;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .modal-first p {
    font-size: 3.2vw;
    text-align: left;
  }
}
.modal-first p + p {
  margin-top: 0.75em;
}
.modal-first__btn {
  width: 50px;
  position: absolute;
  top: -60px;
  right: 0;
}
@media screen and (max-width: 768px) {
  .modal-first__btn {
    width: 10.6666666667vw;
    top: -12vw;
  }
}
.modal-first .indent {
  display: inline-block;
}

.modal-btn {
  margin: 30px auto 0;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 15px 70px;
  background-color: #2A2E4F;
  color: #fff;
  font-size: 2rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .modal-btn {
    margin-top: 5.3333333333vw;
    padding: 2.6666666667vw 1.3333333333vw;
    font-size: 3.7333333333vw;
    width: 100%;
  }
}

.modal-note {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 50;
}
.modal-note__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.modal-note__inner {
  max-width: 1000px;
  width: 80%;
  height: 90%;
  overflow-y: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .modal-note__inner {
    width: 95%;
  }
}
.modal-note__inner > div {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 50px 100px;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}
@media screen and (max-width: 768px) {
  .modal-note__inner > div {
    padding: 13.3333333333vw 5.3333333333vw;
  }
}
.modal-note h3 {
  font-size: 2.4rem;
  margin-top: 40px;
  margin-bottom: 30px;
  line-height: 1.5;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
}
@media screen and (max-width: 768px) {
  .modal-note h3 {
    font-size: 4.8vw;
    padding-bottom: 2.6666666667vw;
    margin-bottom: 5.3333333333vw;
  }
}
.modal-note p {
  font-size: 1.8rem;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  .modal-note p {
    font-size: 3.7333333333vw;
    text-align: left;
  }
}
.modal-note p + p {
  margin-top: 0.75em;
}
.modal-note p a {
  text-decoration: underline;
}
.modal-note__small {
  display: block;
}
.modal-note__btn {
  display: block;
  width: 40px;
  position: absolute;
  top: 10PX;
  right: 10PX;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .modal-note__btn {
    width: 8vw;
    top: 2.6666666667vw;
    right: 2.6666666667vw;
  }
}
.modal-note .indent {
  display: inline-block;
}
.modal-note .bold {
  font-weight: bold;
}
.modal-note s .indent {
  display: inline-block;
}

.modal-campaign {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.modal-campaign__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.modal-campaign__close {
  width: 37px;
  position: absolute;
  top: 30px;
  right: 30px;
}
@media screen and (max-width: 768px) {
  .modal-campaign__close {
    top: 4vw;
    right: 4vw;
    width: 8vw;
  }
}
.modal-campaign__inner {
  max-width: 1000px;
  width: 90%;
  max-height: 420px;
  padding: 20px;
  height: 95%;
  overflow-y: auto;
  background-image: url("../images/bg-modal-body.jpg");
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .modal-campaign__inner {
    width: 95%;
    max-height: 90%;
    height: 106.6666666667vw;
    padding: 5.3333333333vw 2.6666666667vw;
  }
}
.modal-campaign__inner > div {
  color: #231815;
  padding: 50px;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .modal-campaign__inner > div {
    padding: 5.3333333333vw 2.6666666667vw;
  }
}
.modal-campaign__inner > div::after {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.6);
  filter: blur(5px);
}
.modal-campaign h2 {
  font-size: 3.1rem;
  margin-bottom: 36px;
  line-height: 1.3;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .modal-campaign h2 {
    font-size: 4.8vw;
    margin-bottom: 8vw;
  }
}
.modal-campaign h2 span {
  display: block;
  font-size: 2rem;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .modal-campaign h2 span {
    font-size: 4.2666666667vw;
    padding-bottom: 1.3333333333vw;
  }
}
.modal-campaign p {
  font-size: 1.8rem;
  line-height: 1.4;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .modal-campaign p {
    font-size: 3.7333333333vw;
    text-align: left;
  }
}
@media screen and (max-width: 768px) {
  .modal-campaign p span {
    display: block;
    font-size: 3.2vw;
    text-indent: -1em;
    padding-left: 1em;
  }
}
@media screen and (max-width: 768px) {
  .modal-campaign p span:first-of-type {
    margin-top: 2.1333333333vw;
  }
}
.modal-campaign__btn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 18px auto 0;
  text-decoration: underline;
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .modal-campaign__btn {
    font-size: 4.2666666667vw;
    margin-top: 5.3333333333vw;
  }
}

.campaign-area {
  max-width: 960px;
  margin: 70px auto 145px;
  padding: 40px;
  background-image: url("../images/bg-campaign-top.jpg");
  background-size: cover;
  color: #231815;
}
@media screen and (max-width: 768px) {
  .campaign-area {
    max-width: 100%;
    margin: 16vw auto 26.6666666667vw;
    padding: 5.3333333333vw 2.6666666667vw;
    background-image: url("../images/bg-campaign-top-sp.jpg");
  }
}
.campaign-area__sample {
  display: block;
  margin: 10px auto 0;
  width: 500px;
}
@media screen and (max-width: 768px) {
  .campaign-area__sample {
    margin: 5.3333333333vw auto 0;
    max-width: 100%;
  }
}
.campaign-area__body {
  padding: 50px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .campaign-area__body {
    padding: 5.3333333333vw 2.6666666667vw;
  }
}
.campaign-area__body::after {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.6);
  filter: blur(5px);
  z-index: -1;
}
.campaign-area h2 {
  font-size: 1.7rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .campaign-area h2 {
    font-size: 4.5333333333vw;
    margin-bottom: 5.3333333333vw;
  }
}
.campaign-area p {
  font-size: 1.4rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .campaign-area p {
    font-size: 3.7333333333vw;
  }
}
.campaign-area p:not(:first-child) {
  margin-top: 1em;
}
.campaign-area__img-sample {
  width: 300px;
  margin: 5px 0 10px;
  display: block;
}
@media screen and (max-width: 768px) {
  .campaign-area__img-sample {
    max-width: 350px;
    width: 100%;
    margin: 1.3333333333vw auto 2.6666666667vw;
  }
}
.campaign-area a {
  text-decoration: underline;
}
.campaign-area .area-row {
  display: flex;
  align-items: flex-start;
  gap: 2em;
}
@media screen and (max-width: 768px) {
  .campaign-area .area-row {
    display: block;
  }
}
.campaign-area .todoufuken-btn {
  padding: 0.25em 0;
  text-decoration: underline;
  display: block;
  text-align: left;
  width: 5em;
  flex: 0 0 auto;
}
@media screen and (max-width: 768px) {
  .campaign-area .todoufuken-btn {
    font-size: 3.7333333333vw;
  }
}
.campaign-area .todoufuken-area {
  margin: 0.25em 0 1em;
  display: none;
}
.campaign-area dl {
  display: flex;
}
@media screen and (max-width: 768px) {
  .campaign-area dl {
    font-size: 3.2vw;
    padding-left: 0.5em;
  }
}
.campaign-area dl:not(:first-of-type) {
  margin-top: 0.8em;
  padding-top: 0.8em;
  border-top: 1px solid #231815;
}
.campaign-area dl dt {
  width: 5em;
  line-height: 1.5;
  flex: 0 0 auto;
}
@media screen and (max-width: 768px) {
  .campaign-area dl dt {
    width: 4.5em;
  }
}
.campaign-area dl dd {
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .campaign-area dl dd {
    letter-spacing: -0.05em;
  }
}

.bold {
  font-weight: bold;
}/*# sourceMappingURL=base.css.map */