/* =========================
  News
========================= */
.section--title{
  background-color: #f3f4f6;
  padding: 5px 10px 0 0;
}
.section--title .section__inner{
  padding: 10px 16px 5px;
}
.section--title .section__title{
  background-image: url(../images/icon_h_news.svg);
  background-repeat: no-repeat;
  padding-left: 30px;
  background-size: 25px;
  background-position: left center;
  font-size: 1.2em;
}


/* =====================
お知らせ
===================== */

.section--news{
  background-color: #fff;
}

.news-tabs__nav{
display:flex;
gap:10px;
margin-bottom:20px;
padding-top:15px;
overflow-x:auto;
font-weight: bold;
}

.news-tab{
padding:7px 18px;
border:1px solid #898989;
border-bottom: 0px;
border-radius:20px;
background:#fff;
cursor:pointer;
white-space:nowrap;
font-size: .9em;
color: #333;
}

/* active */
.news-tab.is-active{
border:1px solid #ccc;
color:#00a0dc;
}

.news-tab-content{
display:none;
}

.news-tab-content.is-active{
display:block;
}
.form-note{
font-size:.8rem;
color:#666;
margin-top:6px;
}

.news-tabs__nav{
margin-bottom:0; 
border-bottom:none;
}

.news-tabs__contents{
border:1px solid #ccc;
border-radius:0 3px 3px 3px;
padding:20px 20px 10px;
margin-top:-1px;
margin-bottom:25px;
}

/*tab デザイン*/
.news-tab{
border:1px solid #ccc;
border-radius:3px 3px 0 0; 
background:#f7f7f7;
position:relative;
border-bottom: 0;
}

/*active タブ*/
.news-tab.is-active{
background:#fff;
border-bottom:1px solid #fff; 
z-index:2;
}

/* inactive */
.news-tab:not(.is-active){
background:#f7f7f7;
}

@media (max-width:768px){
  .news-tabs__nav {
    gap: 5px;
  }
  .news-tab {
      padding: 7px 13px;
      width: 50%;
  }
  .news-tabs__contents {
    border-radius: 0 0 3px 3px;
}
}

.inpWid200{
  max-width: 200px;
}

/* =====================
お知らせ あなたへのお知らせ
===================== */
.status-name{
  color:#c43737;
  font-weight: bold;
}

.news--ttl {
    background-position-y:center;
    background-color: #efefef;
    padding: 7px 0 5px 38px;
}
.my-news__delivery,.my-news__order,.my-news__reserve{
  margin-bottom:25px;
}

/*配送関連*/
.my-news__delivery .news--ttl {
    
    background-image: url(../images/news/icon_nd00.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position-x:10px;
}
.news--status{
margin:10px 5px;
}
.news--status ul{
  margin-left:10px;
}
.status-item {
    padding: 2px 5px 2px 0;
    border-right: solid 1px #ddd;
    font-weight: bold;
    font-size: .9em;
    margin-right: 10px;
}
.status-name{
    font-weight: bold;
    font-size: 1.1em;
    color:#c43737;
    line-height: 1.5;
}
.news--status .externalLink{
background-position:left center;
}

.news--status__red{
  border:solid 1px #dd9292;
  background-color:#f4e9e9;
  text-align: center;
  padding: 15px 15px 25px;
}

.is-preparing .status-name{
    padding: 7px 0 5px 30px;
    background-image: url(../images/news/icon_nd01.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position:left center;
}
.is-shipped .status-name{
    padding: 7px 0 5px 30px;
    background-image: url(../images/news/icon_nd02.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position:left center;
}
.is-in-transit .status-name{
    padding: 7px 0 5px 30px;
    background-image: url(../images/news/icon_nd03.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position:left center;
}
.is-delivered .status-name{
    padding: 7px 0 5px 30px;
    background-image: url(../images/news/icon_nd04.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position:left center;
}

/*注文・決済関連*/
.my-news__order .news--ttl {
    background-image: url(/images/icon_m02.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position-x:10px;
}

.is-completed .status-name{
    padding: 7px 0 5px 30px;
    background-image: url(../images/news/icon_no01.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position:left center;
}

.is-error .status-name{
    padding: 7px 0 5px;
  
}
.is-error .status-name span{
    padding: 7px 0 5px 30px;
    background-image: url(../images/news/icon_no02.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position:left center;
}

/*予約関連*/
.my-news__reserve .news--ttl {
    background-image: url(/images/icon_bd01_rs.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position-x:10px;
}

.is-confirmed .status-name{
    padding: 7px 0 5px 30px;
    background-image: url(../images/news/icon_nr01.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position:left center;
}

.is-today .status-name{
    padding: 7px 0 5px;
  
}
.is-today .status-name span{
    padding: 7px 0 5px 30px;
    background-image: url(../images/news/icon_nr02.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position:left center;
}

/*要対応通知*/
.my-news__action-required{
text-align: center;

}
.is-action-required{
padding: 20px 0;
}

.my-news__action-required .news--ttl{
  background-color: #dd9292;
  padding: 7px;
  text-align: center;
  border-radius: 20px;
  color: #fff;
}

.my-news__action-required .news--ttl span{
    background-image: url(../images/news/icon_na.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position-x:0px;
    padding-left: 23px;
}

.is-action-required li span{
  background-color: #c43737;
  padding: 5px 10px;
  color:#fff;
  font-weight: bold;
  margin-right: 10px;
}

/* =====================
お知らせ 運営からのお知らせ
===================== */
.news__important{
  border-radius: 20px;
  padding: 4px 8px;
  font-size: .8em;
  font-weight: bold;
  background-color: #c43737;
  color: #fff;
}
.news__news{
  border-radius: 20px;
  padding: 4px 8px;
  font-size: .8em;
  font-weight: bold;
  background-color: #00a0dc;
  color: #fff;
}
.operator-news__list li{
border-bottom:dashed 1px #919191;
padding-bottom:10px;
margin-bottom:15px;
}