@charset "utf-8";
/* CSS Document */


article{
	padding: 0px;
	background:#fff;
	box-sizing:border-box;
	line-height:1.7em;
	font-size:1.3em;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Helvetica Neue", Arial, sans-serif;
	font-weight:400;
	color: #000;
  font-feature-settings: "palt";
  width:100%;
	overflow:hidden;
	margin:auto;
}


ul,ol{list-style:none;}
article img{width:100%;vertical-align: bottom;}
article a{text-decoration:none;color:#000;}

.container{max-width:880px;width:96%;margin:auto;}
.first{padding:15px 0 25px;}
.first p{margin-top:15px;}

.listarea{background:#f5f4f9;padding:35px 0 60px;}
.listarea ul li{margin-bottom:2.4%;display:flex;flex-direction: column;}
.listarea ul li a{background:#fff;border-radius:15px;overflow:hidden;transition:all .3s ease-out;cursor:pointer;display:flex;flex-direction: column;flex-grow: 1;}
.listarea ul li a:hover{box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);opacity:1;}
.listarea ul li p{letter-spacing:.06em;}
.listarea ul li .thum{background:#e6e6e6;overflow:hidden;}
.listarea ul li .thum img{transition:transform 0.3s;}
.listarea ul li a:hover .thum img{transform:scale(1.1);}
.listarea ul li .text{padding:10px;}
.listarea ul li .title{font-size:1.6rem;font-weight:bold;margin-bottom:10px;}
.listarea ul li a:hover .title{color:#551a8b;}
.listarea ul li .advertiser{text-align: right;font-size:1.1rem;color:#666;margin-top: auto;padding:0 15px 10px;}



/*PC======================================================*/
@media only screen and (min-width:769px) {

.pc-only{display:block;}
.sp-only{display:none;}

.listarea ul{display:flex;flex-wrap:wrap;align-items: stretch;}
.listarea ul li{width:32%;margin-right:2%;}
.listarea ul li:nth-child(3n){margin-right:0;}
}




/*SP======================================================*/
@media only screen and (max-width:768px) {

.sp-only{display:block;}
.pc-only{display:none;}

.container{width:92%;}
.first{padding:5vw 0 6vw;}
.first p{margin-top:5vw;}
.listarea{padding:6vw 0;}
.listarea ul li{margin-bottom:6vw;}
.listarea ul li .text{padding:4vw;}
}


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

.listarea ul li .advertiser{font-size:1.2rem;}
 .tokyo .heading-area .l-wrapper.purple {padding: 2vw 0;}

}