@charset "utf-8";

html, body {
    background-image: url() !important;
    background-color: #eae9e5 !important;
}

.category-nav {
    background-color: #406080;
}

#header .category-nav li ul li a {
    background-color: #406080;
}

.contents-block-title {
    background: linear-gradient(to bottom, #406080 0%, #4c647b 100%);
}

.contents-block-title-img-top {
    background-image: url(../img/common/block-title-img-top_3.png);
    left: calc(50% - 18px);
}

.contents-block-title-img-bottom {
    background-image: url(../img/common/block-title-img-bottom_3.png);
    left: calc(50% - 11px);
}

.contents-item-name h3 {
    width: 100%;
    border: none;
    background-color: #eae9e5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 58.41px !important;
    font-size: 1.25em;
}

.recommend-350-coffee .contents-item-name h3, .recommend-180-coffee .contents-item-name h3, .monthly-recommend-coffee .contents-item-name h3 {
    border: none;
    background-color: #eae9e5;
    box-sizing: border-box;
    z-index: 1 !important;
    clear: both;
    min-height: 56.31px !important;
    display: flex;
    align-items: flex-start;
    padding: 0.5rem;
    font-size: 1.1em;
}

.monthly-premium-coffee,
.monthly-set-coffee,
.recommend-350-coffee,
.recommend-180-coffee,
.monthly-recommend-coffee {
    margin-bottom: 4rem !important;
}

.monthly-premium-coffee {
    display: flex;
    flex-wrap: wrap;
}

.monthly-premium-coffee a {
    box-sizing: border-box;
}

.monthly-premium-coffee a:nth-of-type(1) {
  position: relative;
}

/* 右側の線（高さの90%にして、上下に5%ずつ余白を作る例） */
.monthly-premium-coffee a:nth-of-type(1)::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 90%;     /* 高さを90%にする */
  width: 2px;      /* 線の太さ */
  background-color: #406080;
}

/* 下側の線（幅の90%にして、左右に5%ずつ余白を作る例） */
.monthly-premium-coffee a:nth-of-type(1)::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;      /* 幅を90%にする */
  height: 2px;     /* 線の太さ */
  background-color: #406080;
}

.monthly-premium-coffee a:nth-of-type(2) {
  position: relative;
}

/* 下側の線（幅の90%にして、左右に5%ずつ余白を作る例） */
.monthly-premium-coffee a:nth-of-type(2)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90%;      /* 幅を90%にする */
  height: 2px;     /* 線の太さ */
  background-color: #406080;
}

.monthly-premium-coffee a:nth-of-type(3) {
  position: relative;
}

/* 右側の線（高さの90%にして、上下に5%ずつ余白を作る例） */
.monthly-premium-coffee a:nth-of-type(3)::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 90%;     /* 高さを90%にする */
  width: 2px;      /* 線の太さ */
  background-color: #406080;
}

@media screen and (max-width: 1000px) {
    .monthly-premium-coffee a:nth-of-type(1)::before,
    .monthly-premium-coffee a:nth-of-type(1)::after,
    .monthly-premium-coffee a:nth-of-type(2)::after,
    .monthly-premium-coffee a:nth-of-type(3)::before {
        content: none;
    }
}



.contents-block-4clm .contents-item-img img {
    margin-bottom: 1rem;
}

.contents-body-4clm .contents-item-text {
    font-weight: normal;
}

.item_name {
    border: none;
    background-color: initial !important;
    box-sizing: border-box;
    font-size: 1.1em;
}

@media screen and (max-width: 1000px) {
    .contents-block-4clm .contents-item-name {
        width: 100%;
    }
}

.contents-item-price-set {
    border-bottom: 2px solid #406080;
}

.information .contents-block-title h2 {
    color: #406080;
}

.contents-block-title .news-title-h2 {
    border-top: 2px solid #406080;
    border-bottom: 2px solid #406080;
}

.contents-item-capacity {
    font-weight: normal;
}

.contents-block-4clm .contents-item-detail {
    display: flex;
    flex-direction: column;
    height: 100%
}

.contents-block-4clm .contents-item-price {
    margin-top: auto !important;
}

@media screen and (max-width: 1000px) {
    .voice-body-sp {
        padding-bottom: 0;
    }
}

.side-block-menu {
    border: 1px solid #406080;
}

.side-block-menu-title {
    background-color: #406080;
}

.side-block-menu-panel {
    border-top: 1px solid #406080;
}

.side-collapse-item {
    border-bottom: dashed 1px #406080;
}

.side-collapse-item:last-child {
    border: none;
}

.side-block-menu-panel a, .side-block-menu-panel span {
    color: #222;
}

.inner-sidebar a {
    color: #222;
}

.side-block-ranking-coffee {
    border: 4px double #b4b1a1;
}

.side-block-ranking-food {
    border: 4px double #9b8579;
}

.side-block-ranking-coffee .ranking-1 {
    background-image: url(../img/common/icon-ranking-coffee-1_2.png);
    background-size: 30px;
}

.side-block-ranking-coffee .ranking-2 {
    background-image: url(../img/common/icon-ranking-coffee-2_2.png);
    background-size: 30px;
}

.side-block-ranking-coffee .ranking-3 {
    background-image: url(../img/common/icon-ranking-coffee-3_2.png);
    background-size: 30px;
}

.side-block-ranking-coffee .ranking-4 {
    background-image: url(../img/common/icon-ranking-coffee-4_2.png);
    background-size: 30px;
}

.side-block-ranking-coffee .ranking-5 {
    background-image: url(../img/common/icon-ranking-coffee-5_2.png);
    background-size: 30px;
}

.side-block-ranking-food .ranking-1 {
    background-image: url(../img/common/icon-ranking-food-1_2.png);
    background-size: 30px;
}

.side-block-ranking-food .ranking-2 {
    background-image: url(../img/common/icon-ranking-food-2_2.png);
    background-size: 30px;
}

.side-block-ranking-food .ranking-3 {
    background-image: url(../img/common/icon-ranking-food-3_2.png);
    background-size: 30px;
}

.side-block-ranking-food .ranking-4 {
    background-image: url(../img/common/icon-ranking-food-4_2.png);
    background-size: 30px;
}

.side-block-ranking-food .ranking-5 {
    background-image: url(../img/common/icon-ranking-food-5_2.png);
    background-size: 30px;
}

.side-block-ranking-coffee .side-block-menu-title,
.side-block-ranking-food .side-block-menu-title {
    background-color: initial;
}

.side-menu-contact a {
    background-image: url(../img/common/btn-side-otoiawase-off_2.png);
}

.side-menu-contact a:hover {
    filter: none !important;
    opacity: 0.8;
}

.side-menu-faq {
    border: none !important;
}

.side-menu-faq a {
    background-image: url(../img/common/btn-side-faq-off_2.png);
}

.side-menu-faq a:hover {
    filter: none !important;
    background-image: url(../img/common/btn-side-faq-off_2.png);
    opacity: 0.8;
}

.side-block-menu-panel-bg-white {
    background-image: url(../img/common/side-arrow-link.png);
}

.toggle-collapse {
    background-image: url(../img/common/side-arrow-open.png);
}

#btn-all, #btn-new {
    background-image: url(../img/common/side-arrow-link.png);
}

#btn-coffee {
    background-image: url(../img/common/side-arrow-close.png);
}

#calendar .calendar-table-paginate {
    background-image: url(../img/common/side-arrow-link_light.png);
}


#footer, .footer_logo_area {
    background-color: #406080;
}

.guide-wrap {
    border-top: 6px solid #406080;
}

.guid-item {
    color: #406080;
    border: 1px solid #406080;
    border-top: 4px solid #406080;
}

.guid-title {
    color: #406080;
}

.guid-title img {
    filter: brightness(0) saturate(100%) invert(36%) sepia(17%) saturate(326%) hue-rotate(11deg) brightness(98%) contrast(85%);
}

.guid-item-more {
    color: #406080 !important;
}

.guide-returned-contact {
    border: 4px solid #406080;
}

@media screen and (max-width: 1000px) {
    #page_help_guide #navi_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 1000px) {
    #page_help_guide #navi_list li {
        width: 31% !important;
        margin: 1%;
        border: 1px solid #3b4b9c;
    }
}

@media screen and (max-width: 1000px) {
    #page_help_guide #navi_list li a {
        border: none;
    }
}

@media screen and (max-width: 1000px) {
    #faq-wrap #navi_list {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 1000px) {
    #faq-wrap #navi_list li {
        width: 48%;
        border: 1px solid #3b4b9c;
        margin: 1%;
    }
}

@media screen and (max-width: 1000px) {
    #page_help_about #navi_list {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 1000px) {
    #page_help_about #navi_list li {
        width: 48%;
        margin: 1%;
        border: 1px solid #3b4b9c;
    }
}

.side-menu-contact {
    border: none;
}

.mypage-subtitle {
    background-color: #406080;
}

.local_nav ul {
    border: none !important;
}

#page_help_about .company-summary-table {
    border: 2px solid #406080;
}

#page_help_about .company-summary-table th {
    border-right: 2px solid #406080;
    border-bottom: 2px solid #406080;
}

#page_help_about .company-summary-table td {
    border-bottom: 2px solid #406080;
}

#navi_list li {
    border: 2px solid #406080;
    border-right: none;
}

#navi_list li:last-child {
    border-right: 2px solid #406080;
}

#navi_list li a {
    color: #406080;
}

/*
.foot-gototop img {
    filter: brightness(0) saturate(100%) invert(37%) sepia(54%) saturate(348%) hue-rotate(168deg) brightness(95%) contrast(96%);
}
*/

.wrap-catalog {
    margin-top: 40px;
    margin-bottom: 40px;
}
@media screen and (max-width: 1000px) {
    .wrap-catalog {
    margin-top: 0;
    }
}

.wrap-catalog .feature-body {
    width: 90%;
    margin: 0 1%;
}

.sp-present-bnr {
    clear: both;
    max-width: 349px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.detail-title {
    background-color: #406080;
}

.breadcrumb-nav {
    background: #e1dac1
}

#tradelaw_wrap {
    border: 2px solid #406080;
}

#tradelaw_wrap th {
    border-right: 2px solid #406080;
    border-bottom: 2px solid #406080;
}

#tradelaw_wrap td {
    border-bottom: 2px solid #406080;
}

.company-idea-title img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(9%) saturate(449%) hue-rotate(12deg) brightness(88%) contrast(88%);
}

.privacy-contact {
    border: 2px solid #406080;
    border-top: 4px solid #406080;
}

.privacy-contact-item-lead {
    color: #406080;
}

#sitemap-wrap dt {
    border-left: 5px solid #406080;
    background-image: url(../img/common/side-arrow-link.png);
}

#sitemap-wrap dd {
    background-image: url(../img/common/side-arrow-link.png);
}

#coffee-tayori-wrap {
    background-color: #eae9e5;
}

#coffee-tayori-wrap .coffee-tayori-date {
    border-bottom: 2px solid #406080;
}

@media screen and (max-width: 1000px) {
    .header-menu-hum-pointer span {
        background-color: #406080;
    }
}

@media screen and (max-width: 1000px) {
    .header-menu-hum-text {
        color: #406080;
    }
}

@media screen and (max-width: 1000px) {
    .header-nav-modal {
        background-color: rgb(89 134 179);
    }
}

@media screen and (max-width: 1000px) {
    .modal-btn-faq {
        background-color: #9b8579;
    }
}

@media screen and (max-width: 1000px) {
    .modal-btn-contact {
        background-color: #b4b1a1;
    }
}

@media screen and (max-width: 1000px) {
    .btn-foot-sp-contact {
        background-color: #b4b1a1;
    }
}

@media screen and (max-width: 1000px) {
    .btn-foot-sp-faq {
        background-color: #9b8579;
    }
}

@media screen and (max-width: 1000px) {
    .guid-inner-sp .guid-item {
        background-image: url(../img/common/side-arrow-link.png);
    }
}

@media screen and (max-width: 1000px) {
    .contact-body {
        border: 2px solid #406080;
        border-top: 5px solid #406080;
    }
}

@media screen and (max-width: 1000px) {
    .guide-wrap {
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 1000px) {
    #item_list dl {
        margin-top: 1rem;
    }
}

#cart_box__body .item_name {
    border: double 3px #999;
}

.cart-item-list-separate hr {
    background-color: #406080;
}

.cart-item-table-detail {
    border-right: 2px dotted #406080;
}

#confirm_main table td {
    border-top: 4px solid #406080;
}

@media screen and (max-width: 1000px) {
    .mypage-navi li {
        width: 48% !important;
        box-sizing: border-box !important;
        border: 1px solid #406080 !important;
        margin: 1%;
    }
}

#page_mypage_change #detail_box__body_inner dl {
    border-bottom: 2px dotted #406080 !important;
}

@media screen and (max-width: 1000px) {
    #page_mypage_delivery #delivery_list_box__body_inner .addr_box {
        border-top: 2px dotted #406080;
    }
}


/*割引シール*/
.contents-seal-10-off {
    background-image: url(../img/common/seal-10-off_2.png);
}

.contents-seal-20-off {
    background-image: url(../img/common/seal-20-off_2.png);
}

.contents-seal-40-off {
    background-image: url(../img/common/seal-40-off_2.png);
}

.contents-seal-29-off {
    background-image: url(../img/common/seal-29-off_2.png);
}

.contents-seal-32-off {
    background-image: url(../img/common/seal-32-off_2.png);
    top:45px;
}

.contents-seal-limit {
    background-image: url(../img/common/seal-limit_2.png);
}

.contents-seal-new-item {
    background-image: url(../img/common/seal-new-item_2.png);
}

.contents-label-10-off {
    background-image: url(../img/common/label-10-off_2.png);
    background-size: contain;
}

.contents-label-20-off {
    background-image: url(../img/common/label-20-off_2.png);
    background-size: contain;
}

.contents-label-40-off {
    background-image: url(../img/common/label-40-off_2.png);
    background-size: contain;
}

.contents-label-29-off {
    background-image: url(../img/common/label-29-off_2.png);
    background-size: contain;
}

.contents-label-32-off {
    background-image: url(../img/common/label-32-off_2.png);
    background-size: contain;
}

.contents-label-new-item {
    background-image: url(../img/common/label-new-item_2.png);
    background-size: contain;
}

.contents-label-limit {
    background-image: url(../img/common/label-limit_2.png);
    background-size: contain;
}

.contents-seal-sp-2 {
top: 45px;
}
@media screen and (max-width: 1000px) {
.contents-seal-sp-2 {
    top: 60px;
}
}