/*** ========================================================================= 
     余白
========================================================================= ***/
.mt1em {
  margin-top: 1em !important;
}
.mt2em {
  margin-top: 2em !important;
}
.mt3em {
  margin-top: 3em !important;
}
.mb2em {
  margin-bottom: 2em !important;
}
.mb3em {
  margin-bottom: 3em !important;
}
.mt5em {
  margin-top: 5em !important;
}
/*** ========================================================================= 
     文字
========================================================================= ***/
.fw-bold {
  font-weight: bold;
}
.fc-pink {
  color: #ee4b89;
}
.link-bottom {
  border-bottom: 1px solid #3097d1;
 color: #3097d1;
}
/*** ========================================================================= 
     flexボックス 基本
========================================================================= ***/
.flex-box {
  display: flex;
}
@media screen and (max-width: 767px) {
  .flex-box {
    flex-direction: column; /* モバイルでは縦並び */
  }
}
.flex-wrap {
  flex-wrap: wrap;
}
/*** ========================================================================= 
     flexbox 2カラム 余白あり 
========================================================================= ***/
.flex-col2 {
  flex-basis: calc(50% - 10.5px);
  margin-right: 21px;
  margin-bottom: 21px;
}
.flex-col2:nth-child(2n) {
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .flex-col2,
  .flex-col2:nth-child(2n) {
    flex-basis: auto;
    width: 100%;
    margin-right: 0;
  }
}
/*** ========================================================================= 
     flexbox 3カラム 余白あり   
========================================================================= ***/
.flex-col3 {
  flex-basis: calc(33.33% - 14px);
  margin-right: 21px;
  margin-bottom: 21px;
}
.flex-col3:nth-child(3n) {
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .flex-col3,
  .flex-col3:nth-child(3n) {
    flex-basis: auto;
    width: 100%;
    margin-right: 0;
  }
}
/*** ========================================================================= 
     デザイン
========================================================================= ***/
.midashi-bb2 {
  display: inline-block;
  width: 100%;
  padding: 0.4em 1em;
  color: #ffffff;
  background-color: #222222;
}
.midashi-bb2 a {
  color: #ffffff;
}
/*** ========================================================================= 
     商品一覧でのSOLD OUT表示を有効にする
========================================================================= ***/
.p-product-block ul.__product li.__item.__is-soldout .__photo .__soldout,
.main.main--product-list section.__list.__list--row ul.__product li.__item.__is-soldout a table tr td.__photo .__soldout { 
  display: block;
 }
.p-product-block ul.__product li.__item.__is-soldout .__photo .__soldout:before,
.main.main--product-list section.__list.__list--row ul.__product > li.__item.__is-soldout a table tr td.__photo .__soldout:before {
  background-image: linear-gradient(rgba(128, 128, 128, 0.1), rgba(128, 128, 128, 0.4));
}
.p-product-block ul.__product li.__item.__is-soldout .__photo .__soldout:after,
.main.main--product-list section.__list.__list--row ul.__product > li.__item.__is-soldout a table tr td.__photo .__soldout:after {  
  content: 'SOLD OUT' ;
  font-size: 1.3em; 
  color: #fff;
  top: auto;
  bottom: 2%;
}
/*** ========================================================================= 
     YouTube(iframe)レスポンシブ
========================================================================= ***/
.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}