@charset "UTF-8";
@import url("https://use.fontawesome.com/releases/v6.4.2/css/all.css");
:root {
  --rpx-base: 1px;
}
@media screen and (min-width: 768px) and (max-width: 1440px) {
  :root {
    --rpx-base: 0.0694444444vw;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --rpx-base: 0.1333333333vw;
  }
}
:root {
  --rpxClamp: clamp(0px, var(--rpx-base), 1.4px);
  --rpx: var(--rpx-base);
}

:root {
  --color-red: #fe0171;
  --color-gray: #4d4d4d;
  --leading-trim: calc((1em - 1lh) / 2);
}

html {
  background: #eee;
}

body {
  font-size: var(--fz, calc(30 * var(--rpx)));
  padding: 0;
  margin: 0 auto;
  background: #fff;
  max-width: 1920px;
}

p {
  margin: 0;
  margin: var(--leading-trim) 0 !important;
}

.ja {
  font-family: "vdl-v7marugothic", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.img {
  font-size: 0;
}
.img img {
  width: 100%;
  height: auto;
}

section.sec,
footer.sec {
  position: relative;
  background-color: var(--this-bg, #fff);
  padding: var(--this-padding, calc(150 * var(--rpx)) 0 calc(200 * var(--rpx)) 0);
}
@media screen and (max-width: 767px) {
  section.sec,
  footer.sec {
    --this-img-h: calc(64 * var(--rpx));
    --this-fz: calc(40 * var(--rpx));
    --header-gap: calc(40 * var(--rpx));
    --this-top-gutter: calc(30 * var(--rpx));
    --this-padding: calc(80 * var(--rpx)) 0 calc(160 * var(--rpx)) 0;
  }
}
section.sec:before,
footer.sec:before {
  content: "";
  height: var(--this-top-gutter, calc(67 * var(--rpx)));
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  transform: translateY(-62%);
  background-image: var(--this-top-gutter-bg, url(../img/section_div_img_01_2x.png));
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center bottom;
}
section.sec h2,
footer.sec h2 {
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--this-fz, calc(38 * var(--rpx)));
  margin: 0;
  margin-bottom: var(--header-gap, calc(100 * var(--rpx)));
  gap: 0.4em;
  color: var(--color-red);
  letter-spacing: 0.1em;
}
section.sec h2 .gr,
footer.sec h2 .gr {
  color: var(--color-gray);
}
section.sec h2 img,
footer.sec h2 img {
  height: var(--this-img-h, calc(62 * var(--rpx)));
  width: auto;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
/*
@note MV
*/
section#mv h1 {
  margin: 0;
}
section#mv {
  position: relative;
}

.sns-btn-grp {
  position: absolute;
  z-index: 1;
  line-height: 1;
  right: calc(86 * var(--rpx));
  top: calc(90 * var(--rpx));
  display: flex;
  gap: calc(40 * var(--rpx));
  font-size: calc(60 * var(--rpx));
}
.sns-btn-grp a {
  transition: 300ms;
}
.sns-btn-grp a:hover {
  transform: scale(0.95);
  opacity: 0.8;
}
.sns-btn-grp i:before {
  color: var(--color-red);
}

/*
@note - - OA
*/
.oa-text {
  display: flex;
  justify-content: center;
  line-height: 1;
  color: var(--color-red);
  padding: calc(25 * var(--rpx)) 0 calc(187 * var(--rpx)) 0;
  letter-spacing: 0.1em;
  flex-wrap: wrap;
  gap: 0.75em 0;
  font-size: calc(24 * var(--rpx));
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  .oa-text {
    font-size: calc(28 * var(--rpx));
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
  }
}
.oa-text + .sns-btn-grp {
  position: static;
  display: flex;
  justify-content: center;
  font-size: calc(20 * var(--rpx));
  font-weight: bold;
  gap: calc(45 * var(--rpx));
  line-height: 1;
  margin: calc(48 * var(--rpx)) 0 calc(120 * var(--rpx)) 0;
}
@media screen and (max-width: 767px) {
  .oa-text + .sns-btn-grp {
    font-size: calc(60 * var(--rpx));
  }
}

/*
@note 予告編
*/
section#trailer {
  --header-gap: calc(64 * var(--rpx));
  padding-top: 0 !important;
}
@media screen and (max-width: 767px) {
  section#trailer {
    --header-gap: calc(40 * var(--rpx));
  }
}

.movie-wrap {
  max-width: min(75vw, 1440px);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .movie-wrap {
    max-width: 85%;
  }
}

.movie {
  font-size: 0;
  padding-top: 56.25%;
  position: relative;
}
.movie iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*
@note ストーリー
*/
section#story {
  --this-bg: #f1e1c1;
  --this-top-gutter-bg: url(../img/section_div_img_02_2x.png);
}
@media screen and (max-width: 767px) {
  section#story {
    --header-gap: calc(72 * var(--rpx));
  }
}
section#story p {
  text-align: center;
  color: var(--color-red);
  line-height: 2.72em;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  section#story p {
    font-size: calc(24 * var(--rpx));
    line-height: 2.4;
  }
}

/*
@note スタッフ
*/
section#staff p {
  text-align: center;
  color: var(--color-gray);
  font-size: var(--this-fz, calc(30 * var(--rpx)));
  line-height: 2.33em;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  section#staff p {
    font-size: calc(24 * var(--rpx));
    line-height: 2.4;
  }
}

/*
@note フッター
*/
.site-footer.sec {
  --this-bg: var(--color-gray);
  --this-top-gutter-bg: url(../img/section_div_img_03_2x.png);
  --this-padding: calc(90 * var(--rpx)) 0 calc(50 * var(--rpx)) 0;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .site-footer.sec {
    --this-padding: calc(64 * var(--rpx)) 0 calc(64 * var(--rpx)) 0;
  }
}
.site-footer.sec .inner {
  display: flex;
  justify-content: space-between;
  padding: 0 calc(80 * var(--rpx));
  color: #fff;
  align-items: center;
  max-width: 100vw;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .site-footer.sec .inner {
    flex-direction: column;
    padding: 0;
    gap: calc(48 * var(--rpx));
  }
}
.site-footer.sec .inner .ja {
  font-weight: 600 !important;
  letter-spacing: 0.03em;
}
.site-footer.sec .footer-sns-btn-grp {
  display: flex;
  align-items: center;
  line-height: 1;
  gap: calc(40 * var(--rpx));
  min-height: 0;
}
.site-footer.sec .footer-sns-btn-grp p {
  margin: 0 !important;
}
@media screen and (max-width: 767px) {
  .site-footer.sec .footer-sns-btn-grp {
    gap: calc(40 * var(--rpx));
    line-height: 0.7;
  }
}
.site-footer.sec .footer-sns-btn-grp a i {
  transition: 300ms;
}
.site-footer.sec .footer-sns-btn-grp a:hover i {
  transform: scale(0.95);
  opacity: 0.8;
  transform-origin: center;
}
.site-footer.sec .footer-sns-btn-grp i {
  vertical-align: middle;
  align-items: center !important;
  display: inline-flex;
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
}
.site-footer.sec .footer-sns-btn-grp i.x-twitter {
  background-image: url(https://www.ktv.jp/pan-aka-tv/assets/img/icon-X.svg);
  height: calc(55 * var(--rpx));
  width: calc(54 * var(--rpx));
}
.site-footer.sec .footer-sns-btn-grp i.line {
  background-image: url(https://www.ktv.jp/pan-aka-tv/assets/img/icon-line.svg);
}
.site-footer.sec .footer-sns-btn-grp i.facebook {
  background-image: url(https://www.ktv.jp/pan-aka-tv/assets/img/icon-facebook.svg);
}
.site-footer.sec .footer-sns-btn-grp .ja {
  font-size: calc(30 * var(--rpx));
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .site-footer.sec .footer-sns-btn-grp .ja {
    font-size: calc(28 * var(--rpx));
  }
}
.site-footer.sec .footer-text-grp {
  display: flex;
  flex-direction: column;
  gap: calc(34 * var(--rpx));
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .site-footer.sec .footer-text-grp {
    gap: calc(32 * var(--rpx));
  }
}
.site-footer.sec .footer-text-grp .ja {
  font-size: calc(18 * var(--rpx));
  line-height: 1.66em;
}
@media screen and (max-width: 767px) {
  .site-footer.sec .footer-text-grp .ja {
    font-size: calc(20 * var(--rpx));
  }
}
.site-footer.sec .footer-text-grp .copy {
  line-height: 1;
  font-size: calc(20 * var(--rpx));
  letter-spacing: 0.05em !important;
}
@media screen and (max-width: 767px) {
  .site-footer.sec .footer-text-grp .copy {
    font-size: calc(20 * var(--rpx));
  }
}/*# sourceMappingURL=style.css.map */