@charset "utf-8";
/* CSS Document */

/* ----------
base
---------- */
div#base{
  width: 1200px;
} 
#mainContainer{
  color: #333;
  font: 500 14px 'Noto Serif JP', serif;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: left;
}
@media screen and (max-width: 768px){
  div#base{
    width: 100%;
  } 
}
/* ----------
layout
---------- */
/* ラッパー */
.l_wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px){
  .l_wrapper {
    width: 100%;
  }
}

/* メインコンテンツ */
.l_mainContainer{
  order: 2;
  width: 970px;
}
@media screen and (max-width:768px){
  .l_mainContainer { width: 100%; }
  .l_wrapper { display: block; }
}

/* サイドナビ */
.l_sideNav{
  width: 200px;
  order: 1;
}

/* オーバーライド */
.l_mainContainer{
  width: 930px;
}
@media screen and (max-width:768px){
  .l_mainContainer { width: 100%; }
}

/* CSS */
/* ヒーローズエリア */
.m_herosArea{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 40px;
}
.m_herosArea__logo{
  flex: 0 0 230px;
}
.m_herosArea__heading{
  margin-left: 32px;
  flex: 1 1 auto;
}
@media screen and (max-width: 768px){
  .m_herosArea{
    display: block;
    text-align: center;
  }
  .m_herosArea__heading{
    margin: 16px 0 0;
  }
}

/* 見出し */
.m_heading{}
.m_heading__ttl{
  font-weight: bold;
  line-height: 1.4;
}
.m_heading--primary{
  position: relative;
  display: inline-block;
  padding: 0 32px;
}
.m_heading--primary::before{
  content: "";
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  z-index: -1;
  display: block;
  height: 2px;
  background: #4c2607;
  transform: translateY(-50%);
}
.m_heading--primary .m_heading__ttl{
  font-size: 24px;
  padding: 0 12px;
  color: #4c2607;
  background: #fff;
}
.m_heading--secondary{
  position: relative;
  margin-bottom: 40px;
  padding-left: 40px;
  border-bottom: 1px solid #4c2607;
}
.m_heading--secondary::before{
  content: "\f0d1";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  color: #4c2607;
  line-height: 1;
  font-size: 32px;
  font-family: "FontAwesome";
}
.m_heading--secondary .m_heading__ttl{
  font-size: 20px;
  color: #4c2607;
}

/* 送料 */
.m_postage{}
.m_postage__free{
  color: #4c2607;
  font-weight: bold;
  font-size: 24px;
}
.m_postage__free + .m_postage__table{
  margin-top: 20px;
}
.m_postage__table{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.m_postage__heading{
  padding: 16px 20px;
  border: 1px solid;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  background: #4c2607;
}
.m_postage__heading--price{
  width: 220px;
}
.m_postage__body{}
.m_postage__body--even{
  background: #fef6f1;
}
.m_postage__data{
  padding: 12px 20px;
  border: 1px solid;
  vertical-align: bottom;
  font-size: 16px;
}
.m_postage__data--price{
  text-align: right;
  font-size: 20px;
}
.m_postage__footer{
  margin-top: 16px;
  font-size: 16px;
}
@media screen and (max-width: 768px){
  .m_postage__heading{
    padding: 12px;
    font-size: 16px;
  }
  .m_postage__heading--price{
    width: 160px;
  }
  .m_postage__data{
    padding: 12px;
    font-size: 14px;
  }
  .m_postage__data--price{
    text-align: right;
    font-size: 16px;
  }
}
@media screen and (max-width: 599px){
  .m_postage__free{
    font-size: 16px;
  }
  .m_postage__heading--price{
    width: 90px;
  }
}
/**********
utility
**********/
/*横幅*/
.u_col1{width:8.333%;}
.u_col2{width:16.667%;}
.u_col3{width:25%;}
.u_col4{width:33.333%;}
.u_col5{width:41.666%;}
.u_col6{width:50%;}
.u_col7{width:58.333%;}
.u_col8{width:66.666%;}
.u_col9{width:75%;}
.u_col10{width:83.33%;}
.u_col11{width:91.666%;}
.u_col12{width:100%;}
@media screen and (max-width:768px){
  .u_resMdCol1{width:8.333%;}
  .u_resMdCol2{width:16.667%;}
  .u_resMdCol3{width:25%;}
  .u_resMdCol4{width:33.333%;}
  .u_resMdCol5{width:41.666%;}
  .u_resMdCol6{width:50%;}
  .u_resMdCol7{width:58.333%;}
  .u_resMdCol8{width:66.666%;}
  .u_resMdCol9{width:75%;}
  .u_resMdCol10{width:83.33%;}
  .u_resMdCol11{width:91.666%;}
  .u_resMdCol12{width:100%;}
}
@media screen and (max-width:599px){
  .u_resSmCol1{width:8.333%;}
  .u_resSmCol2{width:16.667%;}
  .u_resSmCol3{width:25%;}
  .u_resSmCol4{width:33.333%;}
  .u_resSmCol5{width:41.666%;}
  .u_resSmCol6{width:50%;}
  .u_resSmCol7{width:58.333%;}
  .u_resSmCol8{width:66.666%;}
  .u_resSmCol9{width:75%;}
  .u_resSmCol10{width:83.33%;}
  .u_resSmCol11{width:91.666%;}
  .u_resSmCol12{width:100%;}
}

/* 間隙 */
.u_mb40{
  margin-bottom: 40px;
}
.u_mb64{
  margin-bottom: 64px;
}
.u_pb40{
  padding-bottom: 40px;
}

/* フォントサイズ */
.u_fs12{
  font-size: 12px;
}

/*表示*/
.u_hide{
  display: none;
}
@media screen and (max-width:768px){
  .u_resMdHide{
    display: none;
  }
  .u_resMdInline{
    display: inline;
  }
}

@media screen and (max-width:599px){
  .u_resSmHide{
    display: none;
  }
  .u_resSmInline{
    display: inline;
  }
}