/* CSS Document */
@keyframes title_deco{
  0%{
    opacity:0;
    transform: translateY(100%);
  }
  100%{
    opacity:1;
    transform: translateY(0);
  }
}
@keyframes title{
  0%{
    opacity:0;
    transform: translateY(100%);
  }
  100%{
    opacity:1;
    transform: translateY(0);
  }
}
@keyframes obi{
  0%{
    opacity:1;
    height: 1px;
    right: 100%;
  }
  50%{
    opacity: 1;
    right: 0;
    height: 1px;
  }
  100%{
    opacity:1;
    height: 100%;
  }
}
@keyframes titleup{
  0%{
    opacity: 0;
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes contents_up{
  0%{
    opacity: 0;
    transform: translateY(5rem);
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes opa{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

/*コンテンツタイトル*/
div.title.wcvisible > p span:nth-of-type(1){
  animation: title_deco 800ms ease forwards;
}
div.title.wcvisible > p span:nth-of-type(2){
  animation: title_deco 800ms ease 200ms forwards;
}
div.title.wcvisible > p span:nth-of-type(3){
  animation: title_deco 800ms ease 300ms forwards;
}
div.title.wcvisible > p span:nth-of-type(4){
  animation: title_deco 800ms ease 400ms forwards;
}
div.title.wcvisible > p span:nth-of-type(5){
  animation: title_deco 800ms ease 500ms forwards;
}
div.title.wcvisible > p span:nth-of-type(6){
  animation: title_deco 800ms ease 600ms forwards;
}
div.title.wcvisible > p span:nth-of-type(7){
  animation: title_deco 800ms ease 700ms forwards;
}
div.title.wcvisible > p span:nth-of-type(8){
  animation: title_deco 800ms ease 900ms forwards;
}
div.title.wcvisible > p span:nth-of-type(9){
  animation: title_deco 800ms ease 1100ms forwards;
}
div.title.wcvisible > p span:nth-of-type(10){
  animation: title_deco 800ms ease 1300ms forwards;
}
div.title.wcvisible > p span:nth-of-type(11){
  animation: title_deco 800ms ease 1500ms forwards;
}
div.title.wcvisible > p span:nth-of-type(12){
  animation: title_deco 800ms ease 1700ms forwards;
}
div.title.wcvisible > p span:nth-of-type(13){
  animation: title_deco 800ms ease 1900ms forwards;
}
div.title.wcvisible > h1{
  animation: title 800ms ease forwards;
}

section.deli_top div.deli_top_box > h1.wcvisible span.back_wrap::after{
  animation: obi 1000ms ease 200ms forwards;
}
section.deli_top div.deli_top_box > h1.wcvisible span.back_wrap span.back_inner{
  animation: titleup 800ms ease 600ms forwards;
}

div.flow_block.wcvisible,
section.deli_secound div.charm_block.wcvisible{
  animation: contents_up 800ms ease 600ms forwards;
}
section.deli_top div.deli_top_box > div.deli_text p.wcvisible{
  animation: opa 800ms linear 400ms forwards;
}

body{
  font-family: "Noto Sans JP";
}
/*タイトル*/
div.title{
  flex-direction: column-reverse;
  display: flex;
  margin-bottom: 1.5rem;
}
div.title.left{
  padding-left: 2rem;
  box-sizing: border-box;
  align-items: flex-start; 
}
div.title > h1{
  font-size: 1.2rem;
  color: #29221a;
  opacity: 0;
  text-align: center;
  font-weight: 700;
}
div.title > p{
  display: flex;
  justify-content: center;
}
section.news div.title > p{
  flex-direction: column;
  width: 2.8rem;
}
div.title > p span{
  color: #29221a;
  font-size: 2.8rem;
  line-height: 1em;
  padding-bottom: 0.5rem;
  font-family: "Gothic";
  font-weight: 700;
  opacity: 0;
}
div.title > p span.margin{
  margin-left: 1rem
}
body[wc-view-type="tb-l"] div.title > p span,
body[wc-view-type="pc"] div.title > p span{
  font-size: 3.5rem;
}

/*ページタイトル*/
section.page_title{
  position: relative;
  z-index: 1;
  background-color: #fff;
  margin-top: 0 !important;
  display: flex;
}
body[wc-view-type="sp"] section.page_title{
  flex-direction: column;
}
body[wc-view-type="sp"] section.page_title div.title{
  margin-bottom: 1rem;
  padding-top: 1.5rem;
}
body:not([wc-view-type="sp"]) section.page_title div.title{
  justify-content: center;
}
body[wc-view-type="pc"] section.page_title div.title{
  margin-left: calc((100vw - 1100px) / 2);
}
section.page_title::before{
  content: "";
  position: absolute;
  left: 0;
  background-color: #f2ece0;
  z-index: -1;
}
body[wc-view-type="sp"] section.page_title::before{
  right: 0;
  height: 50vw;
  top: 0.5rem;
  border-radius: 0 5rem 0 0;
}
body[wc-view-type="tb"] section.page_title::before{
  right: 0;
  height: 30vw;
  top: 1rem;
  border-radius: 0 5rem 0 0;
}
body[wc-view-type="tb-l"] section.page_title::before{
  right: 2rem;
  height: 25vw;
  top: 1rem;
  border-radius: 0 5rem 0 0;
}
body[wc-view-type="pc"] section.page_title::before{
  right: calc((100vw - 1100px + 4rem) / 2);
  height: 225px;
}
body[wc-view-type="sp"] section.page_title div.title.sp_left{
  padding-top: 1.5rem;
  margin-bottom: 1rem;
}
body[wc-view-type="tb-l"] section.page_title div.title.sp_left,
body[wc-view-type="tb"] section.page_title div.title.sp_left{
  justify-content: center;
}
body[wc-view-type="sp"] section.page_title figure{
  width: calc(100vw - 2rem);
  margin-left: auto;
  margin-right: 0;
  height: 50vw;
}
body[wc-view-type="tb"] section.page_title figure{
  margin-top: var(--headerHeight);
  width: 50vw;
  margin-left: auto;
}
body[wc-view-type="tb-l"] section.page_title figure{
  margin-right: 4rem;
  height: 30vw;
  width: 50vw;
  margin-left: auto;
  margin-top: var(--headerHeight);
}
body[wc-view-type="pc"] section.page_title figure{
  width: 550px;
  height: 280px;
  margin-top: var(--headerHeight);
  margin-right:  calc((100vw - 1100px) / 2);
  margin-left: auto;
}
section.page_title figure picture{
  width: 100%;
  height: 100%;
  display: block;
}
section.page_title figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 0 5rem;
}
/*ボタン*/
div.btn{
  display: table;
  margin: 0 auto;
}
div.btn a{
  display: table;
  padding: 0.75rem 3.5rem 0.75rem 2rem;
  box-sizing: border-box;
  background-color: #753815;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 2rem;
  position: relative;
  z-index: 1
}
div.btn a::after{
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-mask-image: url("../img/arrow/link_arrow_right.png");
  mask-image: url("../img/arrow/link_arrow_right.png");
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #fff;
  width: 2.5rem;
  height: 2.5rem;
}

body{
  font-family: "Noto Sans JP";
}

/*コンテンツ*/
main{
  width: 100vw;
}
span.opa{
  width: 0;
  height: 0;
  display: block;
  opacity: 0;
}
section.deli_top{
  padding: var(--headerHeight) 0;
  background-color: #fff;
}
body[wc-view-type="sp"] section.deli_top{
  padding: var(--headerHeight) 2rem;
  box-sizing: border-box;
}
section.deli_top div.deli_top_box{
}
body:not([wc-view-type="sp"]) section.deli_top div.deli_top_box{
  display: flex;
  margin: 0 auto;
}
body[wc-view-type="tb"] section.deli_top div.deli_top_box{
  width: calc(100vw - 10rem);
}
body[wc-view-type="tb-l"] section.deli_top div.deli_top_box{
  width: calc(100vw - 12rem);
}
body[wc-view-type="pc"] section.deli_top div.deli_top_box{
  width: 780px;
}
section.deli_top div.deli_top_box > h1{
  font-size: 1.8rem;
  color: #29221a;
  margin-bottom: 1.5rem;
}
body[wc-view-type="sp"] section.deli_top > div.deli_top_box h1{
  font-size: 1.7rem;
  text-align: left;
  margin-bottom: 1.5rem;
}
body[wc-view-type="tb"] section.deli_top > div.deli_top_box h1{
  width: 305px;
  font-size: 1.7rem;
}
body[wc-view-type="tb-l"] section.deli_top > div.deli_top_box h1,
body[wc-view-type="pc"] section.deli_top > div.deli_top_box h1{
  width: 320px;
}
section.deli_top div.deli_top_box > h1 span.back_wrap{
  display: table;
  padding: 0.5rem 1rem;
  position: relative;
  z-index: 1;
}
section.deli_top div.deli_top_box > h1 span.back_wrap:nth-of-type(1){
  margin-bottom: 0.5rem;
}
section.deli_top div.deli_top_box > h1 span.back_wrap::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #f2ece0;
  z-index: -1;
  opacity: 0;
}
section.deli_top div.deli_top_box > h1 span.back_wrap span.back_inner{
  opacity: 0;
  color: #29221a;
}
section.deli_top div.deli_top_box > div.deli_text{
  color: #29221a;
  line-height: 2rem;
  font-size: 0.97rem;
  box-sizing: border-box;
}
body[wc-view-type="sp"] section.deli_top div.deli_top_box > div.deli_text{
  padding: 0 1rem;
}
body[wc-view-type="tb"] section.deli_top div.deli_top_box > div.deli_text{
  width: calc(100vw - (10rem + 305px));
  margin-top: var(--headerHeight);
}
body[wc-view-type="tb-l"] section.deli_top div.deli_top_box > div.deli_text{
  width: calc(100vw - (12rem + 320px));
  padding-left: 2rem;
  padding-top: var(--headerHeight);
}
body[wc-view-type="pc"] section.deli_top div.deli_top_box > div.deli_text{
  padding-left: 2rem;
  padding-top: 4rem;
  width: 460px;
}
section.deli_top div.deli_top_box > div.deli_text p{
  opacity: 0;
  margin-bottom: 1.5rem;
}
/*魅力*/
section.deli_secound{
  padding: var(--headerHeight) 0;
  background-color: #f2ece0;
}
section.deli_secound div.charm_block{
  margin: 2rem auto 0 auto;
  background-color: #fff;
  border-radius: 3rem;
  padding: 2rem;
  box-sizing: border-box;
  opacity: 0;
}
body:not([wc-view-type="sp"]) section.deli_secound div.charm_block{
  display: flex;
}
body[wc-view-type="sp"] section.deli_secound div.charm_block{
  width: calc(100vw - 4rem);
  padding: 2rem 1rem;
}
body[wc-view-type="tb"] section.deli_secound div.charm_block{
  width: calc(100vw - 12rem);
}
body[wc-view-type="tb-l"] section.deli_secound div.charm_block{
  width: calc(100vw - 12rem);
}
body[wc-view-type="pc"] section.deli_secound div.charm_block{
  width: 780px;
}

body:not([wc-view-type="sp"]) section.deli_secound div.charm_block div.left{
  width: 55%;
}
section.deli_secound div.charm_block div.left dl{
}
body:not([wc-view-type="sp"]) section.deli_secound div.charm_block div.left dl{
  padding-top: 2rem;
}
section.deli_secound div.charm_block div.left dl dt{
  font-size: 1.2rem;
  color: #29221a;
  position: relative;
  z-index: 1;
  padding-bottom: 0.5rem;
}
body:not([wc-view-type="sp"]) section.deli_secound div.charm_block div.left dl dt{
  padding: 0 1rem;
  box-sizing: border-box;
}
section.deli_secound div.charm_block div.left dl dt::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: #29221a;
  z-index: 2;
}
body[wc-view-type="sp"] section.deli_secound div.charm_block div.left dl dt{
  text-align: center;
  margin-bottom: 1rem;
}
body:not([wc-view-type="sp"]) section.deli_secound div.charm_block div.left dl dt{
  padding-bottom: 0.5rem;
}
section.deli_secound div.charm_block div.left dl dd{
  font-size: 0.97rem;
  color: #29221a;
  line-height: 1.8rem;
  box-sizing: border-box;
}
body[wc-view-type="sp"] section.deli_secound div.charm_block div.left dl dd{
  padding: 0 1rem 1rem 1rem;
}
body:not([wc-view-type="sp"]) section.deli_secound div.charm_block div.left dl dd{
  padding: 0.5rem 2rem 0 1rem;
  box-sizing: border-box;
}
section.deli_secound div.charm_block div.left dl dd div.btn{
  margin-top: 1rem;
}
body:not([wc-view-type="sp"]) section.deli_secound div.charm_block div.right{
  width: 45%;
}
section.deli_secound div.charm_block div.right figure{
}
section.deli_secound div.charm_block div.right figure picture{
  width: 100%;
  height: 100%;
  display: block;
}
section.deli_secound div.charm_block div.right figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3rem;
}
/*流れ*/
section.flow{
  padding: var(--headerHeight) 0;
  background-color: #fff;
}
div.flow_block{
  margin: 0 auto;
  background-color: #f2ece0;
  border-radius: 3rem;
  padding: 1rem;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  opacity: 0;
}
div.flow_block::after{
  content: "";
  width: 2rem;
  height: 2rem;
  border-bottom: 1.5px solid #29221a;
  border-right: 1.5px solid #29221a;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
body[wc-view-type="sp"] div.flow_block::after{
  bottom: -2rem;
}
body[wc-view-type="tb"] div.flow_block::after{
  bottom: -2rem;
}
body[wc-view-type="tb-l"] div.flow_block::after{
  bottom: -2.5rem;
}
body[wc-view-type="pc"] div.flow_block::after{
  bottom: -2.5rem;
}
section.flow div.flow_block:nth-of-type(5)::after{
  display: none;
}
body[wc-view-type="sp"] div.flow_block{
  width: calc(100vw - 2rem);
  margin: 0 auto;
  margin-bottom: 3rem;
}
body[wc-view-type="tb"] div.flow_block{
  width: calc(100vw - 12rem);
  margin: 0 auto;
  margin-bottom: 3rem;
}
body[wc-view-type="tb-l"] div.flow_block{
  width: calc(100vw - 12rem);
  margin: 0 auto;
  margin-bottom: 4rem;
}
body[wc-view-type="pc"] div.flow_block{
  width: 780px;
  margin-bottom: 5rem;
}
div.flow_block div.number{
  display: table;
  color: #f2ece0;
  background-color: #29221a;
  border-radius: 1rem;
  font-size: 1.2rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.5rem 2rem;
  line-height: 1em;
}
div.flow_block div.number::before{
  content: "Step";
  display: inline-block;
  color: #f2ece0;
  font-size: 1rem;
}
div.flow_block dl{
}
div.flow_block dl dt{
  position: relative;
  z-index: 1;
  font-size: 1.2rem;
  color: #29221a;
  padding: 0.75rem 1rem 0.5rem 1rem;
  box-sizing: border-box;
  text-align: center;
}
div.flow_block dl dt::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color:#29221a;
}
div.flow_block dl dd{
  color: #29221a;
  font-size: 0.97rem;
  line-height: 1.8rem;
  padding: 1rem;
  box-sizing: border-box;
}
div.flow_block dl dd div.btn{
  margin-top: 1rem;
}
/*デリバリーボタン*/
div.deli_btn{
  display: table;
  margin: 2rem auto 0 auto;
}
div.deli_btn a{
  display: table;
background-color: #ea5550;
font-size: 1.5rem;
color: #fff;
font-weight: 700;
padding: 1rem 3rem 1rem 3rem;
position: relative;
z-index: 1;
text-decoration: none;
border-radius: 2rem;
}
div.deli_btn a::after{
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-mask-image: url("../img/arrow/link_arrow_right.png");
  mask-image: url("../img/arrow/link_arrow_right.png");
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #fff;
  width: 2.5rem;
  height: 2.5rem;
}
div.deli_btn a span{
  color: #fff;
  text-align: center;
  display: block;
  font-size: 1.2rem;
}
/*配達可能エリア*/
section.area{
  padding: var(--headerHeight) 0;
  background-color: #fff;
  box-sizing: border-box;
}
body[wc-view-type="sp"] section.area{
  padding-bottom: 0 !important;
}
body[wc-view-type="tb"] section.area{
  padding:var(--headerHeight) 2rem;
}
section.area div.area_box{
}
body[wc-view-type="tb-l"] section.area div.area_box,
body[wc-view-type="pc"] section.area div.area_box{
  display: flex;
  margin: 0 auto;
}
body[wc-view-type="sp"] section.area div.area_box{
}
body[wc-view-type="tb-l"] section.area div.area_box{
  width: calc(100vw - 4rem);
}
body[wc-view-type="pc"] section.area div.area_box{
  width: 1100px;
}
section.area div.area_box div.area_text{
  box-sizing: border-box;
}
body[wc-view-type="sp"] section.area div.area_box div.area_text{
  width: 100vw;
  padding: 0 2rem 2rem 2rem;
}
body[wc-view-type="tb"] section.area div.area_box div.area_text{
  width:100%;
  padding: 0 2rem 2rem 2rem;
}
body[wc-view-type="tb-l"] section.area div.area_box div.area_text{
  padding-right: 2rem;
  width: 50%;
}
body[wc-view-type="pc"] section.area div.area_box div.area_text{
  width: 450px;
  padding-right: 2rem;
}
section.area div.area_box div.area_text > p{
  font-size: 0.97rem;
  color: #29221a;
  line-height: 1.8rem;
}
body:not([wc-view-type="sp"]) section.area div.area_box div.area_text > p{
  text-align: center;
}
section.area div.area_box div.map{
  position: relative;
  z-index: 1;
}
body[wc-view-type="sp"] section.area div.area_box div.map{
  height: 100vw;
}
body[wc-view-type="tb"] section.area div.area_box div.map{
  width: 100%;
}
body[wc-view-type="tb-l"] section.area div.area_box div.map{
  width: 50%;
}
body[wc-view-type="pc"] section.area div.area_box div.map{
  height: 450px;
}
div.map figure picture{
  width: 100%;
  height: 100%;
  display: block;
}
div.map figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}