*{
	padding:0;
	margin:0;
  }

  body{
	font-family: 'Noto Sans JP', sans-serif;
	font-size:20px;
	line-height: 1.6em;
  }


  main{
	background: url('../../img/game/bg.jpg') #fdf49c repeat top left;
	background-attachment: fixed;
  }


 main .wrapper {
	  background: #fdf49c;
	  max-width: 1200px;
	  margin: 0 auto;
	  padding: 60px;
	 
  }

  .expression img{
	max-width:100%;
	margin:0 auto;
	display:block;
  }

  .expression {
	background:#fff;
	border-radius:10px;   
	border:3px solid #ff6600;
	padding:30px;
  }

  .expression .content-wrap h2{
	color:#000;
	margin:20px 0;
	text-align:center;
	font-weight: bold;
  }

.expression .content {
    display: flex;
    flex-wrap: wrap;
	justify-content: flex-start;
    flex-direction: column;
	width: 100%;
}

.expression .content .text-audio {
    display: flex;
    flex-wrap: wrap;
	width: 100%;
	text-align: left;
	align-items: center;
	padding:24px 0;
	border-bottom:0.5px solid #f3f3f3;
}

.expression .content .text-audio .audio-file{
	width:5%;
}

.expression .content .text-audio .audio-text {
    width: 90%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
	gap:24px;
}

.expression .content .text-audio .audio-text p{
	margin:0
}

.expression .content .text-audio .audio-text .en-text, .expression .content .text-audio .audio-text .ja-text {
    text-align: left;
    width: 50%;
}
.expression .content .text-audio .audio-text .ja-text p {
	color:#ff6600
}


  .expression p{
	color: #000;
	font-size:18px ;
	font-weight:bold;
  }
  
  .expression p span{
	font-size:16px ;
	color:#ff6600;
	margin-left:10px;
	font-weight:normal;
  }

  .lesson .expression p {
    color: #222;
    font-weight: normal;
	}

	.lesson .expression p:last-child{
	margin-bottom:0;
	}

	.expression .text-orange{
	color:#ff6600
	}




  @media only screen and (max-width:820px){
	main .wrapper {
		padding: 10px;

	}

  	.lesson  .expression .content{
		gap:0;
	}
  
  	.expression .content .text-audio .audio-file {
    width: 15%;
		}

		.expression .content .text-audio .audio-text {
			width: 85%;
		}
    
  }

  @media only screen and (max-width: 600px){
	


	.expression .content-wrap{
		padding:10px;
	}

	.expression p,  .lesson .expression ol li{
		font-size:15px;
	}

	.expression .content-wrap h2{
		font-size:18px;
	}

	.expression .content{
		gap:0;
	}

	.lesson .expression ol{
		padding:0 20px;
	}
	
	.expression{
		padding:0;
	}
	


  }
  
  
  /*audio style */
.playBtn {
    width: 40px;
    height: 40px;
    display: block;
    background-color: #62bc33;
    border-radius: 50%;
    z-index: 1;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
  
.playBtn:after {
    display: block;
    margin: auto;
    /* content: "Mute"; */
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: -25px;
    transition: all 0.3s ease-in-out;
    font-size: 10px;
    letter-spacing: 1px;
    font-family: arial;
}
  
  .playBtn .playIcon {
    border: solid 3px #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: auto;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
}
  
.playBtn .playIcon:after {
    content: "";
    display: block;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7.5px 0 7.5px 12px;
    border-color: transparent transparent transparent #fff;
    position: relative;
    top: 5px;
    left: 2px;
}
    .playBtn.stopBtn .playIcon {
      opacity: 1;
    }
 .playBtn.stopBtn #bars {
      opacity: 0;
    }
     /* .playBtn.stopBtn #bars:after {
      content: "Play";
    } */
  
	
#bars {
    height: 30px;
    width: 30px;
    position: relative;
    margin: auto;
    top: 13px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}
  .bar {
    background: #fff;
    bottom: 1px;
    height: 3px;
    position: absolute;
    width: 5px;
    animation: sound 0ms -800ms linear infinite alternate;
  }


@keyframes sound {
  0% {
    opacity: 0.35;
    height: 3px;
  }
  100% {
    opacity: 1;
    height: 28px;
  }
}

.bar:nth-child(1) {
    left: 0px;
    animation-duration: 474ms;
  }
  .bar:nth-child(2) {
    left: 7px;
    animation-duration: 433ms;
  }
  .bar:nth-child(3) {
    left: 14px;
    animation-duration: 407ms;
  }
  .bar:nth-child(4) {
    left: 21px;
    animation-duration: 458ms;
  }
 .bar:nth-child(5) {
    left: 28px;
    animation-duration: 400ms;
  }
  .bar:nth-child(6) {
    left: 35px;
    animation-duration: 427ms;
}

@media only screen and (max-width: 600px) {
 .playBtn {
    transform: scale(0.8);
  }
}