/** Shopify CDN: Minification failed

Line 324:0 Unexpected "#"

**/
.video-container {
  margin: 0 auto;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(100vh - 84.8px);
}

.video-wrap::after {
      content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    top: 0;
    left: 0;
    z-index: 1;
}

@media screen and (max-width: 989px) {

    .video-wrap {
       min-height: calc(100vh - 64px);
    }
}

video {
  min-width: 100%;
  min-height: calc(100vh - 84.8px);
  position: absolute;
}

@media screen and (max-width: 989px) {

    video {
       min-height: calc(100vh - 64px);
    }
}

.video-texts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  
}

.video-text-h2 {
  color: #fff;
  font-size: 46px;
}

@media screen and (max-width:789px) {

  .video-text-h2 {
    font-size: 30px;
  }
}

.video-text-h3 {
  color: #fff;
  font-size: 18px;
  white-space: nowrap;
}

@media screen and (max-width:789px) {

  .video-text-h2 {
    font-size: 13px;
  }
}

/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  video {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}

/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
  video {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* TOPページファーストビュー下の画像&テキストセクションのh2の上に疑似要素で英字を設置*/

#shopify-section-template--18532675977475__image_with_text_JetKxt h2 {
  position: relative;
}

#shopify-section-template--18532675977475__image_with_text_JetKxt h2::before {
  content: "What`s HAKATAORI?";
  font-size: 14px;
  position: absolute;
  left: 0;
  top: -25px;
  white-space: nowrap;
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  color: #f20713;
  letter-spacing: 0.4px;
}

/* カテゴリーから選ぶの見出しに英字を設置*/

#SectionHeading-template--18532675977475__collection_list_xnRYFR {
  position: relative;
}

#SectionHeading-template--18532675977475__collection_list_xnRYFR::before {
  content: 'Item Categories';
  font-size: 14px;
  position: absolute;
  left: 0;
  top: -25px;
  white-space: nowrap;
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  color: #f20713;
  letter-spacing: 0.2px;
  left: 50%;
  transform: translateX(-50%);
}

/*　人気商品の見出しに英字を設置 */

#collection-template--18532675977475__featured_collection div h2 {
  position: relative;
}

#collection-template--18532675977475__featured_collection div h2::before {
    content: 'Best Seller';
  font-size: 14px;
  position: absolute;
  left: 0;
  top: -25px;
  white-space: nowrap;
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  color: #f20713;
  letter-spacing: 0.2px;
  left: 50%;
  transform: translateX(-50%);
}

/*KIBIRUからのお知らせの見出しに英字を設置 */

#SectionHeading-template--18532675977475__featured_blog_NPFF8H {
  position: relative;
}

#SectionHeading-template--18532675977475__featured_blog_NPFF8H::before {
  content: 'News&Blogs';
  font-size: 14px;
  position: absolute;
  left: 0;
  top: -25px;
  white-space: nowrap;
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  color: #f20713;
  letter-spacing: 0.2px;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 1.6px;
}

/*KIBIRUとはページのファーストビューのテキスト */

#Banner-template--18532676108547__image_banner_EGBw8z h2 {
    position: relative;
  padding-bottom: 28px;
  line-height: 1.6;
}

#Banner-template--18532676108547__image_banner_EGBw8z h2::after {
  content: 'Information';
  font-size: 20px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
} 

@media screen and (max-width:789px) {
#Banner-template--18532676108547__image_banner_EGBw8z h2 {
  font-size: 32px;
}

  #Banner-template--18532676108547__image_banner_EGBw8z h2::after {
    font-size: 14px;
  }
}
  


/*人気商品に1,2,3ランキング番号の付与 */

#Slide-template--18532675977475__featured_collection-1 {
  position: relative;
}

#Slide-template--18532675977475__featured_collection-1::after {
     content: '1';
  /* background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
 background-repeat: no-repeat; */
  background: linear-gradient(45deg, #c0b283 0%, #c0b283 45%, #FEE9A0 70%, #c0b283 85%, #c0b283 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
 color: #fff;
 position: absolute;
 left: 0;
 top: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 width: 40px;
 height: 40px;
}

@media screen and (max-width:789px) {
  #Slide-template--18532675977475__featured_collection-1::after {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

#Slide-template--18532675977475__featured_collection-2 {
position: relative;
}

#Slide-template--18532675977475__featured_collection-2::after {
    content: '2';
background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
 color: #fff;
 position: absolute;
 left: 0;
 top: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 width: 40px;
 height: 40px;
}

@media screen and (max-width:789px) {
  #Slide-template--18532675977475__featured_collection-2::after {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

#Slide-template--18532675977475__featured_collection-3 {
 position: relative;
}

#Slide-template--18532675977475__featured_collection-3::after {
  content: '3';
 background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
 color: #fff;
 position: absolute;
 left: 0;
 top: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 width: 40px;
 height: 40px;
}

@media screen and (max-width:789px) {
  #Slide-template--18532675977475__featured_collection-3::after {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

##Slide-template--18532675977475__featured_collection-4 {
  position: relative;
}

#Slide-template--18532675977475__featured_collection-4::after {
content: '4';
background-color: #121212;
 color: #fff;
 position: absolute;
 left: 0;
 top: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 width: 40px;
 height: 40px;
}

@media screen and (max-width:789px) {
  #Slide-template--18532675977475__featured_collection-4::after {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

/*KIBIRUとはページの背面柄 */
.bg-information {
  background: url('//kibiru-hakataori.myshopify.com/cdn/shop/files/24218510_m.jpg?v=4637759195685490722') no-repeat center / cover;
  background-attachment: fixed;
}


/*KIBIRUとはページの『柄の意味や想い』見出し装飾 */
#shopify-section-template--18532676108547__multicolumn_gLF4CB h2 {
  position: relative;
}

#shopify-section-template--18532676108547__multicolumn_gLF4CB h2::before {
   content: 'Meaning & hope';
  font-size: 14px;
  position: absolute;
  left: 0;
  top: -25px;
  white-space: nowrap;
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  color: #f20713;
  letter-spacing: 0.2px;
  left: 50%;
  transform: translateX(-50%);
}

/*========= スクロールダウンのためのCSS ===============*/

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2vh;
  /*全体の高さ*/
  height: 50px;
  z-index: 200;
}

/*Scrollテキストの描写*/
.scrolldown1 span {
  /*描画位置*/
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400;
  top: -8vh;
  /*テキストの形状*/
  color: #fff;
  letter-spacing: 0.05em;
  /* writing-mode: vertical-rl; */
  font-size: 14px;
  white-space: nowrap;
}

@media screen and (max-width:789px) {
.scrolldown1 span {
  font-size: 10px;
}
}

/* 線の描写 */
.scrolldown1::after {
  content: "";
  /*描画位置*/
  position: absolute;
  top: -50px;
  /*線の形状*/
  width: 1px;
  height: 30px;
  background: #fff;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 2s ease-in-out infinite;
  opacity: 0;
 left: 50%;
    transform: translateX(-50%);

}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0px;
    top: -35px;
    opacity: 0;

  
  
    
  }
  30% {
    height: 30px;
    opacity: 1;

    
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0;


  }
}


/*ネーム入りセクションの背景を変更する場合 */
/* #Slider-template--18608780869868__multicolumn_aGafBE {
  background: #050574;
}
p {
  color: #fff;
}

h2 {
  color: #fff;
}

a {
  color: #fff;
} */