/*ボサノヴァ生誕60周年*/
@charset "UTF-8";
/* CSS Document */

.body{
	background-color:#fff5e0;/*レモンイエロー #FFF200, 橙 #FFD464 , 黄色#FFCC00 パステル #fff7c0  渋い黄色 #f7ef6a ライムライト#fff799 コーヒー #4d342a #494a41*/
    margin:  0 -25%;
	}

.wrap{
	width:90%;
	margin:5%;
}


.green{ 
	color: #009944;
	}



.MEIBAN_box{
	float:left;
	width:25%;
	margin-left:6%;
	height:600px;
	border-bottom:none;/*solid 1em #FFF;*/
	}


.CD_img{
	width:70%;
	margin:10% auto;
	/*background-color:#993300;*/
	}

.CD_title{
	font-size:1.2em;
	color:#ea553a;/*#4d9a10 ,#8cc63f*/
}


.CD_Artist{
	font-size:1em;
	margin-bottom:0.5em;
}


.CD_list{
	font-size:0.9em;
	margin-bottom:1em;
	text-align:left;	
}

.CD_recomend{
	/*font-size:1em;*/
	text-align:left;
	font-weight:300;
}

.p_pc{
	width:70%;/*ボサノヴァを吹いてみようのテキスト幅*/
	margin:0 auto;
	}


.Bossa_menu {
	width: 80%; 
	margin: 0 auto;
	}
	
.Bossa_menu ul li{
	float:left;
	width: 25%;
	}	
	
.Book_sample{
	width:500px;
	margin:5% 0 2% 0;
	/*border: 1px solid #CCC;*/
	}	
	
.Book_sample50{
	float:left;
	width:250px;
	margin:5% 0 2% 0;
	}	
	
.kasen {
     /*padding: 0.2em;*/
     background: linear-gradient(transparent 50%, #fff100 50%);
}

.square_btn{
	width:11em;
    display: block;
	margin-top:10px;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    background: #d1de4c;/*赤　ボタン色  緑 #009944*/
    color: #000;
    /*border-bottom: solid 1px #627295;
    border-radius: 5px;*/
}

.ScoreIMG{
	width: 25%; 
	float: left;
	margin:0 2em 5px 0;
	border: 1px solid #CCC;
	}
	
hr{
	margin-top:5%;
	border-top: 3px dotted #009944;
	}
	
	
.FLBtn {
  color: #fff;
  font-size: 110%;
  border-radius: 4px;
  text-decoration: none;
  background: #F63;
  box-shadow: 0 3px #f7d0cb;
  position: relative;
  display: inline-block;
  top: -2px;
  padding: 5px 15px;
  letter-spacing:1px;
}
.FLBtn:hover {
  box-shadow: 0 1px #f7d0cb;
  top: 1px;
}

a:link.FLBtn{
	color: #fff;
	font-weight:normal;
	letter-spacing:1px
	}
	
a:visited.FLBtn {
	color:#FFF;
	text-decoration:none;
}


/*++++++++++++++++++++++++++++++++++++++++++
スマホ　表示
+++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width: 768px){
.body{
	background-color:#fff5e0;/*レモンイエロー #FFF200, 橙 #FFD464 , 黄色#FFCC00 パステル #fff7c0  渋い黄色 #f7ef6a ライムライト#fff799 コーヒー #4d342a #494a41*/
    margin:  0 -5%;
	}


.MEIBAN_box{
	width:90%;
	float:none;
	height:auto;
	margin:20px auto;
	padding-bottom:10px;
	border-bottom:solid 10px #FFF;
	}

	
.CD_title{
	font-size:14px;
	text-align:left;
     float: left;
	margin:0.5em 0 0em!important;
            width: 100%;
}

.CD_Artist{
	font-size:1em;
	margin:0.5em 0 0.5em!important;
	text-align:left;
     float: left;
            width: 100%;
    
	}

.CD_img{
	width:200px;
	margin:0 auto;
	} 	
	
.CD_list{
	font-size:0.9em;
	margin-bottom:1em;
	text-align:left;	
     float: left;
            width: 100%;    
}
.CD_recomend{
	margin-bottom:10px;
	border-bottom:1px;
    float: left;
            width: 100%;  
}

.p_pc{
	width:90%;/*ボサノヴァを吹いてみようのテキスト幅*/
	}

.wrap{
	width:100%;
	margin:0;
}


.Bossa_menu {
	width: 80%; 
	margin: 0 auto;
	}

.Bossa_menu ul li{
	float:none; 
	width: 280px;
	}	

.Book_sample{
	width:300px;
	margin:0 auto;
	/*border: 1px solid #CCC;*/
	}	

.Book_sample50{
	width:100%px;
	margin:0 auto;
	}
	
	
.ScoreIMG{
            width: 160px;
            float: left;
            margin: 0 10px;
            /* padding-right: 24px; */
        }
}

/*++++++++++++++++++++++++++++++++++++++++++ma
PC　表示
+++++++++++++++++++++++++++++++++++++++++++*/

@media only screen and (min-width: 1300px){
.smart {
display: none;
}

/*++++++++++++++++++++++++++++++++++++++++++*/

div .scroll {
    height: auto/*300px*/;
    width: 700px/*740px*/;
	margin:5px 10px 5px 40px;
    padding: 5px;
    overflow: scroll;
    border: 1px solid #CCC;
    -webkit-overflow-scrolling: touch;
}



}



/*++++++++++++++++++++++++++++++++++++++++++
スマホ横とiPad 　548←→1300px
+++++++++++++++++++++++++++++++++++++++++++*/

@media only screen and (max-device-width: 1299px){
.pc{
display: none;
}



div .scroll {
    height:auto;
    width: 95%;
	margin:2%;
    padding: 5px;
    overflow: scroll;
    border: 1px solid #CCC;
    -webkit-overflow-scrolling: touch;
}
}


/*++++++++++++++++++++++++++++++++++++++++++
スマホ　表示
+++++++++++++++++++++++++++++++++++++++++++*/

@media only screen and (max-width: 548px){
.pc{
display: none;
}



div .scroll {
    height:auto;
    width: 95%;
	margin:2%;
    padding: 5px;
    overflow: scroll;
    border: 1px solid #CCC;
    -webkit-overflow-scrolling: touch;
}
}

/*++++++++++++++++++++++++++++++++++++++++++
ゆらゆらする葉っぱ
+++++++++++++++++++++++++++++++++++++++++++*/

/*
@keyframes horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}

.body li {
  animation: horizontal 1s ease-in-out infinite alternate;
}

.body li a {
  animation: vertical 1s ease-in-out infinite alternate;
}

.body li:nth-child(1) { animation-duration: 1.1s}
.body  li:nth-child(2) { animation-duration: 1.3s}
.body li:nth-child(3) { animation-duration: 1.5s}

*/