/*
Theme Name:hello-child
Template:hello-elementor
Version:1.0
*/
html,body{overflow-x: hidden;}
/*Browser リセット*/
img {image-rendering: -webkit-optimize-contrast;}/*ぼやけ対策*/
.invert_img img{filter: invert(1);}

/*Variation Swatchesにした際にラベルに色が付くのを解除*/
body.single-product table.variations td.label{background-color: inherit;}

/***********************
Woocommerce css解除
***********************/
.woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th{
background: #fbfbfb !important;
}
table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th{
background: #ffffff !important;
}
.woocommerce table td{text-indent: 10px;}
table td, table th{border: none !important;}



/*********************
価格サイズ・カラー調整
*********************/
/*デフォルトカラー*/
.woocommerce div.product p.price, .woocommerce div.product span.price{
color:#000000;
}

/*セール価格時の元の金額*/
.price del bdi{
  font-size: 40%;
}

/*カートへ追加ボタンの前に表示される金額の調整*/
.single_variation_wrap .woocommerce-variation-price span.price {
  font-size: 20px;
  color: #000000;
  border: none;
  font-weight: 700;
}

.single_variation_wrap .woocommerce-variation-price span.price del{
  display: block;
  font-size: 15px;

}
.single_variation_wrap .woocommerce-variation-price span.price ins{
  font-size: 40px;
  text-decoration: none;
}

/*価格の接尾辞のサイズ調整*/
.woocommerce-price-suffix{
  font-size: 20%;
  display: inline-block;
}

/*Elementorループのカートへ追加ボタン非表示*/
.elementor-widget-woocommerce-products .products.elementor-grid li .add_to_cart_button{
  display: none;
}




/*在庫表示のフォントカラー*/
.woocommerce div.product .stock{
  color: #000000;
}


/*************************
Elementor Sticky スクロールでフォントカラー変更
※Hairsalon
*************************/

body.page-id-111 .elementor-sticky--effects.header_container a{
  color:#000000 !important;
}
body.page-id-111 .elementor-sticky--effects.header_container img{
  filter: invert(1) !important;
}


/*************************
パーツ
**************************/
/*矢印*/
.new_arrow:after {
    content: "";
    position: absolute;
    bottom: 12px;
    right: 20px;
    display: inline-block;
    width: 50px;
    height: 7px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    transform: skewX(45deg);
}
.new_arrow:hover:after{
animation: sdl2 2s cubic-bezier(1, 0, 0, 1) 1;
}
/*スクロール表示*/
.scroll_down{
display: inline-block;
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 110px;
  overflow: hidden;
  color: #000000;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}

.scroll_down:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #000000;
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}
.scroll_down.wh:after{background: #ffffff;}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  35% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  35.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  70%, 100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
@keyframes sdl2 {
  0% {
    transform: scale(0, 1) skewX(45deg);

  }
  35% {
    transform: scale(1, 1) skewX(45deg);

  }
  35.1% {
    transform: scale(1, 1) skewX(45deg);

  }
  70%, 100% {
    transform: scale(1, 1) skewX(45deg);

  }
}