/*
 * Mixin for placeholder
 * @include placeholderColor(#00ff00);
 */
@media screen and (max-width: 767px) {
  #l-header .header-inner {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media screen and (max-width: 767px) {
  #l-header .header-inner .header-logo {
    display: none;
  }
}

#l-content {
  padding-bottom: 0;
}

@-webkit-keyframes logoshow {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate(0, 50px) scale(0.8);
            transform: translate(0, 50px) scale(0.8);
  }
  40% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate(0, 20px) scale(1.2);
            transform: translate(0, 20px) scale(1.2);
  }
  70% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate(0, 35px) scale(0.8);
            transform: translate(0, 35px) scale(0.8);
  }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
}

@keyframes logoshow {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate(0, 50px) scale(0.8);
            transform: translate(0, 50px) scale(0.8);
  }
  40% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate(0, 20px) scale(1.2);
            transform: translate(0, 20px) scale(1.2);
  }
  70% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate(0, 35px) scale(0.8);
            transform: translate(0, 35px) scale(0.8);
  }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
}

.u-top-mainv {
  height: 196.6vw;
  background: url(/tv/bo-bobo/images/top/mainv_sp_bg_2023.jpg) center no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .u-top-mainv {
    height: 1340px;
    background: url(/tv/bo-bobo/images/top/mainv_pc_bg_2023.jpg) center no-repeat;
    background-size: cover;
  }
  .u-top-mainv:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1340px;
    background: url(/tv/bo-bobo/images/top/mainv_pc_bg_2023_inner.png) top center no-repeat;
  }
}

.u-top-mainv .mainv-chara {
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: all 0.5s ease 0.5s;
}

.u-top-mainv .mainv-chara img {
  width: 100%;
}

.u-top-mainv .mainv-chara.chara-center {
  top: 30.6vw;
  left: 50%;
  margin-left: -52.25vw;
  width: 104.5vw;
  transition: all 0.5s ease;
  -webkit-transform: translate(0, 100px);
          transform: translate(0, 100px);
}

@media screen and (min-width: 768px) {
  .u-top-mainv .mainv-chara.chara-center {
    top: 140px;
    margin-left: -356px;
    width: 703px;
  }
}

.u-top-mainv .mainv-chara.chara-sd1 {
  top: 8.2vw;
  left: 50%;
  margin-left: -26.1vw;
  width: 17.2vw;
  -webkit-transform: translate(50px, 50px);
          transform: translate(50px, 50px);
}

@media screen and (min-width: 768px) {
  .u-top-mainv .mainv-chara.chara-sd1 {
    top: 140px;
    margin-left: -286px;
    width: 160px;
  }
}

.u-top-mainv .mainv-chara.chara-sd2 {
  top: 3.3vw;
  left: 50%;
  margin-left: 3.7vw;
  width: 18.8vw;
  -webkit-transform: translate(-10px, 20px);
          transform: translate(-10px, 20px);
}

@media screen and (min-width: 768px) {
  .u-top-mainv .mainv-chara.chara-sd2 {
    top: 170px;
    margin-left: 240px;
    width: 182px;
    -webkit-transform: translate(-50px, 50px);
            transform: translate(-50px, 50px);
  }
}

.u-top-mainv .mainv-chara.chara-sd3 {
  top: 70vw;
  left: 50%;
  margin-left: -50vw;
  width: 18.9vw;
  -webkit-transform: translate(50px, 20px);
          transform: translate(50px, 20px);
}

@media screen and (min-width: 768px) {
  .u-top-mainv .mainv-chara.chara-sd3 {
    top: 590px;
    margin-left: -495px;
    width: 182px;
  }
}

.u-top-mainv .mainv-chara.chara-sd4 {
  top: 53.86vw;
  left: 50%;
  margin-left: 30vw;
  width: 20.53vw;
  -webkit-transform: translate(-50px, 20px);
          transform: translate(-50px, 20px);
}

@media screen and (min-width: 768px) {
  .u-top-mainv .mainv-chara.chara-sd4 {
    top: 465px;
    margin-left: 380px;
    width: 192px;
  }
}

.u-top-mainv .mainv-chara.chara-sd5 {
  top: 126.6vw;
  left: 50%;
  margin-left: -48.53vw;
  width: 17vw;
  -webkit-transform: translate(50px, -20px);
          transform: translate(50px, -20px);
}

@media screen and (min-width: 768px) {
  .u-top-mainv .mainv-chara.chara-sd5 {
    top: 930px;
    margin-left: -490px;
    width: 170px;
  }
}

.u-top-mainv .mainv-chara.chara-sd6 {
  top: 104.2vw;
  left: 50%;
  margin-left: 25.3vw;
  width: 18.93vw;
  -webkit-transform: translate(-50px, -20px);
          transform: translate(-50px, -20px);
}

@media screen and (min-width: 768px) {
  .u-top-mainv .mainv-chara.chara-sd6 {
    top: 655px;
    margin-left: 187px;
    width: 170px;
  }
}

.u-top-mainv .mainv-chara.chara-sd7 {
  top: 42.9vw;
  left: 50%;
  margin-left: -41vw;
  width: 24.1vw;
  -webkit-transform: translate(50px, 50px);
          transform: translate(50px, 50px);
}

@media screen and (min-width: 768px) {
  .u-top-mainv .mainv-chara.chara-sd7 {
    top: 349px;
    margin-left: -584px;
    width: 225px;
  }
}

.u-top-mainv .main-logo {
  position: absolute;
  top: 143.3vw;
  left: 50%;
  margin-left: -40.65vw;
  width: 81.3vw;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  z-index: +1;
}

@media screen and (min-width: 768px) {
  .u-top-mainv .main-logo {
    top: 835px;
    margin-left: -325px;
    width: 650px;
  }
}

.u-top-mainv .main-logo a {
  display: inline-block;
  width: 100%;
}

[data-whatinput="keyboard"] .u-top-mainv .main-logo a:focus {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@media screen and (min-width: 768px) {
  .u-top-mainv .main-logo a:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

.u-top-mainv .main-logo a img {
  width: 100%;
}

.u-top-mainv .main-logoanv {
  position: absolute;
  top: 133.3vw;
  left: 50%;
  margin-left: 26.93vw;
  width: 22.4vw;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  transition: all 0.5s ease 0.5s;
}

@media screen and (min-width: 768px) {
  .u-top-mainv .main-logoanv {
    top: 922px;
    width: 168px;
    margin-left: 342px;
  }
}

.u-top-mainv .main-logoanv img {
  width: 100%;
}

.u-top-mainv.is-active .mainv-chara {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.u-top-mainv.is-active .main-logo {
  -webkit-animation: logoshow 0.5s ease forwards 0.5s;
          animation: logoshow 0.5s ease forwards 0.5s;
}

.u-top-mainv.is-active .main-logoanv {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: scale(1);
          transform: scale(1);
}

@-webkit-keyframes followanm {
  0% {
    -webkit-transform: translateY(-2px) rotate(0deg);
            transform: translateY(-2px) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(0) rotate(5deg);
            transform: translate(0) rotate(5deg);
  }
  50% {
    -webkit-transform: translateY(5px) rotate(0deg);
            transform: translateY(5px) rotate(0deg);
  }
  75% {
    -webkit-transform: translate(0) rotate(-5deg);
            transform: translate(0) rotate(-5deg);
  }
  100% {
    -webkit-transform: translateY(-2px) rotate(0deg);
            transform: translateY(-2px) rotate(0deg);
  }
}

@keyframes followanm {
  0% {
    -webkit-transform: translateY(-2px) rotate(0deg);
            transform: translateY(-2px) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(0) rotate(5deg);
            transform: translate(0) rotate(5deg);
  }
  50% {
    -webkit-transform: translateY(5px) rotate(0deg);
            transform: translateY(5px) rotate(0deg);
  }
  75% {
    -webkit-transform: translate(0) rotate(-5deg);
            transform: translate(0) rotate(-5deg);
  }
  100% {
    -webkit-transform: translateY(-2px) rotate(0deg);
            transform: translateY(-2px) rotate(0deg);
  }
}

@-webkit-keyframes followblink {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  25% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  50% {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  }
  27% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@keyframes followblink {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  25% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  50% {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  }
  27% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@-webkit-keyframes subtshow {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  40% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes subtshow {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  40% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.u-top-nav {
  background: #fff533;
  position: relative;
  padding: 30px 15px 110px;
}

@media screen and (min-width: 768px) {
  .u-top-nav {
    padding: 15px 0 130px;
  }
}

.u-top-nav:before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1px;
  border-right: 100vw solid #fff533;
  border-top: 65px solid transparent;
  position: absolute;
  top: -65px;
  left: 0px;
}

@media screen and (min-width: 768px) {
  .u-top-nav:before {
    border-top: 255px solid transparent;
    top: -255px;
  }
}

.u-top-nav .nav-sp {
  margin: 0 -5px;
  line-height: 0.1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-sp {
    display: none;
  }
}

.u-top-nav .nav-sp li {
  width: 50%;
  padding: 0 5px;
  margin-top: 15px;
}

.u-top-nav .nav-sp li:nth-child(-n + 2) {
  margin-top: 0;
}

.u-top-nav .nav-sp li a {
  display: block;
  border: 2px solid #000000;
  background: #e60012;
  text-align: center;
  border-radius: 25px;
  overflow: hidden;
}

.u-top-nav .nav-sp li a span {
  display: block;
  border: 2px solid #ffffff;
  background: linear-gradient(to bottom, rgba(229, 36, 15, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  padding: 13px 0;
  border-radius: 24px;
}

.u-top-nav .nav-sp li a span img {
  width: 112px;
}

.u-top-nav .nav-twitter {
  margin-top: 60px;
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter {
    margin: 0 auto;
    width: 1080px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.u-top-nav .nav-twitter .twitter-desc {
  position: relative;
  padding-right: 130px;
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter .twitter-desc {
    width: 50%;
    padding: 0;
  }
}

.u-top-nav .nav-twitter .twitter-desc .desc-ttl {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter .twitter-desc .desc-ttl {
    width: 420px;
    margin: 0 auto;
  }
}

.u-top-nav .nav-twitter .twitter-desc .desc-ttl.is-active {
  -webkit-animation: subtshow 0.5s ease;
          animation: subtshow 0.5s ease;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.u-top-nav .nav-twitter .twitter-desc .desc-txt {
  margin-top: 15px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter .twitter-desc .desc-txt {
    margin-top: 40px;
    font-size: 2.4rem;
    padding: 0 205px 0 60px;
  }
}

.u-top-nav .nav-twitter .twitter-desc .desc-follow {
  width: 74px;
  position: absolute;
  right: 28px;
  top: 10px;
  -webkit-animation: followblink 5s infinite;
          animation: followblink 5s infinite;
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter .twitter-desc .desc-follow {
    width: 148px;
    right: 45px;
    top: 108px;
  }
}

.u-top-nav .nav-twitter .twitter-tline {
  margin-top: 25px;
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter .twitter-tline {
    margin-top: -45px;
    width: 340px;
    z-index: +1;
  }
}

.u-top-nav .nav-twitter .twitter-tline .tline-area {
  position: relative;
  line-height: 0.1;
  height: 340px;
}

.u-top-nav .nav-twitter .twitter-tline .tline-area .area-anm {
  display: none;
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter .twitter-tline .tline-area .area-anm {
    display: block;
    position: absolute;
    z-index: -1;
  }
  .u-top-nav .nav-twitter .twitter-tline .tline-area .area-anm.anm-1 {
    top: -132px;
    left: 14px;
  }
  .u-top-nav .nav-twitter .twitter-tline .tline-area .area-anm.anm-2 {
    top: 115px;
    left: -146px;
  }
  .u-top-nav .nav-twitter .twitter-tline .tline-area .area-anm.anm-3 {
    top: 13px;
    right: -95px;
  }
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter .twitter-tline .tline-area .twitter-timeline {
    position: relative;
  }
}

.u-top-nav .nav-twitter .twitter-tline .tline-follow {
  margin-top: 10px;
  position: relative;
  padding-top: 115px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter .twitter-tline .tline-follow {
    margin-top: 30px;
    padding-top: 0;
  }
}

.u-top-nav .nav-twitter .twitter-tline .tline-follow .follow-sp {
  display: block;
  width: 305px;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -152px;
}

@media screen and (min-width: 768px) {
  .u-top-nav .nav-twitter .twitter-tline .tline-follow .follow-sp {
    display: none;
  }
}

@-webkit-keyframes newsttl {
  0% {
    -webkit-transform: translate(-3px, 0px);
            transform: translate(-3px, 0px);
  }
  35% {
    -webkit-transform: translate(3px, 3px);
            transform: translate(3px, 3px);
  }
  50% {
    -webkit-transform: translate(0px, -3px);
            transform: translate(0px, -3px);
  }
  75% {
    -webkit-transform: translate(3px, 0px);
            transform: translate(3px, 0px);
  }
  100% {
    -webkit-transform: translate(-3px, 0px);
            transform: translate(-3px, 0px);
  }
}

@keyframes newsttl {
  0% {
    -webkit-transform: translate(-3px, 0px);
            transform: translate(-3px, 0px);
  }
  35% {
    -webkit-transform: translate(3px, 3px);
            transform: translate(3px, 3px);
  }
  50% {
    -webkit-transform: translate(0px, -3px);
            transform: translate(0px, -3px);
  }
  75% {
    -webkit-transform: translate(3px, 0px);
            transform: translate(3px, 0px);
  }
  100% {
    -webkit-transform: translate(-3px, 0px);
            transform: translate(-3px, 0px);
  }
}

.u-top-news {
  background: #ff9900;
  position: relative;
  padding: 157px 15px 107px;
}

@media screen and (min-width: 768px) {
  .u-top-news {
    padding: 180px 0 205px;
  }
}

.u-top-news:before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1px;
  border-left: 100vw solid #ff9900;
  border-top: 65px solid transparent;
  position: absolute;
  top: -65px;
  left: 0px;
}

@media screen and (min-width: 768px) {
  .u-top-news:before {
    border-top: 255px solid transparent;
    top: -255px;
  }
}

.u-top-news .news-ttl {
  width: 526px;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -285px;
  line-height: 0.1;
}

@media screen and (min-width: 768px) {
  .u-top-news .news-ttl {
    width: 880px;
    top: -52px;
    margin-left: -630px;
  }
}

.u-top-news .news-ttl .ttl-label {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 170px;
  top: 65px;
  left: 270px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /*
			&.is-show{
				animation: newsttl .2s infinite reverse;
				opacity: 1;
			}
			*/
}

@media screen and (min-width: 768px) {
  .u-top-news .news-ttl .ttl-label {
    width: 340px;
    top: 74px;
    left: 460px;
  }
}

.u-top-news .news-ttl .ttl-label.is-active {
  -webkit-animation: subtshow 0.5s ease;
          animation: subtshow 0.5s ease;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.u-top-news .news-tab {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: +1;
}

@media screen and (min-width: 768px) {
  .u-top-news .news-tab {
    width: 810px;
    margin: 0 auto;
  }
}

.u-top-news .news-tab li {
  width: 33.3%;
}

@media screen and (min-width: 768px) {
  .u-top-news .news-tab li {
    width: 270px;
  }
}

.u-top-news .news-tab li .tab-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  border: 1px solid #ffffff;
  background: #f7b2b7;
  color: #ffffff;
  font-weight: 700;
  padding: 7px;
  position: relative;
  outline: none;
  transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
  .u-top-news .news-tab li .tab-btn {
    border: 2px solid #ffffff;
    padding: 14px 10px;
  }
}

[data-whatinput="keyboard"] .u-top-news .news-tab li .tab-btn:focus {
  background: #e60012;
}

@media screen and (min-width: 768px) {
  .u-top-news .news-tab li .tab-btn:hover {
    background: #e60012;
  }
}

.u-top-news .news-tab li .tab-btn.is-active {
  background: #e60012;
}

.u-top-news .news-tab li .tab-btn.is-active:before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1px;
  border-top: 11px solid #ffffff;
  border-left: calc(16.5vw - 5px) solid transparent;
  border-right: calc(16.5vw - 5px) solid transparent;
  position: absolute;
  bottom: -12px;
  left: -1px;
}

@media screen and (min-width: 768px) {
  .u-top-news .news-tab li .tab-btn.is-active:before {
    left: -2px;
    border-top: 20px solid #ffffff;
    border-left: 135px solid transparent;
    border-right: 135px solid transparent;
    bottom: -22px;
  }
}

.u-top-news .news-tab li .tab-btn.is-active:after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1px;
  border-top: 11px solid #e60012;
  border-left: calc(16.5vw - 5px) solid transparent;
  border-right: calc(16.5vw - 5px) solid transparent;
  position: absolute;
  bottom: -10px;
  left: -1px;
}

@media screen and (min-width: 768px) {
  .u-top-news .news-tab li .tab-btn.is-active:after {
    left: -2px;
    border-top: 20px solid #e60012;
    border-left: 135px solid transparent;
    border-right: 135px solid transparent;
    bottom: -19px;
  }
}

.u-top-news .m-list-news {
  position: relative;
  z-index: +1;
}

@media screen and (min-width: 768px) {
  .u-top-news .m-list-news {
    width: 1080px;
    margin: 40px auto;
  }
}

.u-top-news .m-list-news .is-hide {
  display: none;
}

.u-top-news .show-news {
  display: none;
}

.u-top-news .show-goods {
  display: none;
}

.u-top-news .news-more {
  margin-top: 30px;
  position: relative;
  z-index: +1;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .u-top-news .news-more {
    width: 1080px;
    margin: 60px auto 0;
  }
}

@-webkit-keyframes animrun {
  0% {
    left: 100vw;
  }
  100% {
    left: -50vw;
  }
}

@keyframes animrun {
  0% {
    left: 100vw;
  }
  100% {
    left: -50vw;
  }
}

.u-top-run {
  background: #fff533;
  position: relative;
  height: 125px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .u-top-run {
    height: 0px;
  }
}

.u-top-run:before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1px;
  border-right: 100vw solid #fff533;
  border-top: 65px solid transparent;
  position: absolute;
  top: -65px;
  left: 0px;
}

@media screen and (min-width: 768px) {
  .u-top-run:before {
    border-top: 255px solid transparent;
    top: -255px;
  }
}

.u-top-run .run-img {
  display: inline-block;
  width: 85px;
  position: absolute;
  top: -80px;
  left: 100vw;
  -webkit-animation: animrun 2s linear infinite normal;
          animation: animrun 2s linear infinite normal;
}

@media screen and (min-width: 768px) {
  .u-top-run .run-img {
    width: 144px;
    top: -180px;
    -webkit-animation: animrun 2.4s linear infinite normal;
            animation: animrun 2.4s linear infinite normal;
    z-index: +1;
  }
}

.u-top-trivia {
  display: none;
}

.trivia-area {
  background: url(/tv/bo-bobo/images/top/trivia_bg_sp.png) center no-repeat #fff533;
  background-size: cover;
  padding: 80px 20px 100px;
}

@media screen and (min-width: 768px) {
  .trivia-area {
    background: url(/tv/bo-bobo/images/top/trivia_bg_pc.png) center no-repeat #fff533;
    padding: 115px 100px 125px;
  }
}

.trivia-area .trivia-ttl {
  max-width: 290px;
  text-align: center;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .trivia-area .trivia-ttl {
    max-width: 580px;
  }
}

.trivia-area .trivia-txt {
  margin-top: 35px;
  font-size: 27px;
  font-size: 2.7rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .trivia-area .trivia-txt {
    margin-top: 55px;
    font-size: 4.0rem;
  }
}

.u-top-modal {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 9999;
  display: none;
}

.u-top-modal .modal-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(255, 245, 51, 0.7);
}

.u-top-modal .modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: +1;
}

.u-top-modal .modal-close .close-btn {
  display: inline-block;
  width: 69px;
  height: 72px;
  border: none;
  padding: 0;
  overflow: hidden;
  background: url(../../images/top/btn_close.png) center no-repeat;
  background-size: 69px 72px;
  text-indent: -9999px;
  cursor: pointer;
  transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
  .u-top-modal .modal-close .close-btn {
    width: 138px;
    height: 144px;
    background-size: 138px 144px;
  }
}

[data-whatinput="keyboard"] .u-top-modal .modal-close .close-btn:focus {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@media screen and (min-width: 768px) {
  .u-top-modal .modal-close .close-btn:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

.u-top-modal .modal-area {
  position: absolute;
  top: 50%;
  left: 15px;
  right: 15px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (min-width: 768px) {
  .u-top-modal .modal-area {
    width: 70%;
    left: 50%;
    right: auto;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

.u-top-modal .modal-area .modal-youtube {
  padding-bottom: 56.25%;
  position: relative;
}

.u-top-modal .modal-area .modal-youtube iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}

.u-top-modal .modal-area img.mod {
  padding-top: 0%;
}

@media screen and (min-width: 768px) {
  .u-top-modal .modal-area img.mod {
    padding-top: 30%;
  }
}

#l-footer {
  padding-bottom: 77.8vw;
}

@media screen and (min-width: 768px) {
  #l-footer {
    padding-bottom: 540px;
  }
}

@media screen and (min-width: 768px) {
  #l-footer .footer-ptop {
    top: auto;
    bottom: 405px;
  }
}