#main{
  font-family: 'Noto Sans Japanese',  "メイリオ","Meiryo","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Sans-Serif;
  text-align: center;
  letter-spacing: .5px;
  margin: 0 auto;
  background:#f2f2f2;
}
.bl-wrap{
	display:flex;
	overflow:visible;
}
h1{
  margin: 50px auto 50px;
}
#bl-left{
  display: inline-block;
  width: 80vw;
  text-align: center;
  vertical-align: top;
}

#bl-left article{
  width:45%;
  display:inline-block;
  vertical-align: top;
  margin: 0 0 2vw 1.5vw;
  padding: 1vw 1.5vw 1.5vw;
  background: #fff;
  text-align: left;
}
#bl-left .date{
  display: inline-block;
  color:#aaa;
  font-weight: bold;
	margin-right: 5px;
}

.cat{
	display: inline-block;
	color: #000;
	vertical-align: middle;
	font-size:1.2rem;
	text-decoration: none;
	padding: 0 5px;
	margin-bottom: 5px;
}
.cat-item:before{
    content: "";
    display: inline-block;
    float:left;
    width: 25px;
    height: 25px;
    float: left;
    margin: 6px 6px 0 0;
}
.cat-info,.cat-item-7:before{background: #999;}
.cat-newitem, .cat-item-2:before{background: #fa0;}
.cat-class,.cat-item-5:before{background: #F77;}
.cat-shop, .cat-item-1:before{background: #5e99c9;}
.cat-paris,.cat-item-6:before{background: burlywood;}
.cat-media,.cat-item-8:before{background: palevioletred;}
.cat-sweets,.cat-item-3:before{background: darkseagreen;}
.cat-event,.cat-item-4:before{background: darksalmon;}

#bl-left .eyecatch{
  background-image:url(../img/news/noimage.png);
  background-repeat: no-repeat;
  background-position: center center;
  /* border: 3px solid #eee; */
  display: block;
  float:left;
  overflow: hidden;
  margin: .3vw 1vw 0 0;
}
#bl-left .eyecatch:hover{
  border-color: #333;
}
#bl-left .eyecatch img{
  background-position: center center;
  background-size: cover;
}
#bl-left .eyecatch,
#bl-left .eyecatch img{
  width: 14vw;
  height: 10vw;
}
#bl-left h4{
	font-size: 1.5rem;
	font-weight: 500;
	margin:5px 0;
}
#bl-left h4 a{
	color: #555;
	text-decoration: none;
	letter-spacing: 0;
}
#bl-left h4 a:hover{
	text-decoration: underline;
}
#bl-left p{
  font-size: 1.35rem;
  letter-spacing: 0;
}
.paging{
  text-align: center;
  margin: 50px;
}
.paging a,
.paging .current{
  color: #fff;
  text-decoration: none;
  background: #777;
  display: inline-block;
  margin: 5px;
  padding: 10px 18px;
}
.paging .current,
.paging a:hover{
  color: #fff;
  background: #000;
}

/* article */
#bl-left article.bl-article{
  width: 90%;
	margin-left:5%; 
  line-height: 180%;
}
#bl-left .exp a{
  text-decoration: underline;
}
#bl-left .bl-article img{
  max-width: 280px;
  height: auto;
  border: 5px solid #eee;
  margin: 0 5px 5px 0;
}
#bl-left .bl-article .bl-txt{
  display: inline-block;
  vertical-align: top;
}
#bl-left .bl-article h4{
	font-size: 1.9rem;
	margin: 20px 0;
}
#bl-left .bl-article .exp {
    font-size: 1.6rem;
}
#bl-left .bl-article .exp p{
    margin:15px 0;
}

/* right */

#bl-right{
  width: 20vw;
  background: #f2f2f2;
  display: inline-block;
  text-align: left;
  vertical-align: top;
  padding: 270px 20px 20px 0;
  margin-top: -270px;
}
  
#bl-right h2 img{
  margin:50px 0 10px;
  width: 15vw;
  max-width: 205px;
}
#bl-right .side_box:nth-child(1) h2 img{
  margin-top: 0;
}

#bl-right .side_box:nth-child(1) li {
  border-bottom: 2px dotted #aaa;
	font-family:"futura-pt", "ryo-text-plusn", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E", 'Noto Sans Japanese', sans-serif, serif;/*"tbnpmincho-std",*/ 
}
#bl-right .side_box:nth-child(1) li a {
  font-size: 1.5rem;
  display:block;
  padding:7px 0;
  overflow: hidden;
}

#bl-right .side_box:nth-child(2) li,
#bl-right .side_box:nth-child(3) li{
  border-bottom: 2px dotted #aaa;
}
#bl-right .side_box:nth-child(2) li a,
#bl-right .side_box:nth-child(3) li a{
  font-size: 1.45rem;
  text-decoration: none;
  line-height: 164%;
  letter-spacing: 0;
  height: 50px;
  margin: 5px;
  display: block;
  overflow: hidden;
}
#bl-right .side_box:nth-child(2) li a img,
#bl-right .side_box:nth-child(3) li a img{
  width: 50px;
  margin-right: 10px;
  float: left;
  display: inline-block;
}
#bl-right .side_box:nth-child(2) li a:hover,
#bl-right .side_box:nth-child(3) li a:hover{
  text-decoration: underline;
}

#bl-right .side_box:nth-child(3){display:none;}

/* ------------------------- windows size pattern ------------------------- */
@media screen and (max-width: 999px){
  #main{
    letter-spacing: .5px;
  }
	.bl-wrap{
		display:block;
	}
	
  #bl-left{
    width: 100vw;
  }

  #bl-left article{
    padding: 4vw 2vw;
    width: 46vw;  
  }
  /*#bl-left .exp{
    display: none;
  }
  #bl-left .bl-article .exp{
    display: block;
  }*/

  #bl-left article p{
    display: none;
  }
  #bl-left .bl-article p{
    display: block;
  }

	#bl-left .eyecatch,
	#bl-left .eyecatch img{
		width: 40vw;
		height: 30vw;
	}
	
  #bl-left article.bl-article{
    width: 100%;
    margin: 0 auto;
  }
  #bl-left .bl-article .bl-img{
    display: block;
    width: 100%;
    margin:10px 0;
  }
  #bl-left .bl-article .bl-img img{
    max-width: 40vw;
    height: auto;
  }
  #bl-left .bl-article .bl-txt{
    display: block;
  }
  #bl-left .exp{
    font-size: 1.5rem;
  }


  
  #bl-right{
    width: 100%;
    padding: 3vw 0 3vw 3vw;
    margin-top: 0;
  }
  #bl-right .side_box{
    width: 100%;
  } 
  #bl-right h2{
    text-align: center;
  }
  #bl-right h2 img{
    width: 205px;
  }
  #bl-right .side_box li{
    float:left;
    width: 47%;
    margin-right: 2%;
	}
  #bl-right .side_box:nth-child(1) li a {
		padding:15px 0;
		font-size: 1.7rem;
  }
  #bl-right .side_box:nth-child(2) li a{
    font-size: 1.5rem;
    height: 45px;
  }
/*  .bl-cat li {
    float:none;
    width: 100%;
  }
  .bl-cat li a {
    height: auto;
  }*/

  
}