@charset "UTF-8";

/*****************************
共通
*****************************/
.info_wrapper {
    max-width: 1580px;
    margin: 0 auto;
    padding: 30px 30px 10px 30px;
}
@media screen and (max-width: 767px) {
    .info_wrapper {
        padding-top: 10px;
    }
}

/*****************************
頒布会　原材料ページ
*****************************/
.bg_hanpu_info {
    background-color: #fff;
}


/*****************************
ヘッダー　商品名
*****************************/
.info_title {
    color: #92161e;
    font-size: 1.2rem;
}
header.info_wrapper {
    padding-top: 30px;
}
.title_border {
    height: 4px;
    background-color: #cacaca;
    margin-top: 10px;
}

/*****************************
商品画像と一括表示画像の表
*****************************/
.info_table {
    border: 1px solid #ccc;
    width: 100%;
    margin-bottom: 40px;
}
.item_photo {
    width: 30%;
}
.info_label {
    width: 70%;
}
@media screen and (max-width: 900px) {
    .item_photo {
        width: 40%;
    }
    .info_label {
        width: 60%;
    }
}
@media screen and (max-width: 767px) {
    .item_photo, .info_label {
        width: 100%;
    }
}



/***************************
商品画像　枠
***************************/
.item_photo {
    position: relative;
    padding: 30px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}
@media screen and (max-width: 900px) {
    .item_photo {
        padding: 30px 20px;
    }
}
@media screen and (max-width: 767px) {
    .item_photo {
        padding: 30px;
    }
}

/* ----------------------------
    9月スタート頒布会　背景色
 ------------------------------ */
/* 01 小布施堂 栗の頒布会６回コース */
#info_250901 .item_photo {
    background-color: #c5ad89;;
}

/* 02 森山ナポリ 釜焼きピザ頒布会６回コース */
#info_250902 .item_photo {
    background-color: #d45847;
}

/* 03 スープストックトーキョー頒布会（５個セット）６回コース */
#info_250903 .item_photo {
    background-color: #d3c7ae;
}

/* 04 スープストックトーキョー頒布会（７個セット）６回コース */
#info_250904 .item_photo {
    background-color: #cec2aa;
}

/* 05 京つけもの詰合せ頒布会６回コース */
#info_250905 .item_photo {
    background-color: #ccccc4;
}

/* 06 ご当地ラーメン頒布会６回コース */
#info_250906 .item_photo {
    background-color: #363636;
}

/* 07 八天堂くりーむパン頒布会６回コース */
#info_250907 .item_photo {
    background-color: #fddee6;
}

/* 08 八天堂ミニくりーむパン頒布会６回コース */
#info_250908 .item_photo {
    background-color: #ffd2b3;
}

/* 09 【豆】小川珈琲頒布会６回コース */
#info_250909 .item_photo {
    background-color: #931c1e;
}

/* 10 【粉】小川珈琲頒布会６回コース */
#info_250910 .item_photo {
    background-color: #1e5b32;
}

/* 11 【ドリップ】小川珈琲頒布会６回コース */
#info_250911 .item_photo {
    background-color: #a98d12;
}

/* 12 新潟加島屋“自然豊かな味覚”頒布会６回コース */
#info_250912 .item_photo {
    background-color: #5163af;
}


/* 月と商品画像枠 */
.info_month_goods {
    position: relative;
}

.info_month_circle {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    width: 70px;
    height: 70px;
    top: -20px;
    left: -15px;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info_month {
    font-size: 18px;
    vertical-align: bottom;
}

/* 商品画像 囲み枠 白線*/
.infoimg_goods {
    display: block;
    min-width: 100px;
    /* max-width: 300px; */
    margin: 20px auto 0 auto;
    border: 2px solid #fff;
}

/* 商品画像の白枠なし */
#info_250902 .infoimg_goods,
#info_250903 .infoimg_goods,
#info_250904 .infoimg_goods,
#info_250907 .infoimg_goods,
#info_250908 .infoimg_goods,
#info_250909 .infoimg_goods,
#info_250910 .infoimg_goods,
#info_250911 .infoimg_goods {
    border: none;
}

/* スープストック頒布会の最終月プレゼントだけ、白枠あり */
#info_250903 .infoimg_goods.present,
#info_250904 .infoimg_goods.present {
    border: 2px solid #fff;
}



/* 商品画像の枠線変更 */
#info_250905 .infoimg_goods {
    border: 2px solid #a5a5a5;
}


/* 「○月」の色 */
.info_month_circle {
    background-color: rgb(241, 241, 196);
    border: 2px solid rgb(204, 218, 8);
}

/* セット内容 */
.infoimg_set {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.7;
    margin-top: 10px;
}
.infoimg_set.align_left {
    text-align: left;
}
.infoimg_set.indent {
    margin-left: 30px;
}
.infoimg_set.white {
    color: #fff;
}

@media screen and (max-width: 767px) {
    .infoimg_goods {
        max-width: 100%;
    }
    .infoimg_set {
        font-size: 0.875rem;
        font-weight: bold;
        line-height: 1.7;
        margin-top: 10px;
    }
}


/*****************************
一括表示画像
*****************************/
.info_label {
    border-left: 1px solid #ccc;
    padding: 0 20px;
}
.info_label img {
    min-width: 200px;
    max-width: 420px;
    vertical-align: top;
    margin: 15px;
}
.info_label .label_text {
    font-weight: bold;
    text-indent: 20px;
    margin-top: 20px;
}
.info_label .mt0 {
    margin-top: 0;
}
.info_label .mt-20 {
    margin-top: -20px;
}
.info_label .mb40 {
    margin-bottom: 40px;
}

/* ラベルに枠線あり */
#info_250903 .info_label img,
#info_250904 .info_label img {
    border: 1px solid #8d8d8d;
}

/* 横幅調整 */
.info_label img.w600 {
    max-width: 600px;
}
.info_label img.w95p {
    max-width: 95%;
}

/* 縦幅調整 */
.info_label img.h500 {
    max-height: 500px;
    width: auto;
}
@media screen and (max-width: 1200px) {
    .info_label img.h500 {
        max-height: 400px;
    }
}
@media screen and (max-width: 1000px) {
    .info_label img.h500 {
        max-height: 300px;
    }
}
@media screen and (max-width: 900px) {
    .info_label img.h500 {
        max-height: 450px;
    }
}

/* 枠内縦中央 */
.info_table .flex.align_center {
    align-items: center;
}

@media screen and (max-width: 1200px) {
    .info_label img.w600 {
        max-width: 90%;
    }
}

@media screen and (max-width: 767px) {
    .info_label {
        text-align: center;
        padding: 0;
    }
    .info_label img {
        max-width: 80%;
    }
    .info_label img.w95p {
        max-width: 90%;
    }
}

/*****************************
月別ボタンでタブ切り替え
*****************************/
@media screen and (max-width: 767px) {

    /* タブ設定 */
    .tab_nav {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .tab_nav .tab_month {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9rem;
        font-weight: bold;
        border: 2px solid #208a76;
        border-radius: 10px;
        background-color: #fff;
        margin: 10px;
        width: 50px;
        height: 30px;
        cursor: pointer;
    }
    .tab_nav .tab_month.select {
        border: 4px solid #208a76;
        background-color: #d2f7ef;
    }
    
    .bg_hanpu_info {
        display: none;
    }
    .bg_hanpu_info.open {
        display: block;
    }

}

/*****************************
フッター
*****************************/
#footer {
    background-color: #eee;
    width: 100%;
    padding: 12px 0;
    text-align: center;
}
.copyright {
    font-size: 86%;
    text-align: center;
}