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



* {
	padding: 0;
	margin: 0;
}

.wrapper {
	width: 760px;
	max-width:100%;
	margin: 0 auto;
}

.content_top {
	background-color:#1a2a44;
	text-align: center;
}

.read {
	color:#FFF;
	font-size:18px;
	padding: 20px 10px 20px;
}

.heading {
	color:#FFF;
	font-size:24px;
	padding: 1rem 2rem;
	max-width: 650px;
	border-top: solid 2px #FFF;/*上線*/
	border-bottom: solid 2px #FFF;/*下線*/
	margin : 0 auto;
}

.accesses {
	background-color:#1a2a44;
	width: 100%;
	margin: auto;
}
.box-img {
	width: 100%;
}
	
.box{
	display:flex;
	padding: 2rem 1rem 0 1rem;
	color:#FFF;
}

	.box-text {
	display:block;
	width:100%;
	text-align: center;
	line-height:2;
	padding: 30px 10px 10px 10px;	
}

.shop {
	color:#fff;
	font-size:20px;			
}


.box2 {
	margin:50px 0px 0 0; 
	display:flex;
}

/* ▼キャプション付き画像全体を囲むボックスの装飾 */
.ranking-box2 {
	
	vertical-align:top;
	width:220px;
	margin: 0 0 0 25px; /* 外側に余白を追加(※右に3px・下に7px) */
}

.ranking-box2-text {
	color:#FFF;
	font-size:16px;
	padding: 5px 0px 3px 0px;
	text-align: center;

}
/* ▼画像に対する装飾 */
.ranking-box2-img {
	display: block;         /* 余計な余白が出ないようにする */
}
.ranking-box2-img img{
	width :220px;
	height:auto;
	
   
}

.btn-flat-border {
	display: inline-block;
	padding: 5px 30px 5px 30px;
	text-decoration: none;
	color: #fff;
	border: solid 2px #fff;
	border-radius: 10px;
	transition: .4s;
	font-size:16px;
	margin:10px 0;
	
}
.btn-flat-border:hover {
	background: #fff;
	color: #1a2a44;
}
.box3 {
	margin:50px 0px 0 0; 

	display :flex;

}
.ranking-box3 {
   
	vertical-align:top;
	margin: 0 17px 0 19px; /* 外側に余白を追加(※右に3px・下に7px) */
}

.ranking-box3-text {
	color:#FFF;
	font-size:14px;
	padding: 5px 0px 3px 0px;
	text-align: center;
	word-wrap: break-word;
}

.kuchikomiranking {
	background-color:#1a2a44;
	text-align: center;

}

.content-botom{
	background-color:#1a2a44;
	text-align: left; 
	padding-top: 20px;
	}

@media screen and (min-width: 480px) {	
	.ranking-box3-img img {
		width:150px;
		height:auto;
	}
	.kuchikomiranking {
		padding-top: 100px; 
		}
}
		
@media screen and (max-width: 480px) {
	.read {
		font-size:15px;
		text-align: left;
	}
	
	.headding {
		max-width:480px;
		margin:0 auto;
		border-top: solid 2px #FFF;/*上線*/
		border-bottom: solid 2px #FFF;/*下線*/
	}
	.box{ 
	    display:block;

	}
	
	.shop {
		font-size:18px;
		text-align: left;
		line-height: 150%;
		
		}

	.box-text {
		display:block;
		width:100%;
		text-align: center;
		line-height:2;
		padding: 10px 0px 0px 5px;	
		}
	.box-text img{
		width:30px;
		height:30px;
	}
	.box-text_1{
		display:flex;
		text-align: center;

	}
	
	.sp{ display: block; }
    .pc{ display: none; }
	
	.box2 {
		display:block;
		width:auto;
		margin:10px 10px 0 10px; 
	}
	
	.ranking-box2 {
		display:flex;
		width:auto;
		margin: 20px 0 0 0;

	}
	.ranking-box2-img {

		width:50%;

	}
	
	.ranking-box2-text {
		float:right;
		width:48%;
		text-align:center;
		font-size:100%;
		display: block;
		padding:0;
		
	}
	.box3 {
		display:block;
		width:auto;
		margin: 20px 10px 0 10px;
	}
	.ranking-box3 {
		display:flex;
		margin: 20px 0 0 0;

	}
	.ranking-box3-img {

		width: 50%;
		height:auto;

	}
	
	.ranking-box3-text {
		float:right;
		width:48%;
		text-align:center;
		font-size:100%;
		padding:0;
	}
	.kuchikomiranking {
		padding-top: 40px; 
		}
	
}