.hdWhite:not(.navOpen) .hdBar,
.hdWhite:not(.navOpen) #chHeader{
  background-color: transparent;
  color: var(--white-color);
}
.hdWhite:not(.navOpen) .hdBar{border-bottom-color: var(--white-color);}
.hdWhite:not(.navOpen) #chHeader a{color: var(--white-color);}
.hdWhite:not(.navOpen) #chHeader svg use{fill:var(--white-color);}
.hdWhite:not(.navOpen) #chHeader .megaMenu a{color: var(--main-color);}
#chFooter{
  position: relative;
  background-color: var(--white-color);
  z-index: 1;
}
main:before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("https://file001.shop-pro.jp/PA01520/417/img/top/btm-bgA.webp") no-repeat center center / cover;
  z-index: 0;
}
main > .inner{
  position: relative;
  z-index: 1;
}
main > .inner > *:not(.paraxBox):not(.recomBox),
.mainVisual,
.newsBox{background-color: var(--white-color);}
.slide-arrow{
  position: absolute;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  z-index:100;
}
.slide-arrow:hover{opacity: 0.7;}
.newTtl,
.popularTtl,
.specTtl{text-align: center;}
.mainVisual{
  width:100%;
  position: relative;
  z-index: 1;
}
.slide-arrow.swiper-button-disabled{
  opacity:0.2;
  pointer-events:none;
}
.mainVisual a{display: block;}
.mainVisual a:hover{opacity:0.8;}
.mainVisual .txtBox{
  position: absolute;
  top: 0;
  height: 100%;
}
.mvLead{
  line-height: 1.7;
  font-weight:100;
}
.mvName{margin-bottom: 0;}
.mvName span,
.mvName strong{
  display: block;
  line-height: 1.0;
  font-weight: normal;
}
.mainVisual a:hover span[data-btn]{
  background-color:var(--white-color);
  color:var(--main-color)!important;
}
.slick-dotted.slick-slider{margin-bottom: 0!important;}
.mainVisual .slick-dots{
  width: 100%;
  position: absolute;
  bottom:0;
  left: 0;
}
.mainVisual .slick-dots li{
  display: inline-block;
  line-height: 1.0;
}
.mainVisual .slick-dots button{
  display: block;
  width: 100%;
  height: 100%;
  border:1px solid var(--main-color);
  border-radius: 50%;
}
.mainVisual .slick-active button{background-color: var(--main-color);}
.newsBox{
  position: relative;
  margin:0 auto;
  line-height: 1.5;
  z-index: 1;
}
.newsBox time{
  display: block;
  line-height: 1.0;
}
.newsBox p{margin-bottom: 0;}
.recomBox{
  width: 100%;
  background-color: #f2efea;
}
.recomTtl{
  display: block;
  margin: 0;
  line-height: 1.0;
}
.recomName,
.recomName span,
.recomName strong,
.recomPrice{
  display: block;
  margin: 0;
  line-height: 1.0;
  font-weight: normal;
}
.recomTxt{line-height: 1.5;}
.newItems{
  background-color: var(--white-color);
  border-bottom:1px solid #bcbcbc;
  text-align: center;
}
.newItems .itemList{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap:20px;
  margin:0 auto;
}
.popularItems{
  background-color: var(--white-color);
  border-bottom:1px solid #bcbcbc;
}
.halfSet{background-color: var(--white-color);}
.halfListSliderBox{position:relative;}
.halfListSlider .swiper-slide a{
  display: block;
  position: relative;
  color: var(--white-color);
  line-height: 1.0;
}
.slick-slide a:hover{opacity: 0.7;}
.halfBoxTtl{position: absolute;}
.swiper-navigation-icon{display:none;}
.priceList li{
  display: block;
  border-bottom: 1px solid #737375;
  line-height: 1.0;
}
.priceList a{
  display: block;
  background: url("https://file001.shop-pro.jp/PA01520/417/img/common/angle.svg") no-repeat center right / 17px auto;
}
.materialList{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.materialList li{
  display: block;
  width:49.568%;
}
.materialList a{
  display: block;
  position: relative;
}
.materialList a:hover{opacity: 0.7;}
.materialList li:nth-child(odd) a{color: var(--white-color);}
.materialList li:nth-child(even) a{color: var(--main-color);}
.materialList img{
  max-width: initial;
  width: 100%;
}
.materialList span{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  line-height: 1.0;
}
.paraxBox{width: 100%;}
.specSliderOuter{
  width:100%;
  position:relative;
}
.specSlider a{display: block;}
.specSlider a:hover{
  outline: none;
  text-decoration: none;
}
.specSlider time,
.sprcTag{
  display: block;
  line-height: 1.0;
}
.specTxt{line-height: 1.5;}
.sprcTag{
  margin-bottom: 0;
  color: #848486;
}
.harmonyBox{
  width: 100%;
  background:#000 no-repeat center center / cover;
  color: var(--white-color);
}
.harmonyFg video{
  display: block;
  width: 100%;
  height: 100%;
}
.harmonyTtl span{
  display: block;
  line-height: 1.0;
  font-weight:400;
}
.harmonyTtl svg use{fill:var(--white-color);}
.harmonyTxt,
.harmonySttl,
.harmonyStxt{line-height: 1.5;}
.harmonyBlock{
  display: grid;
  grid-template-rows: auto;
  grid-template-areas: "blTtl blTxt";
  align-items: center;
}
.harmonySttl{
  grid-area: blTtl;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--white-color);
  border-radius: 50%;
  align-self: center;
  text-align: center;
}
.harmonySttl span{display: block;}
.harmonyStxt{margin-bottom: 0;}
.instaBox{display: grid;}
.instaTtl{
  grid-area: inTtl;
  display: flex;
  align-items: center;
  line-height: 1.0;
}
.instaList{grid-area: inFg;}
.instaList .inner{
  display: flex;
  flex-wrap: wrap;
}
.instaList img{
  display: block;
  line-height: 1.0;
}
.instaLink{grid-area: inLink;}
@media screen and (max-width:1239.98px){
  .hdBarShow .globalNavi{max-height: calc(100dvh - 76px);}
  .hdWhite:not(.navOpen) .gNavBtn:before,
  .hdWhite:not(.navOpen) .gNavBtn:after{background-color: var(--white-color);}
  h2{font-size: 24px;}
  *[data-btn]{
    height:47px;
    padding:18px 56px;
    font-size: 14px;
  }
  .newTtl,
  .popularTtl,
  .specTtl{margin-bottom: 24px;}
  .slide-arrow{
    width: 40px;
    height: 40px;
  }
  .mainVisual{margin-top:-77px;}
  .mainVisual .slick-slide{
    max-width: 100vw;
    max-height: 100vh;
  }
  .mainVisual .slick-slide img{
    max-width:initial;
    width: 100%;
    object-fit: cover;
    object-position: center center;
  }
  .mainVisual .txtBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    left: 0;
    padding-bottom: 46px;
    text-align: center;
  }
  .mvLead{font-size:18px;}
  .mvName{margin-top:15px;}
  .mvName span{font-size:10px;}
  .mvName strong{
    margin-top:10px;
    font-size:16px;
  }
  .mvBtn{margin-top: 15px;}
  .mainVisual .slick-dots{
    padding: 0 5.333vw 15px;
    text-align: center;
  }
  .mainVisual .slick-dots li{
    width: 8px;
    height: 8px;
  }
  .newsBox{
    display: block;
    padding:20px 5.333vw 16px;
    font-size: 12px;
  }
  .newsBox p{margin-top: 8px;}
  .recomBox{
    padding:40px 5.333vw;
    text-align: center;
  }
  .recomBox:before{
    content: "今月のおすすめ";
    display: block;
    margin-bottom: 24px;
    font-size: 24px;
  }
  .recomBox figcaption{margin-top: 26px;}
  .recomName,
  .recomName span{font-size: 10px;}
  .recomName strong{
    margin-top: 14px;
    font-size:18px;
  }
  .recomPrice{
    margin-top:24px;
    font-size: 15px;
  }
  .recomPrice small{font-size: 10px;}
  .recomTxt{
    margin-top:34px;
    font-size: 14px;
    text-align: left;
  }
  .recomBtn{margin-top:20px;}
  .newItems{padding:70px 5.333vw;}
  .newItems .itemList li{width: 48.358%;}
  .popularItems{padding: 60px 0 64px 5.333vw;}
  .popularItems li{
    width:162px;
    margin:0 8px 0 0;
  }
  .halfSet{
    width: 100%;
    padding: 60px 0 0 5.333vw;
  }
  .halfTtl{margin-bottom: 30px;}
  .halfListSlider .swiper-slide{
    width:162px;
    margin-left: 10px;
  }
  .halfBoxTtl{
    bottom: 8px;
    left: 13px;
  }
  .halfSet .prev-arrow{
    top: -63px;
    right: calc(5.333vw + 49px);
  }
  .halfSet .next-arrow{
    top: -63px;
    right: 5.333vw;
  }
  .priceListBox{padding:48px 5.333vw 0;}
  .materialListBox{padding:48px 5.333vw 60px;}
  .materialListTtl{margin-bottom: 20px;}
  .priceList li{padding-right: 5.333vw;}
  .priceList a{
    padding: 28px 0 18px;
    font-size: 13px;
  }
  .materialList li:nth-child(n+3){margin-top:0.864%;}
  .materialList a:before{
    content:"";
    display:block;
    width:100%;
    height:0;
    padding-top:40.462%;
  }
  .materialList img{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    aspect-ratio:173 / 70;
    object-fit:cover;
    object-position:center center;
  }
  .materialList span{font-size: 17px;}
  .paraxBox{height: 100vw;}
  .specBox{padding:54px 0 60px;}
  .specTtl{line-height: 1.4;}
  .specSlider .swiper-slide{
    width:240px;
    margin:0 14px;
  }
  .specSlider time{margin-top: 20px;}
  .specTxt{margin: 12px 0 16px;}
  .specBox .prev-arrow{
    top: 136px;
    left:2.666vw;
    z-index: 1;
  }
  .specBox .next-arrow{
    top: 136px;
    right: 2.666vw;
  }
  .harmonyBox{
    padding: 60px calc(50% - 163px) 56px;
    background-image: url("https://file001.shop-pro.jp/PA01520/417/img/top/chabatree-bg-sp.webp");
  }
  .harmonyTtl{
    font-size: 20px;
    text-align: center;
  }
  .harmonyTtl svg{
    width: 245px;
    margin-top: 18px;
  }
  .harmonyTxt{
    margin:22px 0 32px;
    text-align: center;
  }
  .harmonyFg{
    width: 300px;
    margin:0 auto 30px;
  }
  .harmonyBlock{grid-template-columns: 130px 1fr;}
  .harmonyBlock:nth-of-type(2){margin-top: -10px;}
  .harmonySttl{
    width: 130px;
    height: 130px;
    font-size: 16px;
  }
  .harmonyStxt{
    padding-left: 20px;
    font-size: 12px;
  }
  .corpBox{padding:56px 5.333vw 60px;}
  .corpBox:before{
    content: "法人のお客様";
    display: block;
    text-align: center;
    font-size: 24px;
    line-height: 1.0;
  }
  .corpFg{margin-top: 28px;}
  .corpFg picture,
  .corpFg picture img{
    display: block;
    width: 100%;
    max-width: initial;
  }
  .corpSttl{
    margin-top: 22px;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
  }
  .corpTxt{margin: 20px 0 24px;}
  .corpLink{text-align: center;}
  .corpLink li+li{margin-top: 10px;}
  .corpLink a{
    width: 250px;
    height: auto;
    padding:16px 56px;
  }
  .instaBox{
    grid-template: "inTtl" auto "inFg" auto "inLink" auto / 100%;
    padding:0 5.333vw 60px;
  }
  .instaTtl{justify-content: center;}
  .instaTtl img{
    width:22px;
    margin-right: 14px;
  }
  .instaLink{text-align: center;}
  .instaLink a{
    height: auto;
    padding:16px 56px;
    margin:0 auto;
  }
  .instaList{margin: 40px auto;}
  .instaList img:nth-child(-n+3),
  .instaList img:nth-child(n+6){width: 33.33333%;}
  .instaList img:nth-child(4),
  .instaList img:nth-child(5){width: 50%;}

}
@media screen and (min-width:1240px){
  h2{font-size: 28px;}
	h2[data-ver-pc]{
    writing-mode: vertical-rl;
    letter-spacing: 4px;
  }
  .newTtl,
  .popularTtl,
  .specTtl{margin-bottom: 28px;}
  .slide-arrow{
    width: 40px;
    height: 40px;
  }
  .mainVisual{margin-top:-90px;}
  .mainVisual .txtBox{
    width: 535px;
    left:calc(50% + 65px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-top: 80px;
  }
  .mvLead{font-size: 30px;}
  .mvName{margin-top: 54px;}
  .mvName span{font-size: 10px;}
  .mvName strong{
    margin-top: 16px;
    font-size: 22px;
  }
  .mvBtn{margin-top: 28px;}
  .mainVisual .slick-dots{
    padding: 0 calc(50% - 600px) 50px;
    text-align: right;
  }
  .mainVisual .slick-dots li{
    width: 10px;
    height: 10px;
  }
  .newsBox{
    display: flex;
    justify-content: space-between;
    padding:24px calc(50% - 500px);
    font-size: 13px;
  }
  .newsBox time{margin-right:40px;}
  .newsBox p{flex:1;}
  .recomBox{
    display: flex;
    align-items: center;
  }
  .recomBox > *{width:50%;}
  .recomBox figcaption{
    position: relative;
    padding: 10px calc(50% - 600px + 100px) 10px 100px;
  }
  .recomTtl{
    position: absolute;
    left:570px;
    top: 0;
  }
  .recomName,
  .recomName span{font-size: 10px;}
  .recomName strong{
    margin-top: 16px;
    font-size:22px;
  }
  .recomPrice{margin-top:38px;}
  .recomPrice small{font-size: 10px;}
  .recomTxt{margin-top:34px;}
  .recomBtn{margin-top:36px;}
  .newItems{padding:78px 0 75px;}
  .newItems .itemList{width:1200px;}
  .newItems .itemList li{width:23.333%;}
  .popularItems{padding: 78px 0;}
  .popularItems li{
    width:280px;
    margin:0 13px;
  }
  .halfSet{
    display: grid;
    grid-template:"hTtl hSlider" auto / 210px 1fr;
    width: 100%;
    padding: 60px 0 0 calc(50% - 600px);
  }
  .halfTtl{
    grid-area: hTtl;
    display: flex;
    align-items: center;
    width:210px;
    padding-right: 120px;
  }
  .halfTtl span{display: block;}
  .halfListSliderBox{grid-area: hSlider;}
  .halfListSliderBox .swiper{width:calc(990px + 50vw - 600px);}
  .halfListSlider .swiper-slide{width:270px;}
  .halfBoxTtl{
    left:20px;
    bottom: 20px;
    font-size: 17px;
  }
  .halfSet .prev-arrow{
    left:-210px;
    bottom:70px;
  }
  .halfSet .next-arrow{
    left:-160px;
    bottom:70px;
  }
  .flexSet{
    margin:0 auto;
    display: grid;
    grid-template:auto / 50% 50%;
    padding: 60px calc(50% - 563px) 80px;
  }
  .priceListBox,
  .materialListBox{
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
  .priceListTtl,
  .materialListTtl{
    display: block;
    margin-right: 70px;
  }
  .priceListTtl{
    width:30px;
    margin-left:-6px;
  }
  .materialListTtl{ width:98px;}
  .priceList{width: 395px;}
  .priceList li{padding-right: 20px;}
  .priceList a{
    padding: 24px 0 13px;
    font-size: 17px;
  }
  .materialList{width: 395px;}
  .materialList li:nth-child(n+3){margin-top:0.864%;}
  .materialList span{font-size: 17px;}
  .paraxBox{height: 400px;}
  .specBox{padding:78px calc(50% - 520px);}
  .specSlider .swiper-slide{
    width:320px;
    margin:0 20px;
  }
  .specSlider time{
    margin-top: 28px;
    font-size: 13px;
  }
  .specTxt{margin: 14px 0;}
  .sprcTag{font-size: 13px;}
  .specBox  .prev-arrow{
    top: calc(50% - 90px);
    left: -80px;
  }
  .specBox .next-arrow{
    top: calc(50% - 90px);
    left: calc(50% + 560px);
  }
  .harmonyBox{
    display: grid;
    grid-template: "haFg haTtl" auto "haFg haTxt" auto "haFg haBl1" auto "haFg haBl2" auto / 515px 685px;
    padding: 110px calc(50% - 600px);
    background-image: url("https://file001.shop-pro.jp/PA01520/417/img/top/chabatree-bg.webp");
  }
  .harmonyTtl{
    grid-area: haTtl;
    font-size: 22px;
  }
  .harmonyTtl svg{
    width: 245px;
    margin-top: 28px;
  }
  .harmonyTxt{
    grid-area: haTxt;
    margin:32px 0 50px;
  }
  .harmonyFg{
    grid-area: haFg;
    padding: 0 89px 0 100px;
  }
  .harmonyFg img{width: 326px;}
  .harmonyBlock{grid-template-columns: 200px 1fr;}
  .harmonyBlock:nth-of-type(1){grid-area: haBl1;}
  .harmonyBlock:nth-of-type(2){
    grid-area: haBl2;
    margin-top: -28px;
  }
  .harmonySttl{
    width: 200px;
    height: 200px;
    font-size: 18px;
  }
  .harmonyStxt{padding-left: 36px;}
  .corpBox{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 80px calc(50% - 600px);
  }
  .corpFg{width: 50%;}
  .corpFg picture{
    display: block;
    width: 50vw;
    margin-right: calc(600px - 50vw);
  }
  .corpBox figcaption{
    width: 50%;
    display: grid;
    grid-template: "cTtl cBox" auto / 80px 1fr;
    padding-right: 65px;
  }
  .corpTtl{justify-self: center;}
  .corpBox .txtBox{padding-left: 48px;}
  .corpSttl{font-size: 22px;}
  .corpTxt{margin: 34px 0;}
  .corpLink li+li{margin-top: 20px;}
  .corpLink a{width: 220px;}
  .instaBox{
    grid-template: "inFg inTtl" auto "inFg inLink" auto / 834px 366px;
    align-items: center;
    padding:0 calc(50% - 600px) 80px;
  }
  .instaTtl{
    align-self:flex-end;
    padding:0 0 20px 86px;
  }
  .instaTtl img{
    width:20px;
    margin-right: 16px;
  }
  .instaLink{
    align-self:flex-start;
    padding:20px 0 0 86px;
  }
  .instaList .inner{
    width: calc(100% + 50vw - 600px);
    margin-left: calc(600px - 50vw);
  }
  .instaList img{width: 25%;}
}