@charset "UTF-8";
/* sp(320px) */

/* 私たちが推薦します！ */
#suisen .hl_top span.s {
	display: block;
	font-size: 75%;
}

#suisen ul {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 1.2em;
}
#suisen li {
	border: 3px solid #f4f4f4;
	border-radius: .8em;
	padding: 1.2em 1.2em;
}
#suisen li .name {
	font-size: 14px;
	font-weight: normal;
	line-height: 1.3;
	padding-block-end: .7em;
	border-block-end: 3px solid #c9e8ff;
}
#suisen li .name .b {
	font-size: 17px;
	font-weight: bold;
}

#suisen li .grid {
	display: grid;
	grid-template-columns: 85px auto;
	grid-template-rows: auto auto;
	column-gap: 1.2em;
	row-gap: 1em;

	grid-template-areas:
	"areaB areaA"
	"areaC areaC";

	align-items: center;
	margin-block-start: 1.2em;
}
#suisen li .grid .msg {
	grid-area: areaA;
}
#suisen li .grid figure {
	grid-area: areaB;
}
#suisen li .grid p {
	grid-area: areaC;
	margin-block-end: 0;
}

#suisen li .grid .msg {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	color: #4eaaf1;
}


@media handheld, print, screen and (min-width: 375px) {
/* iphone6 */


/* end of media query(iphone6) */	
}



@media handheld, print, screen and (min-width: 414px) {
/*  iPhone6 Plus */

/* end of media query(iPhone6 Plus) */	
}



@media handheld, print, screen and (min-width: 480px) {
/* tablet */

/* 私たちが推薦します！ */
#suisen li .grid {
	grid-template-columns: 120px auto;
}
#suisen li .grid .msg {
	font-size: 18px;
}

	@media (-webkit-min-device-pixel-ratio: 2){
		

	/* end of media query(retina) */	
	}

/* end of media query(tablet) */	
}



@media handheld, print, screen and (min-width: 620px) {
/* iPad */

/* 私たちが推薦します！ */
#suisen ul {
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	column-gap: 3%;
	row-gap: 0;
}
#suisen li {
	border: 3px solid #f4f4f4;
	padding: 1.7em 1.7em;
}
#suisen li .name {
	font-size: 15px;
	padding-block-end: .7em;
	border-block-end: 3px solid #c9e8ff;
}
#suisen li .name .b {
	font-size: 18px;
}

#suisen li .grid {
	grid-template-columns: 150px auto;
	grid-template-rows: auto auto;
	column-gap: 1.2em;
	row-gap: 1em;

	grid-template-areas:
	"areaA areaA"
	"areaB areaC";

	align-items: start;
	margin-block-start: 1.2em;
}
#suisen li .grid .msg {
	font-size: 18px;
}

/* end of media query(iPad) */	
}



@media handheld, print, screen and (min-width: 900px) {
/* pc */

/* 私たちが推薦します！ */
#suisen ul {
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	column-gap: 3%;
	row-gap: 0;
}
#suisen li {
	border: 3px solid #f4f4f4;
	padding: 2em 2em;
}
#suisen li .name {
	font-size: 16px;
	padding-block-end: .7em;
	border-block-end: 3px solid #c9e8ff;
}
#suisen li .name .b {
	font-size: 20px;
}

#suisen li .grid {
	grid-template-columns: 170px auto;
	grid-template-rows: auto auto;
	column-gap: 1.2em;
	row-gap: 1em;

	grid-template-areas:
	"areaA areaA"
	"areaB areaC";

	margin-block-start: 1.2em;
}
#suisen li .grid .msg {
	font-size: 20px;
}


/* end of media query(pc) */
}