@charset "utf-8";
/* CSS Document */
h2{
	background:#fdeeef;
	border-radius:10px;
	padding:15px;
	font-size:20px;
}
.pink{
	background:#fdeeef;	
}
.blue{
	background:#DDEEFF;
}
.orange{
	background:#feebcd;
}
.gray{
	background: #ECECEC;
}
.christmas{
	background: #B81C22;
	color: #ffffff;
}
p,h3,h4{
	line-height:1.7em;	
}
#bgm .explanation{
	margin-top:30px;
}
#bgm .area01,
#bgm .bnrarea{
	display:flex;
	flex-wrap:wrap;	
}
#bgm .bnrarea .box2{
	width:100%;
	margin:5% auto;	
}
/*おすすめBGM*/
#bgm .area01 .box2{
	width:98%;
	margin:2% 1%;
	display:flex;
	flex-wrap:wrap;	
}
#bgm .area01 .box2 .imgarea
{
	width:46%;
	margin:2%;	
}
#bgm .area01 .box2 .txtarea{
	width:48%;	
	margin:30px 0 0 0;
}
#bgm .area01 .box2 .txtarea h3{
	font-size:25px;	
}
#bgm .area01 .box2 .txtarea p,
#bgm .area01 .box6 .txtarea p{
	font-size:16px;	
}
#bgm .area01 .box2 .txtarea .link,
#bgm .area01 .box3 .link{
	display:flex;
	flex-wrap:wrap;
	margin:10px 0;
}
#bgm .area01 .box2 .txtarea .link a{
	display:block;
	width:38%;
	margin:3%;
	border:1px solid #cccccc;
	border-radius:10px;
	box-shadow: 0px 3px 3px 0px #bebcbc;	
	text-align:center;
	padding:2%;
}
/*BGM*/
#bgm .area01 .box6{
	width:46%;
	margin:5% 2%;
}
#bgm .area01 .box6 .txtarea h4{
	font-size:18px;
}
#bgm .area01 .box6 .txtarea .link a{
	display:block;
	margin:10% 0;
	border:1px solid #cccccc;
	border-radius:10px;
	box-shadow: 0px 3px 3px 0px #bebcbc;	
	text-align:center;
	padding:1%;
}
/*キッズ*/
#bgm .area01 .box3{
	width:96%;
	margin:5% 2%;
	border:1px solid #cccccc;
}
#bgm .area01 .box3 .link a{
	width:43%;
	margin:2%;
	border:1px solid #cccccc;
	border-radius:10px;
	box-shadow: 0px 3px 3px 0px #bebcbc;	
	text-align:center;
	padding:1%;
}
#bgm .area01 .box3 p{
	font-size:20px;
	padding:10px 0 0 10px;	
}

 @media screen and (min-width:768px) {
#bgm .bnrarea .box2{
	width:46%;
	margin:5% 2%;	
}
#bgm .area01 .box2{
	width:48%;
	margin:2% 1%;
 }
 #bgm .area01 .box6{
	width:21%;
	margin:5% 2%;
}
#bgm .area01 .box3{
	width:29%;
	margin:5% 2%;
}
 }