@charset "shift_jis";
/* CSS Document */
/*==============================================
本店用 スタイルリセット
================================================*/
/* デフォルトの余白リセット */
footer .footer-inner, header .header, header .information, main, main#wrapper, nav .category_nav {
    margin: 0;
    padding: 0;
    max-width: none;
}

article#contents {
    padding-bottom: 0;
}
footer {
    position: relative;
    z-index: 1000;
    border-top: 3px solid #222;
}

footer .footer-inner {
    padding: 30px 0 !important;
}

/*==============================================
スタイルリセット その2
================================================*/
#miyagi-foods .no,
#miyagi-foods .pc_none{
    display: none !important;
}


/* ここから追加
================================ */
/* ベース */
#miyagi-foods {
    margin: 0 auto;
    font-size: 22px;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

#miyagi-foods div.pc_content{
    width: 900px;
    margin: 0 auto;
}

#miyagi-foods section{
    padding: 10px 0 35px 0;
}


/*価格プロ 税込削除*/
/* #miyagi-foods div.prices span > span > span {
    display: none;
} */

/* 共通 見出し
================================ */
#miyagi-foods h1 {
    font-size: 0;
}

#miyagi-foods section.title span.line_dashed {
    border-bottom: dashed 2px #fd8763;
    font-size: 18px;
}

#miyagi-foods h2 {
    font-size: 35px;
    padding:15px 0;
    text-underline-offset: 10px;
    text-decoration-thickness: 3px;
}

#miyagi-foods h2 span {
    width: 60px;
    height: 60px;
    font-size: 50px;
    line-height: 50px;
}

/*緑*/
#miyagi-foods h2.h2_green {
    color: #00a05a;
    font-size: 30px;
}


/*見出し画像の時*/
#miyagi-foods h2.h_img{
    width: 700px;
    margin: 0 auto;
}

#miyagi-foods h3 {
    font-size: 30px;
    padding:2% 0;
}


#miyagi-foods p{
    font-size: 25px;
    padding:2% 0;
}

#miyagi-foods p.small {
    font-size: 15px;
    padding: 1% 0;
    line-height: 20px;
}


/* 共通 カラム
================================ */
#miyagi-foods ul[class^="col_"]{
    gap: 11px 1%;
    margin: 4% auto;
    justify-content: flex-start;
}

#miyagi-foods ul.col_1 > li{
    width:100%;
}

#miyagi-foods ul.col_2 > li{
    width: calc(calc(100% - 1%) / 2);
}

#miyagi-foods ul.col_3 > li{
    width: calc(calc(100% - 2%) / 3);
}

#miyagi-foods ul.col_4 > li{
    width: calc(calc(100% - 3%) / 4);
}

#miyagi-foods ul.col_5 > li{
    width: calc(calc(100% - 4%) / 5);
}

/*
共通 a.top_back TOPへもどる
============================================== */

#miyagi-foods a.top_back{
    width: 90px;
    height:90px;
    font-size: 20px;
    line-height: 20px;
    bottom:3%;
    right: 3%;
}

#miyagi-foods a.top_back:hover{
    color: #fff !important;
}


/* 共通 もっと見るボタン
================================ */
#miyagi-foods a.more_btn{
    width: 80%;
    height: 75px;
    margin: 0 auto 30px auto;
    border: solid 5px #e42537;
    box-shadow:10px 10px #e42537;
    font-size: 29px;
}

#miyagi-foods a.more_btn::after {
    font-size: 50px;
    right: 5%;
}
#miyagi-foods a.more_btn small {
    font-size: 22px;
}

#miyagi-foods a.more_btn:hover{
    transform: translate(10px,10px);
    box-shadow:0 0 #e42537;
}

/* 共通 商品ラインナップ 通常
================================ */
#miyagi-foods ul.item_block{
    flex-wrap: wrap;
    overflow-x: auto;
    gap: 11px 1%;
    margin:0 auto 15px auto;
}

#miyagi-foods ul.item_block li{
    margin-bottom: 0;
}

#miyagi-foods ul.item_block li a{
    padding: 10px;
}

#miyagi-foods ul.item_block li a h4{
    height: 46px;
    font-size: 15px;
    margin: 10px auto;
}

#miyagi-foods ul.item_block li a dd.sale_box{
    height: 55px;
    border-radius: 6px;
    font-size: 15px;
}

#miyagi-foods ul.item_block li a dd.price_block .main-price{
    font-size: 30px;
    line-height: 40px;
    padding: 5% 2% 5% 4%;
}

#miyagi-foods ul.item_block li a dd.price_block .sub-price{
    font-size: 18px;
    line-height: 18px;
}

#miyagi-foods ul.item_block li a p.btn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 16px;
}

/* 共通 特集スライダー
================================ */
/* ラジオボタン非表示 */

#miyagi-foods section.event div.miyagi-foods-event-wrap .miyagi-foods-event-inner {
    overflow: visible;
    gap: 1%;
    padding:0 4% 0 4%;
    margin:0 auto 10px auto;
}


#miyagi-foods section.event div.miyagi-foods-event-inner div.miyagi-foods-item__thum {
    width: 100%;
}

/*
共通 アンカー
============================================== */
#miyagi-foods .anchor .flex-box {
    display: flex;
    justify-content: center;
    gap: 1%;
    width: 100%;
    flex-wrap: wrap;
}

#miyagi-foods .anchor .flex-box li {
    width: calc(95% / 4);
}


/* section shop_list
================================ */
/* ラジオボタン非表示 */
#miyagi-foods section.shop_list div.shop_block input.radio-slider {
    display: none;
}


#miyagi-foods section.shop_list div.shop_block{
    position: relative;
}

#miyagi-foods section.shop_list div.shop_block ul {
    gap: 11px 1%;
    margin: 0 auto 10px auto;
    overflow: visible;
    /* padding:0 4% 0 4%; */
}


#miyagi-foods section.shop_list div.shop_block ul li{
    width: calc(calc(100% - 3%) / 4);
    margin-bottom: 0;
    /* スライダー表示処理 */
    display: block;
    flex-direction: column;
}

#miyagi-foods section.shop_list div.shop_block ul li a{
    padding: 10px;
}

#miyagi-foods section.shop_list div.shop_block ul li a img.logo{
    width: 100px;
}

#miyagi-foods section.shop_list div.shop_block ul li a dl dt p{
    height: 103px;
    font-size: 14px;
}

#miyagi-foods section.shop_list div.shop_block ul li a dl dd.btn{
    height: 50px;
    border-radius: 5px;
    font-size: 15px;
}


/* スライダー矢印部分 */
#miyagi-foods section.shop_list div.shop_block .slider-arrow {
    position: absolute;
    top: 45%;  
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: #2222229c;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 100vw;
    z-index: 1;
    border: 1px solid #ffffff;
    cursor: pointer;
}

#miyagi-foods section.shop_list div.shop_block .arrow {
    position: relative;
    width: 9px;
    height: 9px;
}

#miyagi-foods section.shop_list div.shop_block .slider-arrow .arrow::before,
#miyagi-foods section.shop_list div.shop_block .slider-arrow .arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    right: 0;
    width: 9px;
    height: 3px;
    border-radius: 9999px;
    background-color: #ffffff;
    transform-origin: calc(100% - 1px) 50%;
}

#miyagi-foods section.shop_list div.shop_block .slider-arrow .arrow::before {
    transform: rotate(45deg);
}

#miyagi-foods section.shop_list div.shop_block .slider-arrow .arrow::after {
    transform: rotate(-45deg);
}

#miyagi-foods section.shop_list div.shop_block .slider-arrow.prev-label {
    left: -1%;
}

/* 位置調整 */
#miyagi-foods section.shop_list div.shop_block .slider-arrow.prev-label .arrow {
    transform: rotate(-180deg);
}

#miyagi-foods section.shop_list div.shop_block .slider-arrow.next-label {
    right: -1%;
}

/* ページネーション サークル */
#miyagi-foods section.shop_list div.shop_block .slider-pagination {
    display: flex;
    justify-content: center;
    gap: .5em;
    margin-bottom: 1em;
}
#miyagi-foods section.shop_list div.shop_block .slider-pagination__cir {
    width: .8em;
    height: .8em;
    background-color: #353535;
    border-radius: 100vw;
    border: 1px solid #353535;
}


