@charset "utf-8";
/*============================== MWT_RANKING_GADGET*/
.ranking{
	width: 1000px;
	margin: 3em auto 10em;
	font-size: 10px;
}
.ranking h3{
	font-size: 2.2em;
	padding: 0.5em 0 0.5em 0.5em;
	margin: 0 0 1em;
	background-image: url(../img/f-section-border-def.svg);
	background-repeat: repeat-x;
	background-position: bottom;
}
.ranking h3 strong{
	margin-right: 0.5em;
}
.ranking h3 span{
	display: inline-block;
	font-size: 0.6em;
	font-weight: normal;
}
/*color*/
.ranking.rank_jtour h3 span{ color: #d81515;}
.ranking.rank_jyado h3 span{ color: #ff6f00;}
.ranking.rank_wtour h3 span{ color: #007aec;}

.ranking .title,
.ranking .selectarea{display: none;}

.ranking.rank_jyado .selectarea{
	display: block;
	margin-bottom: 1em;
	font-size: 1.5em;
}
div[id$="_RankBody"]{
	display: grid;
	display: -ms-grid;
	grid-template-columns: 31% 34.5% 34.5% ;
	grid-template-rows:auto auto;
	-ms-grid-columns:31% 34.5% 34.5% ;
	-ms-grid-rows:auto auto;
	width: 100%;
}
.ranking dl:after{display: none;}
div[id$="_RankBody"] a{
	display:block;
	width: 100%;
	color: #000;
}
div[id$="_RankBody"] dl{
	position: relative;
	border:1px solid #CCC;
	border-left: 0;
	/*padding:15px;*/
	display:flex;
	flex-wrap:wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content:space-between;
	z-index:1;
	background:#FFF;
	box-sizing: border-box;
	height: 100%;
}
div[id$="_RankBody"] a:nth-of-type(1) dl{
	border-left: 1px solid #CCC;
}
div[id$="_RankBody"] a:nth-of-type(4) dl,
div[id$="_RankBody"] a:nth-of-type(5) dl{
	border-top:0;
}
div[id$="_RankBody"] a:nth-of-type(1){
	grid-column:1 / 2;
	grid-row:1 /3;
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
}
div[id$="_RankBody"] a:nth-of-type(2){
	grid-column:2 / 3;
	grid-row:1 /2;
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
div[id$="_RankBody"] a:nth-of-type(3){
	grid-column:3 / 4;
	grid-row:1 /2;
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}
div[id$="_RankBody"] a:nth-of-type(4){
	grid-column:2 / 3;
	grid-row:2 /3;
	-ms-grid-column: 2;
	-ms-grid-row: 2;
}
div[id$="_RankBody"] a:nth-of-type(5){
	grid-column:3 / 4;
	grid-row:2 /3;
	-ms-grid-column: 3;
	-ms-grid-row: 2;
}

div[id$="_RankBody"] dl dt{
	flex-basis:40%;
	max-width: 40%;
	padding: 15px;
	overflow: hidden;
	z-index:1;
	box-sizing: border-box;
}
div[id$="_RankBody"] dl dt img {
	width:100%;
	height: auto;
	vertical-align:top;
}
div[id$="_RankBody"] dl dd{
	flex-basis:60%;
	max-width: 60%;
	padding: 15px 15px 15px 0;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.2em;
	box-sizing: border-box;
}

/* 1st */
div[id$="_RankBody"] a:nth-of-type(1) dt{
	flex-basis: 100%;
	max-width: 100%;
	text-align: center;
	max-height: 24em;
}
div[id$="_RankBody"] a:nth-of-type(1) dd{
	flex-basis: 100%;
	max-width: 100%;
	padding-left: 15px;
}
/* number */
div[id$="_RankBody"] dl dt:after{
	content: "";
	display: block;
	position: absolute;
	left:0;
	top: 0;
	width: 2.7em;
	height: 2.7em;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left top;
	z-index: 5;
}
div[id$="_RankBody"] a:nth-of-type(1) dt:after{
	background-image:url("../img/rank1.png");
	width: 4.5em;
	height: 6.2em;
}
div[id$="_RankBody"] a:nth-of-type(2) dt:after{
	background-image:url("../img/rank2.png");
}
div[id$="_RankBody"] a:nth-of-type(3) dt:after{
	background-image:url("../img/rank3.png");
}
div[id$="_RankBody"] a:nth-of-type(4) dt:after{
	background-image:url("../img/rank4.png");
}
div[id$="_RankBody"] a:nth-of-type(5) dt:after{
	background-image:url("../img/rank5.png");
}
.price{
	order: 2;
	flex-basis: 100%;
	text-align: right;
	color: #cc0706;
	font-weight: bold;
	font-size: 1.4em;
}
.link{
	order: 1;
	flex-basis: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 1.4;
	margin-bottom: 0.5em;
}
.rank_jyado .link{
	font-size: 1.4em;
}

.link a{
	color: #000;
}


/*--------------------------------------------
	1000px以下
---------------------------------------------*/
@media screen and (max-width: 1000px)  {
.ranking{
	width: 100%;
	margin: 2em auto 4em;
}

}

/*--------------------------------------------
	737px以下
---------------------------------------------*/
@media screen and (max-width: 737px)  {
.ranking{
	width: 96%;
}
.ranking h3 span{display: none;}

div[id$="_RankBody"] {
    display: block;
    width: 100%;
}
div[id$="_RankBody"] dl{
	border: 1px solid #CCC;
	border-top: 0;
}
div[id$="_RankBody"] dl:nth-of-type(1){
	border-top: 1px solid #CCC;
}
div[id$="_RankBody"] dl dt,
div[id$="_RankBody"] dl:nth-of-type(1) dt{
    flex-basis: 35%;
    max-width: 35%;
	padding: 10px;
}
div[id$="_RankBody"] dl dd,
div[id$="_RankBody"] dl:nth-of-type(1) dd{
    flex-basis: 65%;
    max-width: 65%;
	padding: 10px 15px 10px 0;
}
div[id$="_RankBody"] dl:nth-of-type(1) dd {
    padding-left: 0;
}
div[id$="_RankBody"] dl dt:after,
div[id$="_RankBody"] dl:nth-of-type(1) dt:after{
    width: 2.7em;
    height: 2.7em;
}


}