﻿@charset "utf-8";

/* グルメトップ */
/*====================================================
common
====================================================*/
.mainArea{margin:auto;max-width:1200px;min-width:1000px;position:relative;width:100%;overflow:hidden}
.fwCms_box.frame_LM{float:left;position:relative;width:16.7%}
.fwCms_box.frame_MB{float:left;width:83.3%}
.footer{background:#fff!important}
footer.footer.pc{background-color:#F3F3F3!important}
div.bnr_area .sp_bnr,div#sp_souryou_bnr,div#footBnr,div#sp_grm_info,div#sp_grm_mainBnr,div#sp_grm_cate,div#sp_grm_osusumeTokushu,div#osusumeclm,div#sp_appdl,div#sp_ninkicate{display:none}
.border01,div#campaign_slider li .sp_bnr{background:#fff!important}
.hotitems,.checkeditems{padding:30px 0!important;border-top:1px solid #eee}
div.grm_rankArea,div#pc_grm_osusumeTokushu{border-top:1px solid #eee}
a:hover img{-moz-opacity:.8;opacity:.8;filter:alpha(opacity=80)}
div#campaign_slider h2,div#grm_cateBnrList h2,div#sp_ninkicate h2{color:#333;display:block;font-size:20px;margin:0 0 15px;font-weight:400}
div#pc_grm_left_camp1 a{display:block;width:150px;margin:0 auto 10px}
/*====================================================
メインバナー
====================================================*/
div#pc_grm_mainBnr .mainslider .slider01 .slick-slide li {width:1000px !important;}
div.mainslider ul.slick-slider{display:block!important;}
div.mainslider ul.slider01{display:none}
div.mainslider .slick-dots li button:before{color: #CAC9C9;background: #CAC9C9;content: '';border-radius: 50%;width: 10px!important;height: 10px!important;opacity: 100;}
div.mainslider .slick-dots li.slick-active button:before{color: #EF8B16;opacity: 1;background: #EF8B16;}
div.mainslider .slick-dots{bottom:-33px!important}
div.mainslider .slick-dots li{margin:0 10px!important}
@media only screen and (min-width: 768px) {
div.mainslider .mainslider .slider01 .slick-prev{left:11%!important}
div.mainslider .mainslider .slider01 .slick-next{right:11%!important}
div#pc_grm_mainBnr .mainslider .slider01 .slick-slide li {width: 1000px !important;height: 360px!important;}
.mainslider .slick-dotted.slick-slider {margin-bottom: 0!important;}
.mainslider .slider01 .slick-prev {left: 8%!important;}
.mainslider .slider01 .slick-next {right: 8%!important;}
.mainslider{margin-bottom:42px!important}
.mainslider .slick-slide:not(.slick-center){-webkit-filter:opacity(20%);-moz-filter:opacity(20%);-o-filter:opacity(20%);-ms-filter:opacity(20%);filter:opacity(20%);transition:.2s linear}
.mainslider .slider01 .slick-next{right:8%;background:url(/excludes/gourmet/top/img/pc/arrow_right.svg) center/50px 50px no-repeat}
.mainslider .slider01 .slick-prev{left:8%;background:url(/excludes/gourmet/top/img/pc/arrow_left.svg) center/50px 50px no-repeat}
.mainslider .slider01 .slick-arrow{width:50px;height:50px;z-index:1}
.slick-next:before,.slick-prev:before{display:none}
div#pc_grm_mainBnr .mainslider .slider01 .slick-slide li img{width:1000px}
}
/*====================================================
ネット限定
====================================================*/
div.bnr_area .sp_bnr img {width: 100%;}
/*====================================================
ジャンルバナー
====================================================*/
div#grm_cateBnrList{border-top:1px solid #eee;padding-top:15px}
div#grm_cateBnrList ul li{float:left;width:24.2%;margin-right:1%;margin-bottom:2px;line-height:1em}
div#grm_cateBnrList ul li:nth-child(4),div#grm_cateBnrList ul li:nth-child(8),div#grm_cateBnrList ul li:nth-child(12){margin-right:0}
div#grm_cateBnrList ul li a{display:inline-block;font-size:12px;line-height:1.2em;color:#333}
div#grm_cateBnrList ul li a span.bnrImg{position:relative;display:inline-block;width: 100%;}
div#grm_cateBnrList ul li a span.bnrImg span.bnrTitle{position:absolute;bottom:0;left:0;width:100%;padding:10px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background:rgba(74,54,44,0.5);color:#fff;font-weight:700;text-align:center;font-size:15px;display: inline-block;}
div#grm_cateBnrList ul li a span.bnrTxt{padding:5px 5px 10px;display:inline-block;height:45px}
div#grm_cateBnrList ul li img {width: 242px;}
div#grm_cateBnrList ul li a span.bnrTxt span.upDate {color: #cc0000;}
@media screen and (max-width:998px) {
div#grm_cateBnrList ul li img {width:100%;}
}
/*====================================================
ランキング
====================================================*/
div.grm_rankArea{margin-bottom:2%}
div.grm_rankArea ol{margin-right:-2%}
div.grm_rankArea ol li{width:18%;float:left;margin-right:2%;margin-bottom:2%}
div.grm_rankArea ol li .itemName{font-size:12px;line-height:1.1em;display:inline-block;margin:3px 0;height: 25px;overflow: hidden;}
div.grm_rankArea ol li .itemName:hover{color:#f88d01;text-decoration:underline}
div.grm_rankArea ol li img {width: 184px; display: inline-block;}
div.grm_rankArea ol li em.itemPrice{font-size:16px;color:#c00;display:block;text-align:right;margin-bottom:5px}
div.grm_rankArea ol li em span.monthTxt{font-size:13px;color:#c00}
div.grm_rankArea ol li em.itemPrice span.zei{color:#999;font-size:11px;display:inline-block;margin-left:2px}
div.grm_rankArea ol li div.cartBtn{text-align:right}
div.grm_rankArea ol li div.cartBtn button.cartBtn{height:40px;font-weight:700;border:none;text-align:center;font-size:15px;color:#fff;border-radius:10px;-moz-border-radius:10px;background:#c00 url(/excludes/gourmet/pg/sale/common/carticon.svg) no-repeat;background-size:21px;padding:0 10px 0 29px;background-position:7px 8px;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,"メイリオ",Osaka,"MS PGothic",arial,helvetica,sans-serif}
div.grm_rankArea ol li div.cartBtn button.cartBtn span{color:#fff}
div.grm_rankArea .linkTopBox{text-align:right}
div.grm_rankArea .linkTopBox a{font-size:14px;text-decoration:underline}
div.grm_rankArea .linkTopBox a:hover{color:#f88d01;text-decoration:underline}
div.grm_rankArea ol li div.rankBox{position:relative}
div.grm_rankArea ol li div.rankBox:before{content:'';width:50px;height:25px;display:block;background:#333;color:#fff;font-size:14px;font-weight:700;text-align:center;line-height:26px;position:absolute;left:0;top:0;z-index:1}
div.grm_rankArea ol li div.rankIcon_01:before{content:'1位';background:#D9B340}
div.grm_rankArea ol li div.rankIcon_02:before{content:'2位';background:#707B83}
div.grm_rankArea ol li div.rankIcon_03:before{content:'3位';background:#A05325}
div.grm_rankArea ol li div.rankIcon_04:before{content:'4位'}
div.grm_rankArea ol li div.rankIcon_05:before{content:'5位'}
div.grm_rankArea ol li div.rankIcon_06:before{content:'6位'}
div.grm_rankArea ol li div.rankIcon_07:before{content:'7位'}
div.grm_rankArea ol li div.rankIcon_08:before{content:'8位'}
div.grm_rankArea ol li div.rankIcon_09:before{content:'9位'}
div.grm_rankArea ol li div.rankIcon_10:before{content:'10位'}
div#newitem ol li div.rankBox:before {display: none;}
/*====================================================
おすすめ特集
====================================================*/
h2.pc_grm_contents_title{color:#333;display:block;font-size:20px;margin:15px auto;font-weight:400}
h2.pc_grm_contents_title span.upDate {color: #cc0000;font-size: 12px;position: relative;top: -1px;left: 4px;}
div#pc_grm_osusumeTokushu ul li{width:48%;float:left;margin-right:2%;text-align:center;margin-bottom:1%}
div#pc_grm_osusumeTokushu ul li:nth-child(even){margin-right:0}
div#pc_grm_osusumeTokushu ul li a span{display:inline-block;margin-top:2px;font-size:12px}
div#pc_grm_osusumeTokushu ul li a:hover span{color:#f88d01;text-decoration:underline}
div#pc_grm_osusumeTokushu a.cateTop_txtLink{color:#333;display:block;text-align:right;font-size:13px}
div#pc_grm_osusumeTokushu a.cateTop_txtLink:hover{color:#f88d01;text-decoration:underline}
div#sp_grm_osusumeTokushu ul li span.bnr_txt{font-size:12px;text-align:center;display:block;line-height:1.2em;margin-top:5px}
div#sp_grm_osusumeTokushu ul li a:hover span.bnr_txt{color:#f88d01;text-decoration:underline}
/*====================================================
サイドバナー
====================================================*/
#sidebarbox{width:120px;height:445px;top:65px;right:0;position:fixed;z-index:1;display:block}
#sidebarbox #sidebar{width:120px;height:200px;top:65px;right:0;text-indent:-9999px;position:fixed;z-index:9999;display:block}
#sidebarbox #sidebar #sidebar_link{width:120px;height:200px;display:block;background:no-repeat scroll 0 0 transparent;position:relative;top:0;left:0;outline:none;z-index:9999}
#sidebarbox #sidebar2{width:120px;height:200px;top:267px;right:0;text-indent:-9999px;position:fixed;z-index:9999;display:block}
#sidebarbox #sidebar2 #sidebar_link{width:120px;height:200px;display:block;background:no-repeat scroll 0 0 transparent;position:relative;top:0;left:0;outline:none;z-index:9999}
#sidebarbox button{z-index:99999;position:absolute;top:403px;width:94px;height:30px;text-align:center;font-size:15px;right:9px;background-color:#f8f8f8;border:1px solid #bebebe;color:#333;border-radius:100px;-moz-border-radius:100px}
#sidebarbox button span.batsu{color:#333;position:relative;left:-3px}
#sidebarbox button span.btnTxt{color:#333!important}
/*====================================================
今売れてます！
====================================================*/
@media only screen and (min-width: 768px) {
.hotitems .hotitems_inner ul li .hotitems_item .hotitems_item_img img,.checkeditems .checkeditems_inner ul li .checkeditems_item .checkeditems_item_img img {width: 170px;}
}
/*====================================================
カタログアイテム
====================================================*/
div#top_catlogitem{max-width:1200px;margin:0 auto}
div#top_catlogitem h2{color:#333;display:block;font-size:2.4rem;text-align:center;border-top:1px solid #eee;padding:30px 0}
div#top_catlogitem ul{max-width:1000px;margin:0 auto}
div#top_catlogitem ul li{width:20%;float:left}
div#top_catlogitem ul li a{display:block;width:100%;text-align:center;padding: 0 10px;}
div#top_catlogitem ul li a span{display:block;text-align:center;margin:5px 0 20px;font-size:12px}
div#top_catlogitem ul li a:hover span{color:#f88d01;text-decoration:underline}
div#top_catlogitem p{text-align:center;font-size:14px;margin-bottom:30px;line-height:1.2em}
div#top_catlogitem p a{text-decoration:underline}
div#top_catlogitem p a:hover{color:#f88d01}

/*====================================================
説明
====================================================*/
div#brand_txt_area{margin:0 auto;padding:3% 3% 0;font-size:11px;max-width:1100px}
div#brand_txt_area h1,div#brand_txt_area h2,div#brand_txt_area p{color:#333;line-height:1.2em}
div#brand_txt_area h2,div#brand_txt_area p{display:inline}

@media screen and (max-width:750px) {
/* 
★スマホ用CSS 
*/
div#sp_appdl{display: block;border-bottom: 1px;solid #eee;}
div#sp_appdl img{width:100%;height:auto;}
.mainArea{min-width:auto}
.fwCms_box.frame_MB{float:none;width:100%}
.header_logo a{max-width:215px;margin:0 auto;display:block}
/* 表示 */
div.bnr_area .sp_bnr,div#footBnr,div#sp_grm_info,div#sp_grm_mainBnr,div#sp_grm_cate,div#sp_grm_osusumeTokushu,div#campaign_slider li .sp_bnr,div#osusumeclm,div#sp_ninkicate{display:block}
/* 非表示 */
div.bnr_area .pc_bnr,div#pc_grm_mainBnr,.fwCms_box.frame_LM,div#pc_grm_osusumeTokushu,div#pc_grm_sitemaparea,div#sidebarbox,div#campaign_slider li .pc_bnr{display:none}
.checkeditems,.hotitems{border-top:10px solid #f3f3f3;padding:30px 0 15px!important}
.footer{margin-top:0!important}
div#sp_grm_courseRank h2 {color: #333;margin: 10px 0 10px 5px;font-size: 18px;}
/* チャット */
iframe#vgdataMainFrm1617688612049{bottom:45px!important}
div#sp_souryou_bnr{padding:0 3% 3%;display:block;max-width:500px;margin:0 auto}
/* 見出し */
div#campaign_slider h2,div#grm_cateBnrList h2,div#sp_ninkicate h2{padding-left:5px;font-size:16px}
/* width100 */
div#sp_grm_mainBnr img,div#sp_souryou_bnr img,div#grm_cateBnrList ul li img,div#campaign_slider div.bnr_box img,div#top_catlogitem ul img{width:100%!important;height:auto!important;}

/* 今売れてます・チェックした商品 */
.hotitems img,div.checkeditems img{width:90px;}
/*------------------------------------------
メインバナー
------------------------------------------*/
div#sp_grm_mainBnr ul.slider-center .slick-slide:not(.slick-center){-webkit-filter:opacity(50%);-moz-filter:opacity(50%);-o-filter:opacity(50%);-ms-filter:opacity(50%);filter:opacity(50%);transition:.2s linear}
div#sp_grm_mainBnr ul.slick-slider{display:block!important;padding: 0}
div#sp_grm_mainBnr ul.slider-center{display:none}
div#sp_grm_mainBnr .slick-next,div#sp_grm_mainBnr .slick-prev{right:2px;width:35px;height:35px;top:100px}
div#sp_grm_mainBnr .slick-prev,div#sp_grm_mainBnr .slick-next{position:absolute;top:50%;width:30px;height:30px;display:block;cursor:pointer;color:#333;border:none;outline:none;background:#333;border-radius:100%;font-size:0;color:transparent}
div#sp_grm_mainBnr .slick-next:before,div#sp_grm_mainBnr .slick-prev:before{font-family:slick;font-size:35px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
div#sp_grm_mainBnr .slick-prev{left:7px!important;z-index:1}
div#sp_grm_mainBnr .slick-prev:before{display:block;position:absolute;top:9px;left:12px;content:"";width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid #fff;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);-webkit-transition:all .15s linear;-moz-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;background:none}
div#sp_grm_mainBnr .slick-next:before{display:block;position:absolute;top:9px;left:8px;content:"";width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid #fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all .15s linear;-moz-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;background:none}
div#sp_grm_mainBnr .slick-prev:before,div#sp_grm_mainBnr .slick-next:before{font-size:0;line-height:1;color:#333;opacity:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
div#sp_grm_mainBnr .slick-dots li {width: 10px!important;margin: 0 10px;}
div#sp_grm_mainBnr .slick-dots li.slick-active button:before{color:#df6c0f;}
div#sp_grm_mainBnr .slick-dots{bottom:-24px!important}
.slick-dots li button:before {font-size: 20px;}
/*====================================================
ネット限定
====================================================*/
div.bnr_area {margin: 3% 3% 6% 3%;}
div.bnr_area .sp_bnr img {width: 100%;height: auto;}
/*====================================================
人気のカテゴリ
====================================================*/
div#sp_ninkicate{border-top:10px solid #f3f3f3;margin-top:15px;padding-top:15px}
div#sp_ninkicate .scrollItemList{overflow-y:hidden;overflow-x:scroll;position:relative;padding-left:1%}
div#sp_ninkicate .scrollItemList ul{margin:0 0 0 2px;width:670px}
div#sp_ninkicate .scrollItemList ul li{width:100px;float:left;margin-right:10px}
div#sp_ninkicate .scrollItemList ul li a{display:inline-block;text-align:center}
div#sp_ninkicate .scrollItemList ul li a span{font-size:12px}
/*====================================================
ジャンルバナー
====================================================*/
div#grm_cateBnrList{border-top:10px solid #f3f3f3;margin-top:15px}
div#grm_cateBnrList ul{padding:2px 0 0 2px;max-width:500px;margin:0 auto}
div#grm_cateBnrList ul li{width:50%;margin-bottom:2px;line-height:1em;margin-right:0}
div#grm_cateBnrList ul li a{margin-right:2px}
div#grm_cateBnrList ul li a span.bnrTxt{height:62px}
div#grm_cateBnrList ul li a span.bnrImg span.bnrTitle{font-size:13px;padding:5px 0}
div#grm_cateBnrList ul li img{width:100%}
/*====================================================
ランキング
====================================================*/
div.grm_rankArea{margin-bottom:0}
h2.pc_grm_contents_title {padding-left:5px;font-size: 16px;}
div.grm_rankArea div.scrollItemList{position:relative}
div.grm_rankArea div.scrollItemList:after{content:"";display:block;width:33px;height:33px;position:absolute;right:2px;top:27%;background:url(/excludes/gourmet/top/common/controls_02.svg) no-repeat -47px -1px;background-size:82px}
div.grm_rankArea div.rankList{overflow-y:hidden;overflow-x:scroll;position:relative}
div.grm_rankArea div.rankList ol{margin:0 0 0 2px;width:1455px}
div.grm_rankArea div.rankList ol li{width:145px;float:left;line-height:1em;margin-right:0;margin-bottom:0}
div.grm_rankArea ol li .itemName {margin: 3px 0 5px 0;}
/* カート */
div.grm_rankArea div.rankList ol li div.rankBox{margin-right:10px;position:relative}
div.grm_rankArea ol li div.cartBtn button.cartBtn{font-size:13px;width:100%}
div.grm_rankArea ol li div.cartBtn button.cartBtn span{position:relative;top:-2px}
div.grm_rankArea .linkTopBox{padding:15px 25px 15px 15px;border-top:1px solid #eee;margin-top:5px;position:relative}
div.grm_rankArea .linkTopBox a{text-decoration:none}
div.grm_rankArea .linkTopBox:after{content:"";display:block;width:10px;height:10px;border-top:1px solid #999;border-right:1px solid #999;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);position:absolute;right:10px;top:21px;margin-top:-5px;-webkit-transition:all .15s linear;-moz-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;background:none}
div.grm_rankArea ol li img{width:135px;height:135px}
/*====================================================
おすすめ特集
====================================================*/
div#sp_grm_osusumeTokushu ul li span.bnr_txt{height:35px}
div#osusumeclm h2{text-align:center;font-size:20px;color:#333;padding:30px 0 15px}
/*====================================================
おすすめコラム
====================================================*/
div#osusumeclm{border-top:10px solid #f3f3f3;position:relative}
div#osusumeclm h2{text-align:center;font-size:20px;color:#333;padding:30px 0 15px}
div#osusumeclm .scrollItemList{overflow-y:hidden;overflow-x:scroll;position:relative;padding-left:1%}
div#osusumeclm .scrollItemList ul{margin:0 0 0 2px;width:1455px}
div#osusumeclm .scrollItemList ul li{width:15.5%;float:left;margin-right:1%}
div#osusumeclm .scrollItemList ul li div.imgBox{width:72px;float:left}
div#osusumeclm .scrollItemList ul li div.txtBox{margin-left:5px;float:right;width:123px;font-size:12px;line-height:1.3em;text-decoration:underline}
div#osusumeclm .moreLink{padding:15px 25px 15px 15px;border-top:1px solid #eee;margin-top:5px;position:relative;text-align:right}
div#osusumeclm .moreLink a{text-decoration:none;font-size:14px}
div#osusumeclm .moreLink:after{content:"";display:block;width:10px;height:10px;border-top:1px solid #999;border-right:1px solid #999;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);position:absolute;right:10px;top:21px;margin-top:-5px;-webkit-transition:all .15s linear;-moz-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;background:none}
div#osusumeclm .scrollItemList::-webkit-scrollbar-thumb{background:#ccc;border-radius:50px;height:50px}
div#osusumeclm .scrollItemList::-webkit-scrollbar{background:#fff;width:10px}
/*====================================================
カタログアイテム
====================================================*/
div#top_catlogitem h2{text-align:center;font-size:20px;color:#333;padding:30px 0 15px}
div#top_catlogitem ul{margin:3% 0 3% 3%}
element.style{}
div#top_catlogitem ul li{width:30.3%;margin-right:3%}
div#top_catlogitem p{margin:0 3%}
div#top_catlogitem ul li a span {margin-bottom: 5px;height: 26px;}
div#top_catlogitem ul li a {padding: 0;}
/*====================================================
お知らせ
====================================================*/
div#sp_grm_info{border:1px solid #ccc;padding:0 10px 10px;margin:3%}
div#sp_grm_info ul li{line-height:1.2em}
div#sp_grm_info a{color: #333;font-size: 12px;line-height: 1.2em;text-decoration: underline;display: inline-block;margin-bottom:5px}
div#sp_grm_info li.ttlTxt p{color:#333;font-weight:700;margin-top:10px;margin-bottom: 3px;font-size: 14px}
div#sp_grm_info li.ttlTxt p.redTxt{color:#c00;font-size: 14px;margin-bottom: 5px}
/*====================================================
今売れてます
====================================================*/
.hotitems .hotitems_inner ul li .hotitems_item .hotitems_item_img img,.checkeditems .checkeditems_inner ul li .checkeditems_item .checkeditems_item_img img {width:90px;}
/*====================================================
グループサイト
====================================================*/
footer.footer.sp .slick-dots li button:before {font-size: 6px;}
footer.footer.sp .slick-dots li {width: 6px;}

}