@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Squada+One&display=swap');
/* .mainContents */
ul {
    list-style: none;
}
.mainContents article {
    margin: 10px 10px 40px;
    padding: 0 0 10px;
    box-shadow: 0px 0px 6px #ccc;
    position: relative;
    border-radius: 5px;
        border: 2px solid #896627;
    border-radius: 5px;
    background: #FFFDF9;
    padding: 40px;
    
}
.mainContents article.hide {
    /*height: 54em;*/
    overflow: hidden;

}
/* アコーディオンが開いている時用のスタイル */
.mainContents article.open {
    border: 2px solid #896627;
    border-radius: 5px;
    background: #FFFDF9;
    padding: 40px; /* PC表示時の余白 */
    overflow: visible; /* グラデーション等を消すためにvisibleに */
}
.mainContents article.hide:before{
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 50px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 74%, rgba(255, 255, 255, 0.9) 70%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 74%, rgba(255, 255, 255, 0.9) 70%, #fff 100%);
}
.mainContents article .rankHead {
    display: flex;
    /* flex-wrap: wrap; */
    border-bottom: 1px solid #896627;
    margin-bottom: 20px;
    padding-bottom: 5px;
}
.mainContents article .rankHead .rank {
    display: inline-block;
    justify-content: center;
    color: #fff;
    border-radius: 3px;
    margin-right: 2%;
}
span.rank.no1{
background: #DB9F1D;
}
span.rank.no2{
background: #808080;
}
span.rank.no3{
background: #8C6143;
}
span.rank{
background: #896627;
}
span.emblem {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
span.emblem span {
    margin-right: 0%;
    font-size: 20px;
}
span.emblem img {
    width: 20%;
}
	.mainContents#shopDetailArea article .shopMenu div{
		width:100%;
	}
.mainContents article .rankHead .rank strong {
    font-size: 37px;
    /*font-family: "Noto Sans JP";*/
}
/*.mainContents article .rankHead .rank.no1{
	background:url(../img/bg_ranking1.png?) no-repeat;
	background-size:cover;
}*/
/*.mainContents article .rankHead .rank.no2{
	background:url(../img/bg_ranking2.png?) no-repeat;
	background-size:cover;
}*/
/*.mainContents article .rankHead .rank.no3{
	background:url(../img/bg_ranking3.png?) no-repeat;
	background-size:cover;
}*/
.mainContents article .soup{
	margin:5px auto;
	font-weight:bold;
	text-align:center;
	color:#D3221D;
}
/*.mainContents article .mainPhoto .nomihoshi{
	text-align:center;
	width:96px;
	height:80px;
	background:url(../img/bg_nomihoshi.png) no-repeat;
	background-size:cover;
	position:absolute;
	top:0;
	right:0;
	z-index:10;
}*/

.mainContents article .detail {
    width: 100%;
}
.mainContents article .detail li{
	line-height:1.2;
}
.mainContents article .detail li.catchcopy{
	font-size:18px;
	font-weight:bold;
	text-indent:-0.5em;
}

.mainContents article .detail li.shopName {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.mainContents article .detail li.shopName a {
    text-decoration: underline;
}
.mainContents article .detail li.shopName a {
    color: #000;
   /* font-family: "Noto Sans JP";*/
   font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    display: inline-block;
    width: 100%;
}
.mainContents article .detail li.itemName{
	font-size: 16px;
	margin: 5px 0 0;
	font-weight: bold;
}
li.itemName span{
 margin-right: 1%;
 }
.mainContents article .detail li.shopArea {
    font-size: 14px;
    margin: 5px 0 10px;
    background: #FFF7E9;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 50px;
}
li.shopArea i {
    margin-right: 3px;
}
.satisfied.position.pork {
    width: 20%;
    background: url(../img/satisfied_pork.png);
    background-size: 86%;
    /* background: repeat; */
    background-repeat: no-repeat;
}
.satisfied.position.pork.satisfied p {
    top: 22px;
}
span.area_contents {
    margin-left: 5px;
}
.satisfied {
    width: 20%;
    background: url(../img/satisfied.png);
    background-size: 86%;
    background-repeat: no-repeat;
    background-position: center;
    height: 120px;
    max-width: 150px;
}

.satisfied p,.satisfied span {
    font-family: 'Impact', cursive;
   
}
.satisfied p {
    font-size: 3.5em;
    position: relative;
    top: 32px;
    left: 31px;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #690707;
    color: #FFE374;
    display: inline-block;
}
.satisfied span {
    font-size: 0.6em;
}
/*.mainContents article .detail li.shopName a:before{
	content:"\025b6";
	display:inline;
}*/

.mainContents article .mainPhoto{
	margin:0;
	position:relative;
}
/*.mainContents article .mainPhoto .nomihoshi.p90{
	background:url(../img/bg_nomihoshi90.png) no-repeat;
	background-size:cover;
}*/
.mainContents article .mainPhoto .nomihoshi.p100{
	background:url(../img/bg_nomihoshi100.png) no-repeat;
	background-size:cover;
}
/*.mainContents article .mainPhoto .nomihoshi span:first-of-type{
	display:block;
	font-size:10px;
	font-weight:bold;
	padding:8px 0 0;
}
.mainContents article .mainPhoto .nomihoshi span:last-of-type{
	display:block;
	font-size:18px;
	font-family: 'Squada One', cursive;
	margin:-5px 0 0;
}
.mainContents article .mainPhoto .nomihoshi span:last-of-type strong{
	font-size:36px;
	*/letter-spacing:-1px;
}
.mainContents article .mainPhoto .slider{
}
.mainContents article .mainPhoto .thumbnail-list{
	display:flex;
	margin: 5px auto 0;
    width: calc(100% - 0px);
}
.mainContents article .mainPhoto .thumbnail-item{
	position:relative;
}
.mainContents article .mainPhoto .thumbnail-item img{
	max-width: 97%;
	margin: auto;
}
.mainContents article .mainPhoto .thumbnail-item:after{
	content:'';
	background-color: rgba(0,0,0,0.3);
	position:absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: .3s opacity linear;
}
.mainContents article .mainPhoto .thumbnail-item.thumbnail-current:after{
	opacity: 0;
}

.mainContents article h2 {
    font-size: 16px;
    line-height: 1.5;
}
.pcWrapper h2 {
    display: none;
}
.mainContents article .tag{
	display:none;
	margin:10px;
}
.mainContents article .tag li{
	display:inline-block;
	font-size:12px;
	margin:0 10px 0 0;
	padding:3px 15px;
	border:1px solid #000;
	border-radius:20px;
}
.mainContents article .data {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0px 0px 0px;
    border: 1px solid #892727;
}
.mainContents article .data dt {
    display: flex;
    align-items: center;
    justify-content: left;
    /* margin: 1px 0 0 0; */
    width: 47px;
    min-height: 34px;
    background: #892727;
    color: #fff;
    border-bottom: 1px solid #fffcf5;
    padding-left: 2%;
}
.mainContents article .data dt.twoline{
	height: auto;
}
.mainContents article .data dd {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 1px 0 0 0;
    padding: 5px 0 5px 5px;
    width: calc(100% - 47px);
    background: #FFFCF5;
    border-bottom: 1px solid #892727;
}
.mainContents article .data dd.arrow{
	margin:5px 0;
	padding:0;
	width: 0;
	height: 0;
	border-top: 17px solid transparent;
	border-bottom: 17px solid transparent;
	border-left: 10px solid #E5D4C3;
}
.mainContents article .data dt, .mainContents article .data dd {
    font-size: 14px;
    line-height: 1.2;
}
.mainContents article .data dd span {
    text-align: center;
    width: 30px;
    height: 30px;
}
.mainContents article .data dd i.far:before{
	background:#D42F2B;
	border-radius:15px;
}

.mainContents article .shopData {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0px;
    border-top: 1px solid #e4c284;
    border-right: 1px solid #e4c284;
}
dl.shopData.shop {
    margin: 40px 40px 20px;
}
.mainContents article .shopData dt {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1.2;
    width: 75px;
    min-height: 34px;
    background: #e4c284;
    border-bottom: 1px solid #fffdf9;
}
.mainContents article .shopData dd.item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    line-height: 1.2;
    margin: 1px 0 0 0;
    padding: 5px;
    width: calc(100% - 75px);
    min-height: 34px;
    background: #fffdf9;
    border-bottom: 1px solid #e4c284;
}
.mainContents article .shopData dd.arrow{
	margin:5px 0;
	padding:0;
	width: 0;
	height: 0;
	background:#eee;
	border-top: 17px solid transparent;
	border-bottom: 17px solid transparent;
	border-left: 10px solid #ddd;
}
.mainContents article .shopData dd.far:before{
	background:#D42F2B;
	border-radius:15px;
}

/*.mainContents article .shopData dd.arrow:first-of-type,
.mainContents article .shopData dd.item:nth-of-type(2){
	margin:1px 0 0 0;
}*/
.mainContents article .shopData dd.graph{
	margin:1px 0 0 0;
	background:#eee;
}
.mainContents article .explanation {
    font-size: 14px;
    margin: 30px 0px;
    padding: 0;
    border: 1px solid #e4c284;
}
.mainContents article .explanation p {
    padding: 10px;
    line-height: 170%;
    background: #FFFDF9;
}
.mainContents article .explanation p:first-of-type {
    background: #E4C284;
}
.mainContents article .shopAddress{
	/*margin:10px 10px 40px;*/
}
.mainContents article .shopAddress li {
    font-size: 14px;
    text-align: center;
}
.mainContents article .shopAddress li.map{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:5px 0 0;
}
.mainContents article .shopAddress li.map a{
	text-align:center;
	text-decoration:none;
	margin:0 5px;
	padding:10px 0;
	width:calc(50% - 10px);
	border-radius:5px;
}
.mainContents#shopListArea article .shopAddress li.map a{
	font-size:15px;
	width:calc(100% - 0px);
}
.mainContents article .shopAddress li.map a:first-of-type{
	color:#fff;
	background:#000;
}
.mainContents article .shopAddress li.map a:last-of-type {
    color: #ffffff;
    background: #896627;
    position: relative;
}
a#shop_detail_link {
    background: #892727;
}
.mainContents article .shopAddress li.map a:last-of-type:after {
    content: "\f0da";
    font-size: 25px;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: calc(50% - 19px);
    right: 10px;
}
.mainContents article .shopAddress li.map a i{
	padding:0 5px 0 0;
}

.mainContents article .acordionBtn{
	width:170px;
	position:absolute;
	bottom:10px;
	right: 0;
    left: 0;
	z-index:5;
	margin: auto;
}
.mainContents article .acordionBtn a {
    display: block;
    color: #fff;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    margin: 0 0 0 auto;
    padding: 5px 0 5px 0;
    background: #646464;
    border-radius: 100px;
    position: relative;
}
.mainContents article .balloon {
    position: relative;
    margin: 0px 0px 15px 0px;
    background: #896627;
    padding: 10px;
    /* font-weight: bold; */
    color: #fff;
    text-align: center;
    border-radius: 100px;
}
.mainContents article .balloon::before{
	content: '';
	position: absolute;
	bottom: -8px;
	left:50%;
	display: block;
	width: 0;
	height: 0;
	border-right: 10px solid transparent;
	border-top: 10px solid #896627;
	border-left: 10px solid transparent;
}
.mainContents article .acordionBtn a i {
    position: absolute;
    top: 10px;
    right: 20px;
}

.mainContents .shopMenu {
    margin: 0 40px;
    width: 100%;
}
.mainContents .shopMenu h3{
	margin:10px 0 0px;
}
.mainContents .shopMenu dl {
   /* display: flex;
    flex-wrap: wrap;
    align-items: center;*/
}
.mainContents .shopMenu dt {
    font-size: 14px;
    margin: 5px 0 0;
    padding: 0 10px 0 15px;
    /* width: 70%; */
    background: #fffdf9;
    z-index: 1;
}
.mainContents .shopMenu dd {
    font-size: 14px;
    text-align: right;
    line-height: 1.5;
    margin: 5px 0 0;
    padding: 3px 10px;
    /* width: 23%; */
    background: #fffdf9;
    z-index: 1;
}
.mainContents .shopMenu .teishoku dt{
	width:55%;
}
.mainContents .shopMenu .teishoku dd{
	width:45%;
}
.mainContents .shopMap{
	padding-bottom: 56.25%;
	width:100%;
	height: 0;
	position: relative;
	overflow: hidden;
}
.mainContents .shopMap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* .mainContents#shopListArea */
article.adBox {
    padding: 30px;
}
.mainContents#shopListArea article .adTitle{
	color:#D3221D;
	font-size:12px;
	font-weight:bold;
	padding:7px 10px 7px;
	background:#EFEB43;
}
.mainContents#shopListArea article .detail {
    margin: 0;
    width: 100%;
}
.mainContents#shopListArea article .shopName {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.5;
    padding: 0;
    /* border-bottom: 2px solid #896627; */
    margin-bottom: 10px;
}
.mainPhoto ul {
    padding: 0;
}

span.shopName_sub {
    font-size: 20px;
    display: block;
}
.mainContents#shopListArea article .detail li.shopName a:before{
	display:none;
}
.mainContents#shopListArea article .shopAddress {
    margin: 0;
    width: calc(100% - 0px);
    text-align: center;
}
ul.shopAddress li.area {
    display: inline-block;
    margin-bottom: 10px;
}
ul.shopAddress li.area span.area_contents {
    display: block;
    text-align: left;
}
span.area_contents.train {
    border-bottom: 1px solid #ccc;
}
.mainContents#shopListArea article .explanation {
	margin: 0;
    padding: 15px 0px 0 0px;
    background: none;
    border: none;
}
dl#shop_list {
    margin: 15px 0;
}
/* .mainContents#shopDetailArea */
.mainContents#shopDetailArea article .mainPhoto .slick-slide:not(.slick-center){
	-webkit-filter: opacity(70%);
	-moz-filter: opacity(70%);
	-o-filter: opacity(70%);
	-ms-filter: opacity(70%);
	filter: opacity(70%);
	transition: 0.2s linear;
}
.mainContents#shopDetailArea article .shopMenu h2{
	line-height:1;
	padding:10px 15px;
	background:#e4c284;
}
.mainContents#shopDetailArea article .shopMenu h3 {
    line-height: 2;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
}
span.notes {
    font-size: 13px;
    /* margin-bottom: 5px; */
    display: block;
}
.mainContents#shopDetailArea article .shopAddress {
    margin: 0px 10px 10px;
}
.mainContents#shopDetailArea article .mapBtn {
    margin: 15px 40px 0 auto;
    width: 180px;
}
.mainContents#shopDetailArea article .mapBtn a {
    display: block;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding: 5px;
    background: #896627;
    border-radius: 50px;
}
p.mapBtn i {
    margin-left: 4%;
}

.mainContents article .pcWrapper {
    margin: 0;
    padding-left: 10px;
}
article.adBox {
    display: flex;
    flex-wrap: wrap;
}

/* ========== スマホ専用（幅600px以下） ========== */
@media screen and (max-width: 600px) {
/*ランキング順位*/

.mainContents article.hide ,.mainContents article{
    padding: 10px;
}
.mainContents article.open {
        padding: 10px; /* スマホ表示時の余白 */
    }

.mainContents article .rankHead {
    position: relative;
}
span.emblem {
    bottom: 1px;
}
span.emblem span {
    font-size: 13px;
}
.mainContents article .rankHead .rank strong {
    font-size: 20px;
    padding-top: 3px;
    display: inline-block;
}
.mainContents article .rankHead .rank {
    width: 28%;
}
.mainContents article .detail li.shopName {
    font-size: 18px;
    align-items: center;
}
span.emblem img {
    width: 18%;
}
.mainContents article .detail li.shopArea {
    font-size: 14px;
    border-radius: 5px;
}
span.area_contents {
    margin: 2px 0 0 0;
    display: block;
}
.mainContents article .detail li.itemName {
    font-size: 14px;
}

.satisfied {
    width: 5.2em;
    height: 90px;
    position: absolute;
    right: -8px;
}
.satisfied.position {
    top: 18px;
}
.satisfied.position.icon_pos {
    top: 43px;
}

.satisfied p {
    font-size: 8.533333333333333vw;
    top: 29px;
    left: 26%;
    -webkit-text-stroke-width: 1px;
}
li.itemName span {
    font-size: 12px;
    padding: 0 0 3px 0;
    /*display: block;*/
    font-weight: 100;
}

.mainContents article .pcWrapper.shop {
    margin-top: 10px;
    padding-left: 0;
    display: contents;
}
.mainContents#shopListArea article .detail {
    order: 1;
}
.mainContents#shopListArea article .explanation {
    order: 2;
    padding: 0;
}
.mainContents article .mainPhoto.shop {
    order: 3;
}
dl#shop_list {
    order: 4;
    margin-top: 0;
}
ul.shopAddress{
order: 5;
}
.mainContents article .pcWrapper {
    margin-top: 10px;
    padding-left: 0;
}
.mainContents article .balloon {
    padding: 10px 5px;
    font-size: 14px;
}
.mainContents article .data dt {
    width: 92px;
    font-size: 12px;
}
.mainContents article .data dd {
    width: calc(100% - 92px);}
    
.mainContents article .shopAddress {
    margin-bottom: 40px;
}
.mainContents article .explanation p {
    padding: 5px;
}
p#text {
    padding: 10px;
}

.mainContents .shopMenu h3 {
    margin: 5px 0 0px;
}
.mainContents#shopDetailArea article .shopMenu h3 {
    /*padding-left: 10px;*/
}
.mainContents .shopMenu {
    margin: 0 0px;
}
dl.shopData.shop {
    margin: 10px 10px 10px;
}
.mainContents .shopMap {
    width: 94%;
    margin: auto;
}
.mainContents#shopDetailArea article .mapBtn {
    margin: 10px 10px 0 auto;
    font-size: 14px;
}
.mainContents article .shopAddress li {
    font-size: 14px;
}
article.adBox {
    padding: 10px;
}
.mainContents#shopListArea article .shopName {
    font-size: 1em;
}
span.shopName_sub {
    font-size: 0.8em;
    font-weight: 400;
}
.satisfied.position.pork {
    width: 30%;
}
.mainContents article .shopAddress li.map a:last-of-type:after {
    font-size: 20px;
    top: calc(63% - 19px);
}
.mainContents .shopMenu {
    width: auto;
}
}
/* === タブレット専用（幅768px～1023px） === */
@media only screen and (min-device-width: 768px) and (max-device-width: 1023px) {

.mainContents article .rankHead {
    width: 100%;
}
.mainContents article .detail li.shopName {
    font-size: 26px;
}

	.mainContents article .mainPhoto{
		width:100%;
	}
	.mainContents article .pcWrapper{
		margin-top:20px;
		width:100%;
	}
	.mainContents article .pcWrapper.shop{
	margin-top:0px;
	padding:0px;
	}
	.mainContents article .pcWrapper h2{
		margin:0 10px;
	}
	.mainContents article .balloon {
    font-size: 14px;
}
.mainContents article .data dt {
    width: 140px;
}
.mainContents article .data dd {
    width: calc(100% - 140px);
}
.satisfied {
    width: 20%;
}
.satisfied p {
    font-size: 3em;

}
.mainContents article.hide {
    padding: 20px;
}
.mainContents article .shopData dd.item {
    width: calc(100% - 75px);
}
.mainContents article .shopAddress {
    width: 100%;
}
.mainContents article .shopAddress {
    margin: 0px 10px 40px;
}
.mainContents article .shopAddress li {
    margin: 10px 0;
}
.mainContents article .explanation {
    margin: 10px 0px;
}

.shop_title {
    margin: 20px 20px;
}
.mainContents .shopMenu {
    width: auto;
}
.alacarte, .drink {
    width: 100%;
}
	
}
/* ========== PC専用（幅1025px以上） ========== */
@media screen and (min-width: 1024px) {
	#wrapper{
		display:flex;
		flex-wrap:wrap;
		margin:0 auto;
		/*width:1000px;*/
		width:880px;
	}

	/* .mainContents */
	.mainContents{
		width:100%;
	}
	.mainContents article{
		display:flex;
		flex-wrap:wrap;
		margin:0 0 40px;
	}
	.mainContents article.hide{
		/*height:560px;*/
		height:auto;
	}
	.mainContents article.hide:before{
		display:none;
	}
	.mainContents article .rankHead{
		width:100%;
	}
	
	.mainContents article .mainPhoto{
		width:50%;
	}
	.mainContents article .pcWrapper{
		margin:0;
		width:50%;
		padding-left: 20px;
	}
	.mainContents article .explanation{
		width:100%;
	}
	.mainContents article .shopData{
		width:100%;
	}
	.mainContents article .shopData dd.arrow{
		margin:5px 0;
	}
	.mainContents article .shopData dd.item{
		width:calc(50% - 75px);
	}

	.mainContents article .shopData dt:nth-of-type(2n){
	}

	/*.mainContents article .shopData dd:first-of-type{
		width: calc(100% - 75px);
	}*/
	/*.mainContents article .shopData dd.item:nth-of-type(2){
		margin:1px 0 0 0;
		width:calc(100% - 85px);
	}*/
	.mainContents article .shopData dd.graph{
		display:flex;
		align-items:center;
		justify-content:center;
		margin:0;
		background:#F7F6F6;
		width:100%;
	}
	.mainContents article .shopData dd.graph img{
		max-width: 60%;
	}

	.mainContents article .detail li.shopName{
		font-size:29px;
	}

	.mainContents article .detail li.shopArea{
		margin: 7px 0 10px;
	}
	li.itemName span {
    font-size: 16px;
    font-weight: 100;
}
	.mainContents article .detail li.itemName{
		margin: 7px 0 0;
		font-size:22px;
	}
	.mainContents#shopListArea .shopData dt{
	}
	.mainContents#shopListArea .shopData dd.item{
		width:calc(100% - 75px);
	}

	.mainContents article .shopAddress{
		width:100%;
	}


.mainContents .shopMap {
    width: 90%;
    margin: auto;
}

	/* .mainContents.shopListArea */

	.mainContents#shopListArea article .explanation{
		width:100%;
	}
	
	/* .mainContents#shopDetailArea */
	.mainContents#shopDetailArea article .mainPhoto{
		position:static;
		width:100%;
	}
	.mainContents#shopDetailArea article .mainPhoto .thumbnail-list{
		width:500px;
		margin:0 auto;
	}
	.mainContents#shopDetailArea article .shopMenu{
		display:flex;
		flex-wrap:wrap;
	}
	.mainContents#shopDetailArea article .shopMenu h2{
		width:100%;
	}
	.mainContents#shopDetailArea article .shopMenu div:nth-of-type(odd){
	}

	.mainContents article .acordionBtn{
		display:none;
	}
	.slick-slide img{
		margin: 0px 0 0 0px;
	}
	/*.mainContents article .mainPhoto .nomihoshi{
		top: 20px;
	}*/
	.mainContents article .data dt{
		width: 140px;
	}
	.mainContents article .data dd{
		width: calc(100% - 140px);
	}
}

ul.graf.men{
    margin: 0 auto;
    padding: 20px 0 20px 0;
    list-style: none;
    background: url(../img/memory.png);
    width: 280px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}
ul.graf.suop {
    margin: 0 auto;
    padding: 20px 0 20px 0;
    list-style: none;
    background: url(../img/memory.png);
    width: 280px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}


ul.graf li {
    height: 15px;
    padding: 0;
    margin: 0;
    color: #000;
    font-weight: bold;
    font-size: 15px;
}

ul.graf li span {
    padding: 7px 0 0;
    font-size: 12px;
    background: #e75e27;
    color: #fff;
    width: 80px;
    display: inline-block;
    position: relative;
    top: -15px;
    border-radius: 50px;
}
ul.graf li span::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 31%;
    display: block;
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-top: 10px solid #e75e27;
    border-left: 6px solid transparent;
}