@charset "utf-8";
.voice_area{background-color:#e6ecf6;overflow:hidden;width:935px;margin:5rem auto 0;display:block;}
	
.voice_area h2{background-color:#516c96;padding:1.5rem;font-size:2.5rem;color:#FFF;   position: relative;line-height:150%;}
.voice_area h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 8px solid transparent;
  border-top: 14px solid #516c96;
}


	/* 非アクティブなコンテンツを非表示にする */
.tab-content {background-color:#FFF;
    display: none;
    padding: 20px;
   /* border: 1px solid #ccc;*/
}
.tab-content02 {background-color:#FFF;
    display: none;
    padding: 20px;
   /* border: 1px solid #ccc;*/	
}
.tab-content03 {background-color:#FFF;
    display: none;
    padding: 20px;
   /* border: 1px solid #ccc;*/
}
.tab-content04 {background-color:#FFF;
    display: none;
    padding: 20px;
   /* border: 1px solid #ccc;*/
	
}




/* アクティブなタブボタンのデザイン */
.tab-button.active {
    background-color: #007bff; 
    color: white;
}
.tab-button02.active {
    background-color: #007bff;
    color: white;
}
.tab-button03.active {
    background-color: #007bff;
    color: white;
}
.tab-button04.active {
    background-color: #007bff; /* 例: AAAAAの色 */
    color: white;

}

	.tabs-container{margin:3rem 2rem 2rem;}
    .tabs-container02{margin:3rem 2rem 2rem;}
    .tabs-container03{margin:3rem 2rem 2rem;}
    .tabs-container04{margin:3rem 2rem 2rem;}

    .bg_demo_voice{background-color:#cbd7e8;margin:0 auto !important;}

	.tabs-header{text-align:left;}
	.tabs-header button{padding:1.2rem 1rem;width:150px;font-size:2.2rem;font-weight:bold;color:#FFF;cursor:pointer;border-radius:0.5rem 0.5rem 0 0;}
	.tabs-header button:nth-child(1){background-color:#4eb8e6;}	
	.tabs-header button:nth-child(2){background-color:#2b5161;}	
	.tabs-header button:nth-child(3){background-color:#7594c5;}	
	
    .tabs-header button:nth-child(1).active,.tabs-header button:nth-child(2).active,.tabs-header button:nth-child(3).active,.tabs-header button:nth-child(4).active{height:56px;}	

	.tabs-container04 .tabs-header button{width:270px;}


	.content-body{overflow:hidden;}
	.image-area{float:left;width:250px;}
	.text-area{float:right;width:580px;text-align:left;}
	.text-area h4{font-size:2.4rem;font-weight:bold;margin:0.5rem 0 1rem;}
	
    .voice_att{font-size:1.1rem;display:block;text-align:left;padding:0.5rem 0 0 1rem;line-height:150%;width:935px;margin:0 auto;}
	

	
/* アクティブなコンテンツを表示する */
.tabs-container .tab-content.active {display:block;}
	
.tabs-container #tab-a.active {
    border: 7px solid #4eb8e6;
}
.tabs-container #tab-b.active {
    border: 7px solid #2b5161;
}	
.tabs-container #tab-c.active {
    border: 7px solid #7594c5;
}	
.tabs-container02 .tab-content02.active {display:block;}
	
.tabs-container02 #tab-d.active {
    border: 7px solid #4eb8e6;
}
.tabs-container02 #tab-e.active {
    border: 7px solid #2b5161;
}	
.tabs-container02 #tab-f.active {
    border: 7px solid #7594c5;
}	
.tabs-container02 #tab-f .text-area{width:100%;}

.tab-content03.active {display:block;}


.tabs-container04 .tab-content04.active {display:block;}
	
.tabs-container04 #tab-g.active {
    border: 7px solid #4eb8e6;
}
.tabs-container04 #tab-h.active {
    border: 7px solid #2b5161;
}	


	@media only screen and (max-width: 935px) {
		.voice_area{width:100%;}
		.text-area{display:block;float:none;width:100%;}
		.image-area{display:block;float:none;margin:0 0 1.5rem;}
		.voice_att{width:100%;}
	}
	@media only screen and (max-width: 736px) {
		.voice_area{margin:2rem auto 0;}
		.voice_area h2{font-size:1.7rem;padding:1rem;}
		
		.tab-content{width:100%;}
		.tab-content02{width:100%;}
		.tab-content03{width:100%;}
		.tab-content04{width:100%;}
		
		.content-body{width:100%;}
		.tabs-container{width:96%;margin:2rem auto 1rem;}
		.tabs-container02{width:96%;margin:2rem auto 1rem;}
		.tabs-container03{width:96%;margin:2rem auto 1rem;}
		.tabs-container04{width:96%;margin:2rem auto 1rem;}
		
		.tabs-header{width:100%;}
		.tabs-header button{width:32%;font-size:1.5rem;padding:1rem;}

	    .tabs-header button:nth-child(1).active,.tabs-header button:nth-child(2).active,.tabs-header button:nth-child(3).active,.tabs-header button:nth-child(4).active{height:45px;}
		
		.tabs-container04 .tabs-header button{width:49%;font-size:1.3rem;padding:1rem 0.5rem;}
		
		.text-area h4{display:block;font-size:1.8rem;}

		 .voice_att{font-size:0.9rem;display:block;text-align:left;padding:0.5rem 0 0 0rem;line-height:150%;}
	}