/* CSS Document */
/*アニメーション*/
section.about div.about_in_block div.a_f_img.wcvisible img,
div.recommendation_block > article.wcvisible div.r_p_img img,
section.reason > article.wcvisible div.r_img figure img{
  animation: fade 2.3s cubic-bezier(.115,.405,.24,1) 0s forwards;
}

/*ページタイトル*/
section.page_title h1.contents_title_center::before{
  content: "Tomato Shop"
}
/*コンテンツ*/
section.about div.about_in_block div.a_f_text div.time_wrap dl{
  border-top: 1px solid #26a8e2;
  border-bottom: 1px solid #26a8e2;
}
section.about div.about_in_block div.a_f_text div.time_wrap dl dt{
  color: #26a8e2;
}
/*美味しい理由*/
section.reason{
  padding: var(--headerHeight) 0;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
/*
body[wc-view-type="sp"] section.reason{
  padding: var(--headerHeight) 7vw;
}
body[wc-view-type="tb"] section.reason,
body[wc-view-type="tb-l"] section.reason{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] section.reason{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2)
}*/
body[wc-view-type="sp"] section.reason{
  padding: var(--headerHeight) 7vw 26vw 7vw;
}
body[wc-view-type="tb"] section.reason{
  padding: var(--headerHeight) 10vw 26vw 10vw;
}
body[wc-view-type="tb-l"] section.reason{
  padding: var(--headerHeight) 10vw 12vw 10vw;
}
body[wc-view-type="pc"] section.reason{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2) 12vw calc((100vw - 1100px) / 2);
}
section.reason h1.contents_title_center{
}
section.reason h1.contents_title_center::before{
  content: "Reason";
}
section.reason > article{
  display: flex;
  margin-top: calc(var(--headerHeight) / 2);
}
body[wc-view-type="sp"] section.reason > article{
  flex-direction: column;
}
body:not([wc-view-type="sp"]) section.reason > article:nth-of-type(even){
  flex-direction: row-reverse;
}
section.reason > article div.r_text{
  box-sizing: border-box;
}
body[wc-view-type="sp"] section.reason > article div.r_text{
  padding: 0 1rem 1rem 1rem;
}
body:not([wc-view-type="sp"]) section.reason > article div.r_text{
  width: 50%;
}
body[wc-view-type="tb"] section.reason > article:nth-of-type(odd) div.r_text{
  padding: 1rem 1rem 1rem 0;
}
body[wc-view-type="tb"] section.reason > article:nth-of-type(even) div.r_text{
  padding: 1rem 0 1rem 1rem;
}
body[wc-view-type="tb-l"] section.reason > article:nth-of-type(odd) div.r_text{
  padding: 2rem 2rem 2rem 0;
}
body[wc-view-type="tb-l"] section.reason > article:nth-of-type(even) div.r_text{
  padding: 2rem 0 2rem 2rem;
}
body[wc-view-type="pc"] section.reason > article:nth-of-type(odd) div.r_text{
  padding: 2rem 2rem 2rem 0;
}
body[wc-view-type="pc"] section.reason > article:nth-of-type(even) div.r_text{
  padding: 2rem 0 2rem 2rem;
}
section.reason > article div.r_text > h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 1rem;
	-ms-filter: blur(4px);
  filter: blur(4px);
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out,filter 1000ms ease-out;
  transition: opacity 1000ms ease-out,filter 1000ms ease-out;
}
section.reason > article.wcvisible div.r_text > h1{
	-ms-filter: blur(0);
  filter: blur(0);
  opacity: 1;
}
body:not([wc-view-type="sp"]) section.reason > article div.r_text > h1{
  margin-bottom: 1.5rem;
}
section.reason > article div.r_text > h1 span.r_num{
  display: table;
  color: #26a8e2;
  border-bottom: 1px solid #26a8e2;
  box-sizing: border-box;
  font-size: 1rem;
  padding: 0.25rem 1rem 0.25rem 1rem;
  margin-bottom: 0.5rem;
  border-top: 1px solid #26a8e2;
  letter-spacing: 0.13em;
}
body:not([wc-view-type="sp"]) section.reason > article div.r_text > h1 span.r_num{
  margin-bottom: 1.5rem;
}
section.reason > article div.r_text > h1 span.r_num span{
  font-size: 1.25rem;
}
section.reason > article div.r_text > p{
  line-height: 1.8rem;
  color: #333;
	-ms-filter: blur(4px);
  filter: blur(4px);
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out,filter 1000ms ease-out;
  transition: opacity 1000ms ease-out,filter 1000ms ease-out;
}
section.reason > article.wcvisible div.r_text > p{
	-ms-filter: blur(0);
  filter: blur(0);
  opacity: 1;
}
section.reason > article div.r_img{
}
body:not([wc-view-type="sp"]) section.reason > article div.r_img{
  width: 50%;
}
section.reason > article div.r_img figure{
}
section.reason > article div.r_img figure picture{
  width: 100%;
  height: 100%;
  display: block;
}
section.reason > article div.r_img figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
section.reason > article.wcvisible div.r_img figure img{
  -webkit-mask-image: url("/img/animation/ani_image.webp");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: auto 200%;
  -webkit-mask-position: center bottom;
  z-index: 0;
  mask-image: url("/img/animation/ani_image.webp");
  mask-mode: alpha;
  mask-position: center bottom;
  mask-repeat: no-repeat;
  mask-size: auto 200%;
  opacity: 1;
}
body[wc-view-type="sp"] section.reason > article div.r_img figure img{
  height: 55vw;
}
body[wc-view-type="tb"] section.reason > article div.r_img figure img{
  height: 40vw;
}
body[wc-view-type="tb-l"] section.reason > article div.r_img figure img{
  height: 30vw;
}
body[wc-view-type="pc"] section.reason > article div.r_img figure img{
  height: 350px;
}
/*おすすめ商品*/
section.recommendation{
  background-color: #fff;
}
body[wc-view-type="sp"] section.recommendation{
  padding: var(--headerHeight) 0 26vw 0;
}
body[wc-view-type="tb"] section.recommendation{
  padding: var(--headerHeight) 10vw 26vw 10vw;
}
body[wc-view-type="tb-l"] section.recommendation{
  padding: var(--headerHeight) 10vw 12vw 10vw;
}
body[wc-view-type="pc"] section.recommendation{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2) 12vw calc((100vw - 1100px) / 2);
}
div.recommendation_block > article{
  border: solid 1px #26a8e2;
}
div.recommendation_block > article div.r_p_text > p.r_p_money{
  color: #26a8e2;
}
div.recommendation_block > article div.r_p_text > p.r_p_money span.tani{
  color: #26a8e2;
}
div.recommendation_block > article div.r_p_text > span.more{
  background-color:#26a8e2;
}
div.recommendation_block > article div.r_p_text > div.btn a{
  background-color:#26a8e2;
}