@charset "utf-8";

:root {
  --color_BLK: #252525;
  --color_YLW: #fff602;
  --color_RED: #e2041b;
  --color_VIO: #da32ff;
  --color_GRN: #38b900;
  --gap_96px: clamp(32px, 12vw, 96px);
  --gap_80px: clamp(27px, 10vw, 80px);
  --gap_64px: clamp(21px, 8vw, 64px);
  --gap_48px: clamp(16px, 6vw, 48px);
  --gap_32px: clamp(11px, 4vw, 32px);
  --gap_24px: clamp(8px, 3vw, 24px);
  --gap_16px: clamp(5px, 2vw, 16px);
  --gap_8px: clamp(3px, 1vw, 8px);
}

/* =============================================================
    common 共通
============================================*/
body {
  width: 100%;
}

body,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul,dl,dt,dd {
  margin: 0;
  padding: 0;
}

h1,h2,h3,h4,h5,h6,p {
  font-weight: normal;
}

li,ol,ul {
  list-style-type: none;
}

#page {
  font-size: clamp(14px, 2.2vw, 20px);
  margin: 0 auto;
  max-width: 1920px;
  color: var(--color_BLK);
  font-family: "Noto Sans CJK JP", Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.4;
  font-feature-settings: "palt" 1;
  -webkit-text-size-adjust: 100%;
  background-color: var(--color_YLW);

  position: relative;
  /* 背景fixed　safari対応 ←　これ使う場合は必要*/
}
#page * {
  box-sizing: border-box;
}
#page img {
  width: 100%;
  border: 0;
  vertical-align: top;
}
#page a {
  transition: all 0.3s;
  text-decoration: none;
}
.txt_link {
  color: var(--color_VIO);
  font-weight: bold;
  text-decoration: underline !important;
}
#page a:hover {
  opacity: 0.7;
}
#page a[tabindex*="-1"] {
  pointer-events: none;
}
#page a[tabindex*="-1"]:hover {
  opacity: 1;
}
#page em {
  font-style: normal;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  #page a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

@media screen and (max-width: 767px) {
  /* #page {
		font-size: clamp(14px, 3.2vw, 16px);
	} */
}

.serif {
  /* font-family: 'Shippori Mincho', serif; */
  font-family: serif;
  font-weight: 600;
}
.arial {
  font-family: Arial;
}
.font_maru {
  font-family: 'Kosugi Maru', sans-serif;
}

.flex {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.inner_wrap {
  padding: 0 var(--gap_48px);
  margin: 0 auto;
  max-width: 1700px;
}
.pd_tb {
  padding-top: var(--gap_80px);
  padding-bottom: var(--gap_80px);
}
.pd_t {
  padding-top: var(--gap_80px);
}
.pd_b {
  padding-bottom: var(--gap_80px);
}

.block_title {
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
}
.block_read p {
  margin: var(--gap_16px) auto;
}
.block_read p:not(.demo_btn) {
  padding-left: 1em;
  text-indent: -1em;
}

.ib {
  font-size: inherit !important;
  display: inline-block;
}
.btn_wrap {
  text-align: center;
}
.btn {
  font-size: 1.4em;
  color: #fff;
  font-weight: bold;
  padding: 0.3em 0.6em;
  margin: 0 auto;
  line-height: 1.2;
  border-radius: var(--gap_8px);
  display: inline-block;
}
#btn_pagetop {
  bottom: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
  position: fixed;
  z-index: 500;
}
#btn_pagetop a img {
  width: clamp(60px, 10vw, 100px);
}
@media screen and (min-width: 768px) {
  .mob {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

/* =============================================================
    kv キービジュアル
============================================*/
#header {
  position: relative;
  text-align: center;
  background-color: #fff;
  overflow: hidden;
}
.kv_star {
  font-size: 0em;
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  background: url(/event/kirakira_afro2024/images/star_ylw.png) center bottom/100% no-repeat;
  padding-top: calc(60 / 1919 * 100%);
  z-index: 50;
}
.kv_photo {
  font-size: 0em;
  position: relative;
  content: "";
  background: url(/event/kirakira_afro2024/images/kv.jpg) center top/cover no-repeat;
  padding-top: calc(1280 / 1920 * 102%);
  filter: blur(10px);
  animation: blur 2.5s forwards 3s;
  z-index: 10;
}

.kv_message_wrap {
  width: 100%;
  position: absolute;
  top: calc(50% + var(--gap_32px));
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
.kv_message {
  font-size: clamp(1.4em,5vw,4.4em);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 0.2em var(--color_BLK),0 0 0.3em var(--color_BLK);
  opacity: 0;
  animation: fadeIn 2.5s forwards 1s;
}
.kv_message:last-of-type {
  animation: fadeIn 2.5s forwards 2s;
}
.kv_message span {
  color: var(--color_YLW);
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blur {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0);
  }
}

.kv_logo_wrap {
  font-size: 0;
  margin: max(-22vw, -400px) auto 0;
  width: 40vw;
  max-width: 749px;
  position: relative;
  z-index: 100;
}
.kv_logo {
  background: url(/event/kirakira_afro2024/images/logo.png) center top/contain no-repeat;
  padding-top: calc(463 / 749 * 100%);
}
#logo {
  position: relative;
}
.btn_event {
  width: clamp(80px, 15vw, 249px);
  display: block;
  position: absolute;
  bottom: 0;
  right: var(--gap_32px);
  z-index: 150;
}

/* ===========================================================================================
    イントロ
============================================*/
#intro {
  text-align: center;
  background: url(/event/kirakira_afro2024/images/bg_intro.jpg) center center no-repeat;
}
.intro_read {
  font-size: clamp(16px, 2.8vw, 28px);
}
.intro_read p:not(:last-of-type) {
  margin-bottom: var(--gap_16px);
}
.intro_read p strong {
  font-size: 1.2em;
  color: var(--color_VIO);
}
.intreo_photo {
  max-width: 922px;
  margin: 0 auto;
}
.font_l {
  font-size: 1.5em;
}
@media screen and (max-width: 767px) {
  #intro {
    background: url(/event/kirakira_afro2024/images/bg_intro.jpg) center top/100% no-repeat;
  }
}

/* ===========================================================================================
    ON AIR
============================================*/
#oa_program {
  background: url(/event/kirakira_afro2024/images/star.png) right 2% bottom 2% /clamp(40px,6vw,60px) no-repeat,
    url(/event/kirakira_afro2024/images/ptn_kirakira.png) center center repeat var(--color_VIO);
  position: relative;
}
#oa_program .bg_illust {
  position: relative;
}
#oa_program::before,
#oa_program .bg_illust::before,
#oa_program .bg_illust::after {
  position: absolute;
  content: "";
  z-index: 50;
}
#oa_program::before {
  width: min(9vw,160px);
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff601;
}
#oa_program .bg_illust::before {
  background: url(/event/kirakira_afro2024/images/text_kirakiraafro.png) top left/contain no-repeat;
  width: min(40vw,392px);
  height: 100%;
  top: max(-3.5vw,-35px);
  left: min(9vw,160px);
}
#oa_program .bg_illust::after {
  background: url(/event/kirakira_afro2024/images/cast_2s.png) right top/contain no-repeat;
  width: min(38vw,460px);
  height: 100%;
  top: max(-8vw,-80px);
  left: min(58vw,1100px);
}

.oa_info_wrap {
  text-align: center;
  text-shadow: 0 0 0.2em var(--color_VIO), 0 0 0.2em var(--color_VIO), 0 0 0.2em var(--color_VIO), 0 0 0.3em var(--color_VIO), 0 0 0.3em var(--color_VIO);
  /* padding: var(--gap_80px) 0 calc(var(--gap_80px) * 2); */
  padding: var(--gap_80px) 0;
  position: relative;
  z-index: 100;
}
.oa_title {
  font-size: clamp(28px, 5.8vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color_GRN);
}
.oa_title::after {
  /* content: attr(data-text) "- 放送予定 -"; */
  font-size: clamp(14px, 2.4vw, 24px);
  font-weight: normal;
  margin-top: 4px;
  display: block;
}
.oa_list {
  font-size: clamp(20px, 3.8vw, 48px);
  text-align: left;
  line-height: 1.3;
  color: #fff;
  margin-top: var(--gap_32px);
  display: inline-block;
}
.oa_list li {
  padding-left: 1em;
  text-indent: -0.5em;
}
.oa_list li:not(:last-of-type) {
  margin-bottom: var(--gap_16px);
}
.oa_list i {
  margin-right: var(--gap_16px);
}
.oa_list mark {
  color: inherit;
  background-color: transparent;
}
.oa_list mark.del {
  text-decoration: line-through;
  text-decoration-color: var(--color_YLW);
  /* text-decoration-style: dotted; */
}
.oa_last {
  font-weight: 700;
  color: var(--color_YLW);
}

.pr_tver.top {
  color: #fff;
}
.pr_tver.btm {
  color: #fff;
  width: 100%;
  justify-content: center;
  position: absolute;
  bottom: calc(var(--gap_64px) * -1);
  left: 50%;
  transform: translateX(-50%);
}
.pr_tver p {
  color: var(--color_YLW);
  margin: -1em 0 0.5em -8em;
  display: inline-block;
  transform: rotate(-8deg);
}
.bnr_tver {
  margin-top: var(--gap_8px);
  width: min(40vw,350px) !important;
  filter: brightness(0.4);
}
.btn_tver {
  margin-left: var(--gap_16px);
}
.btn_tver[tabindex="-1"] img {
  filter: contrast(0.4);
}
.btn_tver img {
  width: clamp(60px,12vw,150px) !important;
}
.end_text {
  color: #fff;
  padding-top: var(--gap_24px);
}
@media screen and (max-width: 799px) {
  .oa_list {
    margin-left: -20vw;
  }
}

/* @media screen and (max-width: 479px) {
  .oa_list .ib {
    display: block;
  }
} */

/* ===========================================================================================
    history
============================================*/
.text_2024 img {
  width: min(40vw,280px) !important;
  margin-left: var(--gap_24px);
}
.text_2001 {
  text-align: right;
}
.text_2001 img {
  width: min(40vw,280px) !important;
  margin-right: var(--gap_24px);
}

/* =============================================================
    【swiper】ブロック ※スライド
============================================*/
.slide-paused:hover .slideshow {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}
.swiper {
  margin: var(--gap_16px) 0;
  padding: var(--gap_64px) 0;
  background: url(/event/kirakira_afro2024/images/bg_studio.jpg) center bottom/1920px no-repeat;
}
.swiper-wrapper {
	transition-timing-function: linear !important;
}
.swiper-wrapper li {
	list-style: none;
}
.swiper-slide {
	padding: 0 var(--gap_16px);
}
@media screen and (max-width: 999px) {
  .swiper {
    background-size: 1350px;
  }
  
}
@media screen and (max-width: 479px) {
	.swiper-slide {
		padding: 0 5px;
	}
}

/* ===========================================================================================
    event
============================================*/
#event {
  text-align: center;
  text-shadow: 0 0 0.2em var(--color_YLW),0 0 0.2em var(--color_YLW),0 0 0.2em var(--color_YLW),0 0 0.3em var(--color_YLW),0 0 0.3em var(--color_YLW);
  background: url(/event/kirakira_afro2024/images/bg_ev_info.jpg) center 160px no-repeat;
}
#event > .inner_wrap {
  position: relative;
}
.pr_event_end {
  width: min(30vw,389px);
  position: absolute;
  top: min(-1vw,-10px);
  right: min(69vw,1200px);
}
@media screen and (max-width: 999px) {
  .pr_event_end {
    top: min(6vw,40px);
  }
  .ev_title_sub .ib {
    display: block;
  }
}

.ev_title_wrap {
  text-align: center;
  padding: calc(var(--gap_64px) * 2) 0 var(--gap_64px);
  margin-top: var(--gap_32px);
  background: url(/event/kirakira_afro2024/images/belliken.png) calc(50% + 460px) center no-repeat,
    url(/event/kirakira_afro2024/images/star.png) left center no-repeat,
    url(/event/kirakira_afro2024/images/star.png) right center no-repeat;
}
.ev_title_wrap_inner {
  display: inline-block;
  position: relative;
  z-index: 200;
}
.ev_title_wrap_inner strong,
.ev_detail strong {
  color: var(--color_VIO);
}
.ev_title {
  font-size: clamp(22px, 5.8vw, 68px);
  line-height: 1.3;
}
.ev_title_sub {
  font-size: clamp(16px, 3vw, 28px);
  line-height: 1.2;
  margin-bottom: var(--gap_16px);
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
}
.ev_title,
.ev_title_sub {
  font-weight: bold;
}
.text_free {
  font-size: clamp(16px, 3vw, 28px);
  text-align: right;
}
@media screen and (max-width: 1599px) {
  #event {
    background-size: 120%;
  }
}
@media screen and (max-width: 1279px) {
  .ev_title_wrap {
    background: url(/event/kirakira_afro2024/images/belliken.png) right center/18vw no-repeat,
      url(/event/kirakira_afro2024/images/star.png) left center/6vw no-repeat,
      url(/event/kirakira_afro2024/images/star.png) right center/6vw no-repeat;
  }
}
@media screen and (max-width: 767px) {
  #event {
    background-position: center 20vw;
  }
}
@media screen and (max-width: 479px) {
  .ev_title_sub .ib {
    display: block;
  }
}

.ev_info {
  background: url(/event/kirakira_afro2024/images/text_name01.png) left 2% top 25%/22vw no-repeat,
    url(/event/kirakira_afro2024/images/text_name02.png) right 2% top 25%/15.5vw no-repeat;
}
.ev_detail {
  font-size: clamp(20px, 4.8vw, 48px);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: var(--gap_64px);
}
.ev_detail dl:not(:last-of-type) {
  margin-bottom: var(--gap_32px);
}
.ev_detail dt {
  font-size: 0.7em;
  line-height: 1;
  margin-bottom: var(--gap_8px);
}
.ev_detail dt i {
  font-size: 0.7em;
}
.ev_detail dt i:first-of-type {
  margin-right: var(--gap_8px);
}
.ev_detail dt i:last-of-type {
  margin-left: var(--gap_8px);
}
.ev_detail dd .ib {
  border-bottom: dotted 3px var(--color_VIO);
}

.ev_overview {
  font-size: clamp(16px, 2.8vw, 28px);
  padding: 0 0 var(--gap_64px);
}
.goods_photo {
  max-width: 1100px;
  margin: 0 auto var(--gap_64px);
}
.goods_photo > div {
  width: 31.333%;
}
/* .ev_pr {
  font-size: clamp(20px, 3.8vw, 48px);
  font-weight: bold;
  margin: 0 auto var(--gap_64px);
} */
.poster_photo > div {
  width: 23.5%;
}
.messageboad {
  width: min(100%,700px);
  margin: 0 auto var(--gap_48px);
}
@media screen and (max-width: 767px) {
  .poster_photo {
    width: min(90%, 560px);
    margin: 0 auto;
  }
}

#present {
  margin-top: min(20vw,210px);
  background: url(/event/kirakira_afro2024/images/ptn_kirakira.png) center center repeat var(--color_VIO);
}
.title_present {
  font-size: clamp(28px, 5.8vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color_VIO);
  text-align: center;
  margin: max(-30vw,-300px) auto min(5vw,50px);
}
.title_present::after {
  content: attr(data-text) "- 視聴者プレゼント -";
  font-size: clamp(14px, 2.4vw, 24px);
  font-weight: normal;
  margin-top: 4px;
  display: block;
}
.poster_present.flex {
  width: min(100%, 1050px);
  margin: 0 auto;
  justify-content: center;
  align-items: flex-end;
  column-gap: 3%;
}
.img_poster_pre {
  width: min(50vw,500px);
}
.poster_present_read {
  display: inline-block;
}
.poster_present_read {
  text-align: left;
}
.poster_present_read .read_head {
  font-size: clamp(18px, 3.4vw, 38px);
  color: #fff;
}
.poster_present_read .read_head p {
  line-height: 1.2;
}
.poster_present_read .read_head p:last-of-type {
  padding-top: var(--gap_64px);
}
.poster_present_read .read_head em {
  font-size: 1.2em;
  color: var(--color_YLW);
}
.poster_present_read .arrow {
  width: min(10vw,90px);
  transform: rotate(45deg);
}
.poster_present_read .btn {
  font-size: clamp(20px, 3.4vw, 38px);
  color: #fff;
  text-shadow: none;
  text-align: center;
  margin-top: var(--gap_48px);
  padding: 0.6em 0.8em;
  background-color: var(--color_GRN);
  box-shadow: 0 0 10px #1e6100 inset, 0 0 10px #be18e2;
  border-radius: 60px;
  border: solid 2px #fff;
}
@media screen and (max-width: 767px) {
  .poster_present_read {
    width: min(34vw, 500px);
  }
}
@media screen and (max-width: 479px) {
  #present {
    margin-top: min(26vw, 210px);
  }
  .title_present {
    margin-top: max(-38vw,-300px);
  }
  .poster_present.flex > div {
    width: 90%;
  }
  .img_poster_pre {
    max-width: 380px;
    margin-bottom: var(--gap_24px);
  }
  .poster_present_read {
    text-align: center;
  }
  .poster_present_read .arrow {
    display: none;
    /* margin: var(--gap_24px) auto var(--gap_16px);
    transform: scale(-1, 1) rotate(105deg); */
  }
  .poster_present_read .read_head p:last-of-type {
    padding-top: var(--gap_8px);
  }
  .poster_present_read .read_head br {
    display: none;
  }
}
/* ===========================================================================================
    問合せ
============================================*/
.infomation {
  padding-top: var(--gap_80px);
}
.contact_inner {
  font-size: clamp(18px, 1.8vw, 22px);
  justify-content: center;
  column-gap: 4%;
}
.contact_inner > div {
  width: 48%;
  max-width: 480px;
  padding: var(--gap_32px);
  border: solid 2px var(--color_GRN);
  border-radius: var(--gap_16px);
}

.info_title {
  font-size: 0.9em;
  font-weight: bold;
  color: var(--color_GRN);
  margin-bottom: var(--gap_16px);
  border-bottom: solid 2px;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .ev_info {
    background: url(/event/kirakira_afro2024/images/text_name01.png) left 0% top 2%/31vw no-repeat,
      url(/event/kirakira_afro2024/images/text_name02.png) right 0% top 2%/20.5vw no-repeat;
  }
  .goods_photo {
    justify-content: center;
    column-gap: 4%;
  }
  .goods_photo > div,
  .poster_photo > div {
    width: 48%;
  }
  .goods_photo > div:nth-child(n + 3),
  .poster_photo > div:nth-child(n + 3) {
    margin-top: 4%;
  }
  .contact_inner > div {
    width: 100%;
  }
  .faq {
    margin-top: var(--gap_32px);
  }
}











/* ===========================================================================================
    アニメーション
============================================*/
@keyframes pikopiko {
  0% {
    transform: rotate(2deg);
  }

  to {
    transform: rotate(-2deg);
  }
}
.fuwafuwa {
	animation: fuwafuwa 2s infinite;
}
@keyframes fuwafuwa {
	0% {
	transform: translateY(10px);
   }
	50% {
	transform: translateY(-10px);
   }
	100% {
	transform: translateY(10px);
   }
}