@charset "UTF-8";
/* Scss Document */
html {
  font-size: 62.5%;
}
  html body {
    margin: 0;
    padding: 0;
    position: relative;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.8;
    font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    -webkit-text-size-adjust: 100%;   
}
    html body a {
      text-decoration: none;
      word-break: break-all;
      outline: none; }
    html body ol, html body ul {
      list-style: none;
      margin: 0;
      padding: 0; }
    html body h1, html body h2, html body h3, html body h4, html body h5, html body header, html body footer, html body nav, html body addres, html body p, html body div, html body img, html body figure, html body section {
      margin: 0;
      padding: 0;
      border: 0;
      vertical-align: baseline; }
    html body h1, html body h2, html body h3, html body h4, html body h5, html body p {
      word-break: break-all; }
    html body article, html body aside, html body details, html body figcaption, html body figure, html body footer, html body header, html body hgroup, html body menu, html body nav, html body section {
      display: block; }

    html body section.bg {
      background: url("../images/bg.jpg") #F6A2C7 top no-repeat;
		background-size: 100% auto;
}

#header {
  width: 100%;
  background-color: #111;
}
#header .headerInner {
    width: 860px;
    margin: 0 auto;
	padding: 14px 0;
    display: flex;
    justify-content: space-between;
}
#header .headerInner .anchor {
    width: 100%;
    max-width: 410px;
}
#header .headerInner .anchorBtn {
    position: relative;
    color: #FFF;
    font-size: 1.6rem;
	font-weight: bold;
    line-height: 2.9em;
    margin: 0 auto;
    padding: 0;
    width: 100%;
	height: 46px;
    text-align: center;
    background: #EE4F97;
    border-radius: 23px;
    -webkit-border-radius: 23px;
}
#header .headerInner .anchorBtn a {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #fff;
}
#header .headerInner .anchorBtn a::before {
	font-family: "Font Awesome 5 Free";
    content: "\f063";
    font-size: 1.4rem;
    color:#FFF;
	flex-shrink: 0;
    margin-right: 6px;
	width: 24px;
    height: 24px;
	line-height: 1.4;	
}
#header .headerInner .anchorBtn:hover {
        opacity: 0.7;
        transition: 0.3s ease-in-out; 
}
.fa-angle-down{
	text-align: left;
}
br.sp {
    display: none;
}
@media only screen and (max-width: 767px) {
#header .headerInner {
    width: 94%;
}
#header .headerInner .anchor {
    max-width: 48%;
}
#header .headerInner .anchorBtn {
    font-size: 1.2rem;
    line-height: 1.4em;
	height: 40px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
}
#header .headerInner .anchorBtn a::before {
	position: relative;
	top:.9rem;
}	
#header .headerInner .anchorBtn a {
    margin-top: 0.3em;
}
br.sp {
    display: inline;
}	
}


@media only screen and (max-width: 767px) {
    html body section.bg {
      background: url("../images/bg_sp.jpg") #F6A2C7 top no-repeat;
}	
}
	
    html body section .main {
      width: 100%;
      height: auto;
      padding: 43px 0 0;
      box-sizing: border-box;
}
    html body section .main.mainBg {
        background: url("../images/content_bg.png") repeat;
		background-position: center;

}
    html body section .main .mainTitle {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;	
    font-size: 6rem;
    line-height: 1;
    margin: 0 auto 20px;
    letter-spacing: .1em;
    text-align: center;
    position: relative;
    color: #FFF;
    letter-spacing: 4px;
    text-shadow: 2px 2px 0px #000000;
    font-weight: 900;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000;		
}
    html body section .main .mainTitle img {
	max-width: 400px;
		margin-bottom: 15px;
}

html body section .main .annotation {
	max-width: 946px;
      font-size: 1.4rem;
      margin: 10px auto 0;
      text-align: center;
}
html body section .main .annotationInner {
      width: auto;
	padding: 20px;
	background: #FFF;
      font-size: 1.6rem;
      text-align: center;
	border-radius: 10px;
	text-align: left;
}
html body section .main .relodeBtn {
    position: relative;
    color: #FFF;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2.9em;
    margin: 6px auto 0;
    padding: 0;
    width: 200px;
    height: 46px;
    text-align: center;
    background: #333;
    border-radius: 23px;
    -webkit-border-radius: 23px;
}
html body section .main .relodeBtn a {
	display: block;
}
html body section .main .relodeBtn:hover {
        opacity: 0.7;
        transition: 0.3s ease-in-out; 
}
html body section .main .relodeBtn a::before {
	font-family: "Font Awesome 5 Free";
    content: "\f01e";
    font-size: 1.4rem;
    color:#FFF;
	flex-shrink: 0;
    margin-right: 8px;
	width: 24px;
    height: 24px;
	line-height: 1.4;	
}
.reload{
	cursor: pointer;
}
html body section .main .environment{
	margin: 20px 0 0;
	text-align: center;
	font-size: 1.5rem;
} 
html body section .main .environment a:link{
	color: #333;
	font-weight: bold;
} 
html body section .main .environment a:hover{
	text-decoration: underline;
} 



      html body section .main .mainInner {
        width: 922px;
        height: 523px;
        margin: 0 auto;
        padding: 12px;
        background: #000;
        -webkit-border-radius: 14px;		  
        border-radius: 14px;
}

    html body section .content {
        padding: 40px 0 100px;
        position: relative; 
        background: url("../images/content_bg.png") repeat;

}

      html body section .content .contentInner {
        width: 1000px;
        margin: 0 auto;
        padding: 55px 40px;
        box-sizing: border-box;
        background-color: #fff;
        border: 4px solid #000;
        box-shadow: 8px 8px 0px 0px #000;	  
        -webkit-border-radius: 10px;
        border-radius: 10px; 
}


        html body section .content .contentInner p {
          font-size: 2.5rem;
          line-height: 1.6;
          margin: 0 0 30px;
          font-weight: bold; 
}
        html body section .content .contentInner small {
          display: inline-block;
          font-size: 1.2rem;
          line-height: 1.4;
          margin: 15px 0;
          font-weight: normal; 
}

        html body section .content .contentInner h2 {
          font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;			
          font-size: 4rem;
          line-height: 1;
          margin: 0 auto 30px;
          letter-spacing: .1em;
          text-align: center;
          position: relative; 
          color: #FFFF00;
          letter-spacing: 4px;
          text-shadow: 2px 1px 0px #000000;
          font-weight: 900;
          -webkit-text-stroke-width: 1px;
          -webkit-text-stroke-color: #000;
}
        html body section .content .contentInner h2:nth-child(n + 2) {
          margin: 50px auto 30px;
}
html body section .content .contentInner h2::before {
  content: '';
  display: inline-block;
  width: 79px;
  height: 61px;
  background-image: url(../images/h_star_b.png);
  background-size: contain;
  vertical-align: middle;	
   margin-right: 2rem;
}
html body section .content .contentInner h2::after {
  content: '';
  display: inline-block;	
  width: 79px;
  height: 61px;
  background-image: url(../images/h_star_a.png);
  background-size: contain;
  vertical-align: middle;
   margin-left: 2rem;			  
}

@media only screen and (max-width: 767px) {	
html body section .content .contentInner h2::before {	
  width: 40px;
  height: 30px;
   margin-right: 1rem;			  
}
 html body section .content .contentInner h2::after {
  width: 40px;
  height: 30px;
   margin-left: 1rem;	 
}	
}

        html body section .content .contentInner h3 {
			position: relative;
			color: #FFF;
          font-size: 2rem;
          line-height: 1.3;
          margin: 0 auto 40px; 
			padding: 8px;
			max-width: 320px;
          text-align: center;
			background: #EE4F97;
			border-radius: 10px;
			-webkit-border-radius: 10px;
}


        html body section .content .contentInner h3:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 51.8%;
  margin-left: -15px;
  border: 8px solid transparent;
  border-top: 8px solid #EE4F97;
}
        html body section .content .contentInner h3.dance {
			background: #009143 !important;
}
        html body section .content .contentInner h3.cheer {
			background: #f5a100 !important;
}

        html body section .content .contentInner h4 {
          font-size: 1.8rem;
          line-height: 1.3;
          margin: 0 auto 15px; 
			padding: 4px 0;
			width: 100%;
          text-align: center;
			background: #FACDE1;
			border-radius: 25px;
			-webkit-border-radius: 25px;
}

    html body .pagetop {
      width: 52px;
      height: 52px;
      position: fixed;
      right: 30px;
      bottom: 50px; }
      html body .pagetop img {
        width: 52px;
        height: 52px; }
      html body .pagetop:hover, html body .pagetop:hover img {
        opacity: 0.7;
        transition: 0.3s ease-in-out; }
    html body footer {
      background-color: #111;
      height: 153px; }
      html body footer p {
        font-size: 1.2rem;
        line-height: 1.4;
        color: #fff;
        text-align: center;
        padding: 48px 0 0;
        box-sizing: border-box; }
        html body footer p br {
          display: none; }



@media only screen and (max-width: 767px) {
  html body section .main {
    height: auto;
    padding: 25px 0 10px; 
	}
    html body section .main.mainBg {
    background-size: 40%;
		background-position: bottom;
}	
    html body section .main .mainTitle {
    font-size: 4rem;
    margin: 0 auto;	
    text-shadow: 2px 2px 0px #000000;
    -webkit-text-stroke-width: 1px;		
}	
    html body section .main .mainTitle img {
	max-width: 50vw;
}	
html body section .main .annotation {
      font-size: 1.3rem;
	line-height: 1.4;
	text-align: left;
	width: 90%;
}	
    html body section .main .mainInner {
      width: auto;
		height: auto;
      margin: 0 20px; 
		padding: 12px;
	}
    html body section .main .mainInner.pht {
		padding: 12px 12px 4px 12px;
	}

  html body section .content {
    padding: 0 0 38px; 
	  background-size: 40%;
	  background-position: bottom;
	}


    html body section .content .contentInner {
      width: auto;
      margin: 10px 25px 0 25px;
      padding: 21px 15px 15px;
      -webkit-border-radius: 13px;
      border-radius: 13px; }

      html body section .content .contentInner p {
        font-size: 1.4rem;
        line-height: 1.4;
        margin: 0 0 25px; }

      html body section .content .contentInner h2 {
        font-size: 3rem;
        margin: 22px auto 20px;
        text-shadow: 1px 1px 0px #000000;		  
        padding: 0; }

      html body section .content .contentInner h3 {
        font-size: 1.4rem;
        margin: 0 0 20px;
        text-align: center;
		  max-width: 100%;
		  padding: 8px 0;
	}


  html body .pagetop {
    width: 40px;
    height: 40px;
    right: 10px;
    bottom: 20px; }
    html body .pagetop img {
      width: 40px;
      height: 40px; }
  html body footer {
    height: 77px; }
    html body footer p {
      font-size: 1rem;
      padding: 20px 0 0; }
      html body footer p br {
        display: block; }
      html body footer p span {
        display: none; 
	}
 }

.movie  {
  margin: 0 auto;
  width: 922px;
  text-align: center;
}

@media only screen and (max-width: 767px) {
.movie {
  width: 100%;
}
.movie img {
  width: 100%;
}	
}

html body section .content .contentInner .schedule{
  width: 100%; 
  margin: 0 auto;
  display: flex;	
}
html body section .content .contentInner .time{
  width: 320px;
}
html body section .content .contentInner .acting{
  width: 695px;
	margin-left: auto;
align-items: center;	
}
html body section .content .contentInner .kinds{
  width: 100%; 
  margin: 0 auto;
  display: flex;
justify-content:space-between;	
}
html body section .content .contentInner .kinds > div{
  width: 340px;
}
html body section .content .contentInner .kinds dt{
  margin: 0 0 10px;
	padding: 0;
	color: #002CB2;
}
html body section .content .contentInner .kinds dd{
  margin: 0 0 18px;
	padding: 0;
	line-height: 1.3;
}
html body section .content .contentInner .kinds dd.listEnd{
	margin-bottom: 30px;
}

html body section .content .contentInner .time table{
  width: 100%;
border-collapse: collapse;	
border: 1px solid #ddd;	
}
html body section .content .contentInner .time table th, table td {
    padding: 0.2rem 0.75rem;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
html body section .content .contentInner .time table th {
    border-right: 1px solid #ddd;
	border-top: none;
	font-weight: normal;
	text-align: left;
}
html body section .content .contentInner .time table td {
    border-left: 1px solid #ddd;
	text-align: center;
}
html body section .content .contentInner .time table td.opening{
    background: #EEEEEE;
	padding: 1rem 0;
}
html body section .content .contentInner .time table td.dance{
    background: #FACDE1;
	padding: 3.5rem 0;
}
html body section .content .contentInner .time table td.ballet{
    background: #FACDE1;
	padding: 2rem 0;
}
html body section .content .contentInner .time table td.rest,
html body section .content .contentInner .time table td.ending{
    background: #EEEEEE;
	padding: 0.2rem 0;
}
html body section .content .contentInner .time table td.cheer{
    background: #FACDE1;
	padding: 5rem 0;
}

html body section .content .contentInner .ranking{
  width: 100%; 
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
html body section .content .contentInner .ranking > div{
  width: 100%; 
  max-width: 767px;
  margin-bottom: 80px;
}
html body section .content .contentInner .ranking h3 {
    position: relative;
    color: #FFF;
    font-size: 1.8rem;
    line-height: 1.3;
    margin: 0 auto 20px;
    padding: 4px;
    max-width: 767px;
    text-align: center;
    background: #EE4F97;
    border-radius: 25px;
    -webkit-border-radius: 25px;
}
html h3 {
	padding-top: 40px;
	margin-top: -40px;
}

html body section .content .contentInner .ranking h3:before {
  top: 0;
  left: 0;
  margin-left: 0;
  border: none;
  border-top: none;
}
html body section .content .contentInner .ranking h4 {
    color: #002CB2;
    font-size: 1.8rem;
    margin: 30px auto 10px;
	padding: 0;
    max-width: 100%;
    text-align: left;
	background: none;
}
html body section .content .contentInner .ranking .cheer {
}
html body section .content .contentInner .scoring{
  width: 100%; 
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
html body section .content .contentInner .scoring .teamRanking{
  width: 50px; 
}
html body section .content .contentInner .scoring .teamName{
	margin-top: 5px;
  width: calc(100% - 75px);
	font-size: 1.72rem;
}
html body section .content .contentInner .ranking dt{
	margin: 0 0 12px;
	padding: 0;
	line-height: 1.4;
}
html body section .content .contentInner .ranking dt:nth-child(n+2){
	margin: 30px 0 12px;
}
html body section .content .contentInner .ranking dd{
	margin: 0;
	padding: 0;
}
html body section .content .contentInner .ranking .gold{
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: #967120;
	font-weight: bold;
	background: #E4C900;
	text-align: center;
	line-height: 60px;
	font-size: 1.8rem;
}
html body section .content .contentInner .ranking .silver{
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: #7F7B74;
	font-weight: bold;
	background: #D8D5D2;
	text-align: center;
	line-height: 60px;
	font-size: 1.8rem;
}

html body section .content .contentInner .ranking .bronze{
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: #975819;
	font-weight: bold;
	background: #D0AA80;
	text-align: center;
	line-height: 60px;
	font-size: 1.8rem;
}
html body section .content .contentInner .ranking .special{
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: #333;
	font-weight: bold;
	background: #FFFF26;
	text-align: center;
	line-height: 60px;
	font-size: 1.3rem;
}
html body section .content .contentInner .ranking .special span {
    display: inline-block;
    line-height: 1.1;
    margin-top: 16px;
}

@media only screen and (max-width: 767px) {
html body section .content .contentInner .scoring .teamName{
	margin-top: 0;
}	
html body section .content .contentInner .ranking{
	flex-flow: column;	
}
	
html body section .content .contentInner .ranking > div{
	max-width: 100%;
}
html body section .content .contentInner .ranking h3 {
    max-width: 100%;
}	
}



html body section .content .contentInner .ranking table{
  width: 100%;
  border-collapse: collapse;	
  border: 1px solid #ddd;	
  margin-bottom: 15px;
}
html body section .content .contentInner .ranking table th, table td {
    padding: 0.2rem 0.75rem;
    vertical-align: top;
    border: 1px solid #ddd;
}
html body section .content .contentInner .ranking table th {
	background: #EEEEEE;
	font-weight: normal;
	text-align: center;
	line-height: 1.3;
}
html body section .content .contentInner .ranking table td {
	text-align: center;
}



@media only screen and (max-width: 767px) {
html body section .content .contentInner .schedule{
flex-flow: column;	
}	
html body section .content .contentInner .time{
  width: 100%;
}
html body section .content .contentInner .acting{
  width: 100%;
}
html body section .content .contentInner .kinds{
flex-flow: column;	
}	
html body section .content .contentInner .kinds > div{
  width: 100%;
}	
html body section .content .contentInner .acting > h3:first-child{
	margin-top: 5rem;
}	
}


html body section .content .permission{
  width: 50%; 
  margin: 40px auto 0;
  display: flex;
  justify-content: space-between;	
}
html body section .content .permission > div{
  margin: 0 auto;
  width: 100%; 
  text-align: center;
  font-size: 1.6rem;
	line-height: 1.4;
}

@media only screen and (max-width: 767px) {
html body section .content .permission{
  width: 90%; 	
}
html body section .content .permission > div {
    font-size: 1.5rem;
}	
}


.movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.commentBtn{
    position: relative;
    display: block;
    margin: 0;
    width: 120px;
    height: 22px;
    line-height: 1.8em;
    text-align: center;
    background: #333;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 94%;
}
.commentBtn a {
   position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
	color: #fff;	
}
.commentBtn:hover{
  cursor:pointer;
	opacity: 0.7;
}

.modaal-wrapper{
	line-height: 1.4;
}
.modaal-wrapper h3{
	padding: 5px 10px 4px;
	margin-bottom: 5px;
	color: white;
	background: #EE4F97;
}
.modaal-wrapper h3:nth-of-type(2){
	margin-top: 30px;
}


html body section .content .contentInner .time table th.pink{
    background: #FACDE1;
	text-align: center;
}
html body section .content .contentInner .time table th.gray{
    background: #DDD;
	text-align: center;
}
html body section .content .contentInner .time table.archive th {
    border-bottom: 1px solid #ddd;
}
html body section .content .contentInner .time table.archive td {
    text-align: left;
}
html body section .content .contentInner .time table.archive td.tCent {
    text-align: center;
}

.mt10{
	margin-top: 10px !important;
}
.mt20{
	margin-top: 20px !important;
}
.mt30{
	margin-top: 30px !important;
}
.mb10{
	margin-bottom: 10px !important;
}
.mb20{
	margin-bottom: 20px !important;
}
.mb30{
	margin-bottom: 30px !important;
}
.f110{
	font-size: 110% !important;
}
.f120{
	font-size: 120% !important;
}

html body section .content .contentInner .comment{
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #CCC;	
}
html body section .content .contentInner .comment img{
	width: 100%;
}
html body section .content .contentInner .comment figcaption{
	margin: 20px 0 30px;
    padding: 25px 20px 15px;
	background: #FFE599;
	border-radius: 10px;
	line-height: 1.4;	
}
html body section .content .contentInner .comment figcaption.dance{
	background: #E5F2E8;	
}
html body section .content .contentInner .comment figcaption.cheer{
	background: #fdedd4;	
	margin-top: 20px;
}
html body section .content .contentInner .comment p{
	margin: 5px 0;
	font-size: 112.5%;
	line-height: 1.4;
	font-weight: normal;	
}
html body section .content .contentInner .comment p.title{
	position: absolute;
    margin-top: -2.3em;	
    font-size: 105%;
    padding: 4px 15px 2px;
    background-color: #FF8000;
    display: inline-block;
    border-radius: 25px;
    color: #fff;
}
html body section .content .contentInner .comment p.titleDance{
	position: absolute;
    margin-top: -2.3em;	
    font-size: 105%;
    padding: 4px 15px 2px;
    background-color: #009143;
    display: inline-block;
    border-radius: 25px;
    color: #fff;
}
html body section .content .contentInner .comment p.titleCheer{
	position: absolute;
    margin-top: -2.3em;	
    font-size: 105%;
    padding: 4px 15px 2px;
    background-color: #f5a100;
    display: inline-block;
    border-radius: 25px;
    color: #fff;
}

html body section .content .contentInner .comment p.list{
	margin-bottom: 15px;
	padding-bottom: 15px;
	font-size: 100%;	
	border-bottom: 1px dotted #666;
}


#menu{
	margin: 40px auto 70px;
	width: 492px;
	text-align: center;
}

#menu li{	
	float: left;
	width: 50%;
}
#menu li:hover{	
	opacity: 0.6;
}
#menu li span{	
	position: relative;
	display: block;
    padding: 4px 10px 2px;	
    border-radius: 25px;
    font-size: 110%;	
	font-weight: bold;	
    color: #fff;
	width: 80%;	
}
#menu span.dance{
    background-color: #009143;
}
#menu span.cheer{	
    background-color: #f5a100;
}
#menu li span::before {
	position: absolute;
	top:8%;
	right:12%;
	text-align: center;
  	content: '\f078';
  	font-family: 'Font Awesome 5 Free';
  	font-weight: 900;
}

@media only screen and (max-width: 767px) {
#menu{
	margin: 20px auto 75px;
	width: 86%;
}
}	



/*ラベル*/
.cheer-box label{
max-width: 385px;
font-weight: bold;
font-size: 16px;
text-align: center;
background: #f5a100;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 8px;
cursor: pointer;
color: #fff;
transition: all 0.5s;
}
.dance-box label{
max-width: 385px;
font-weight: bold;
font-size: 16px;
text-align: center;
background: #009143;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 8px;
cursor: pointer;
color: #fff;
transition: all 0.5s;
}

/*ラベルホバー時*/
.cheer-box label:hover{
background: rgba( 250, 192, 61, 0.55 );
-webkit-transition: all .3s;
transition: all .3s;
}
.dance-box label:hover{
background: rgba( 0, 145, 67, 0.55 );
-webkit-transition: all .3s;
transition: all .3s;
}

/*チェックは隠す*/
.cheer-box input,.dance-box input{
display: none;
}

/*チェックのアイコン（+）*/
.cheer-box label:after,.dance-box label:after{
color: #fff;
content: "\f107";/*アイコンの種類*/
font-family: "Font Awesome 5 Free";
}

/*チェックのアイコン（-）*/
.cheer-box input:checked ~ label::after,.dance-box input:checked ~ label::after {
color: #fff;
content: "\f106";/*アイコンの種類*/
font-family: "Font Awesome 5 Free";
}

/*中身を非表示にしておく*/
.cheer-box div,.dance-box div{
height: 0px;
padding: 30px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}

.cheer-box input:checked ~ div{
margin-top: 15px;
margin-bottom: 30px;
height: auto;
padding: 30px;
background: #fdedd4;
opacity: 1;
border-radius: 16px;
}
.dance-box input:checked ~ div{
margin-top: 15px;
margin-bottom: 30px;
height: auto;
padding: 30px;
background: #E5F2E8;
opacity: 1;
border-radius: 16px;	
}
	
.cheer-box div p,.dance-box div p{
color: #333;
line-height: 23px;
font-size: 16px;
padding: 20px;
text-align: justify;
}

.box-small p{
margin-bottom: 0px;
}