@charset "euc-jp";
/*▽基本CSS*/
html{scroll-behavior: smooth; font-family: 'Open Sans', sans-serif;}
*{ list-style:none; margin:0; padding:0;}
a{ text-decoration:none; color: #000000;}
a img{ border:none; }
/*smp*/
@media screen and (max-width: 640px){
.smp_none{ display: none !important;}
/*コンテンツ*/
#wrap{ width: 100%; margin: 0 auto; background-color: #fff; padding: 0;}
/*店舗名*/
h1.mida{ width: 100%; margin: 0 auto; text-align: center; padding: 2.5vw 0; font-size: 4.5vw; background-color: #ffcc0d; font-weight: bold;}
/*看板バナー*/
#wrap #kanban_bn{ width: 100%; margin: 0 auto;}
#wrap #kanban_bn img{ max-width: 100%;}
/*ランキング*/
#wrap #rank_item{ width: 98%; margin: 2vw auto 3vw;}
#wrap #rank_item ul > li a{ width: 100%; display: flex; justify-content: space-between; border-bottom: 2px dotted #666666; padding: 3.5vw 0;}
#wrap #rank_item ul > li:nth-child(even){ background-color: #efefef;}
#wrap #rank_item ul > li:last-child a{ border-bottom: none;}
#wrap #rank_item ul > li a div.left_cont{ width: 10%; text-align: center;}
#wrap #rank_item ul > li a div.right_cont{ width: 90%; display: flex; justify-content: space-around;}
/*左側（順位）*/
#wrap #rank_item ul > li a div.left_cont p{ font-size: 65%; font-weight: bold;}
#wrap #rank_item ul > li a div.left_cont p span.num{ font-size: 180%; margin-right: 1%;}
#wrap #rank_item ul > li a div.left_cont p.crown01{ color: #d39740; font-size: 120%;}
#wrap #rank_item ul > li a div.left_cont p.rank01{ color: #c3a64c;}
#wrap #rank_item ul > li a div.left_cont p.crown02{ color: #898989; font-size: 120%;}
#wrap #rank_item ul > li a div.left_cont p.rank02{ color: #898989;}
#wrap #rank_item ul > li a div.left_cont p.crown03{ color: #a8664f; font-size: 120%;}
#wrap #rank_item ul > li a div.left_cont p.rank03{ color: #ae7742;}
#wrap #rank_item ul > li a div.left_cont p.rank_other{ color: #666666; margin-top: 1vw;}
/*右側*/
/*サムネ*/
#wrap #rank_item ul > li div.right_cont div.right_cont_01{ width: 38%;}
#wrap #rank_item ul > li div.right_cont div.right_cont_01 img{ max-width: 100%; border: 1px solid #dadada;}
/*商品詳細*/
#wrap #rank_item ul > li div.right_cont div.right_cont_02{ width: 58%; position: relative;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02::after{font-family: "Font Awesome 5 Free"; content: "\f054"; font-weight: 900; color: #909090; position: absolute; top: 50%;
right: -2%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 80%;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 p.item_name{ font-size: 80%; font-weight: bold;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.prices{ text-align: right; font-size: 100%; font-weight: bold; position: absolute; bottom: 0; right: 0; color: #a20102;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.prices::before{ content: "税込"; font-size: 70%; margin-right: 3px;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.prices::after{ content: "円"; font-size: 70%; margin-left: 3px;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.syosai{ display: none; /*position: absolute; bottom: 0; */width: 100%; text-align: center; background-color: #333; padding: 2.5vw 0; border-radius: 3px;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.syosai p{ color: #fff; font-weight: bold; font-size: 80%; position: relative;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.syosai p::after{ font-family: "Font Awesome 5 Free"; content: "\f138"; font-weight: 900; color: #fff; position: absolute; right: 5px;}
/*訴求ポイント*/
#wrap p.point{ margin-top: 2vw; font-size: 75%; font-weight: bold; color: #58564b;}
#wrap p.point::before{ font-family: "Font Awesome 5 Free"; content: "\f005"; font-weight: 900; color: #c77800; margin-right: 1px;}
#wrap p.point::after{font-family: "Font Awesome 5 Free"; content: "\f005"; font-weight: 900; color: #c77800; margin-left: 1px;}
/*おすすめ文言*/
#wrap p.txt{ margin: 1vw 0 3vw; font-size: 70%; width: 90%;}
/*フッター*/
div#foot{ width: 100%; margin: 0 auto; border-top: 1px solid #b0b0b0; padding: 5vw 0;}
div#foot ul{ display: flex; justify-content: center;}
div#foot ul li:nth-child(2){ margin: 0 5vw; padding: 0 5vw; border-right: 1px solid #b0b0b0; border-left: 1px solid #b0b0b0;}
div#foot ul li span{ font-size: 80%;}
/*page topボタン*/
#page_top{ width: 12vw; height: 12vw; position: fixed; right: 0; bottom: 0; background: #333; opacity: 0.6;}
#page_top a{ position: relative; display: block; width: 12vw; height: 12vw; text-decoration: none; }
#page_top a::before{ font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f102'; font-size: 130%; color: #fff; position: absolute; width: 6vw; height: 6vw; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; }
}/*smp-end*/
/*PC*/
@media screen and (min-width: 640px){
body{ background-color: #eeeeee;}
a:hover img{ opacity:0.8;}
.pc_none{ display: none !important;}
/*コンテンツ*/
#wrap{ width: 700px; margin: 0 auto; background-color: #fff; padding: 25px 0 10px;}
/*看板バナー*/
#wrap #kanban_bn{ width: 640px; margin: 0 auto;}
#wrap #kanban_bn img{ max-width: 100%;}
/*ランキング*/
#wrap #rank_item{ width: 640px; margin: 25px auto 30px;}
#wrap #rank_item ul > li a{ width: 100%; display: flex; justify-content: space-between; border-bottom: 2px dotted #666666; padding: 20px 0;}
#wrap #rank_item ul > li:nth-child(even){ background-color: #efefef;}
#wrap #rank_item ul > li:last-child a{ border-bottom: none;}
#wrap #rank_item ul > li a div.left_cont{ width: 15%; text-align: center;}
#wrap #rank_item ul > li a div.right_cont{ width: 85%; display: flex; justify-content: space-around;}
/*左側（順位）*/
#wrap #rank_item ul > li a div.left_cont p{ font-size: 15px; font-weight: bold;}
#wrap #rank_item ul > li a div.left_cont p span.num{ font-size: 45px; margin-right: 2px;}
#wrap #rank_item ul > li a div.left_cont p.crown01{ color: #d39740; font-size: 45px; margin-bottom: 5px;}
#wrap #rank_item ul > li a div.left_cont p.rank01{ color: #c3a64c;}
#wrap #rank_item ul > li a div.left_cont p.crown02{ color: #898989; font-size: 45px; margin-bottom: 5px;}
#wrap #rank_item ul > li a div.left_cont p.rank02{ color: #898989;}
#wrap #rank_item ul > li a div.left_cont p.crown03{ color: #a8664f; font-size: 45px; margin-bottom: 5px;}
#wrap #rank_item ul > li a div.left_cont p.rank03{ color: #ae7742;}
#wrap #rank_item ul > li a div.left_cont p.rank_other{ color: #666666; margin-top: 10px;}
/*右側*/
/*サムネ*/
#wrap #rank_item ul > li div.right_cont div.right_cont_01{ width: 40%;}
#wrap #rank_item ul > li div.right_cont div.right_cont_01 img{ max-width: 100%; border: 1px solid #dadada;}
/*商品詳細*/
#wrap #rank_item ul > li div.right_cont div.right_cont_02{ width: 55%; position: relative;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 p.item_name{ font-size: 20px; font-weight: bold; margin-top: 5px;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.prices{ text-align: left; font-size: 25px; font-weight: bold; margin-top: 10px; position: absolute; bottom: 45px; right: 0; color: #a20102;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.prices::before{ content: "税込"; font-size: 15px; margin-right: 3px;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.prices::after{ content: "円"; font-size: 15px; margin-left: 3px;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.syosai{ position: absolute; bottom: 0; width: 100%; text-align: center; background-color: #333; padding: 12px 0;}
#wrap #rank_item ul > li a:hover div.right_cont div.right_cont_02 div.syosai{ opacity: 0.8; }
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.syosai p{ color: #fff; font-weight: bold; font-size: 17px; position: relative;}
#wrap #rank_item ul > li div.right_cont div.right_cont_02 div.syosai p::after{ font-family: "Font Awesome 5 Free"; content: "\f138"; font-weight: 900; color: #fff; position: absolute; right: 5px;}
/*訴求ポイント*/
#wrap p.point{ margin-top: 12px; font-size: 15px; font-weight: bold; color: #58564b;}
#wrap p.point::before{ font-family: "Font Awesome 5 Free"; content: "\f005"; font-weight: 900; color: gold; margin-right: 3px;}
#wrap p.point::after{font-family: "Font Awesome 5 Free"; content: "\f005"; font-weight: 900; color: gold; margin-left: 3px;}
/*おすすめ文言*/
#wrap p.txt{ margin-top: 5px; font-size: 15px; }
/*フッター*/
div#foot{ width: 640px; margin: 0 auto; border-top: 1px solid #b0b0b0; padding-top: 15px; padding-bottom: 10px;}
div#foot ul{ display: flex; justify-content: center;}
div#foot ul li:nth-child(2){ margin: 0 15px; padding: 0 15px; border-right: 1px solid #b0b0b0; border-left: 1px solid #b0b0b0;}
div#foot ul li a:hover span{ border-bottom: 1px solid #333;}
div#foot ul li span{ font-size: 15px;}
/*page topボタン*/
#page_top{ width: 50px; height: 50px; position: fixed; right: 0; bottom: 0; background: #333; opacity: 0.6;}
#page_top a{ position: relative; display: block; width: 50px; height: 50px; text-decoration: none; }
#page_top a::before{ font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f102'; font-size: 25px; color: #fff; position: absolute; width: 25px; height: 25px; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; }
}