:root{
  --hfx-red:#d80421;
  --hfx-beige:#f8f7ed;
}

body.hfx-lock{touch-action:none}

.t4-header .logo-image{visibility:hidden}
.hfx-logo-fixed{
  position:fixed;
  top:6px;
  left:clamp(20px, 1.563vw, 30px);
  width:clamp(140px, 16.67vw, 200px);
  margin:0;
  padding:0;
  z-index:100;
}
.hfx-logo-fixed a{display:block;line-height:0;padding:0;margin:0}
.hfx-logo-fixed img{
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
}
.hfx-logo-fixed .logo-img{display:block !important;width:100% !important}
.hfx-logo-fixed .logo-img-sm{display:none !important}
@media screen and (max-width:767px){
  .hfx-logo-fixed{top:6px;left:18px;width:155.2px}
  .hfx-logo-fixed .logo-img{display:none !important}
  .hfx-logo-fixed .logo-img-sm{display:block !important;width:155.2px !important}
}

.hfx-intro{
  position:fixed;
  inset:0;
  z-index:10000;
  --hfx-tw:var(--hfx-tw2, min(1920px, calc(var(--hfx-cw, 100vw) * 1.30969)));
  --hfx-tl:var(--hfx-tl2, calc((var(--hfx-cw, 100vw) - min(1920px, calc(var(--hfx-cw, 100vw) * 1.30969))) / 2));
  --hfx-tt:var(--hfx-tt2, 85px);
  --hfx-base:1920;
  background:var(--hfx-beige);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  transition:opacity .5s ease;
}
.hfx-intro.is-out{pointer-events:none}
body.hfx-header-up header,
body.hfx-header-up .t4-header,
body.hfx-header-up #t4-header{z-index:10001}
.hfx-intro__copy{
  position:absolute;
  z-index:2;
  left:calc(var(--hfx-tl) + var(--hfx-tw) * 431.0 / var(--hfx-base));
  top:calc(var(--hfx-tt) + var(--hfx-tw) * 109.0 / var(--hfx-base));
  width:calc(var(--hfx-tw) * 108.0 / var(--hfx-base));
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.hfx-intro__copy img{display:block;width:100%;height:auto}
.hfx-intro.is-step4 .hfx-intro__copy{opacity:1;transform:translateY(0)}
.hfx-intro__logo{
  position:absolute;
  left:var(--hfx-mvcx, calc(var(--hfx-tl) + var(--hfx-tw) * 962.000 / var(--hfx-base)));
  top:var(--hfx-mvcy, calc(var(--hfx-tt) + var(--hfx-tw) * 446.270 / var(--hfx-base)));
  width:calc(var(--hfx-tw) * 377.3 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 377.3 / var(--hfx-base));
  transform:translate(-50%, -50%) scale(1);
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.hfx-intro.is-step4 .hfx-intro__logo{transform:translate(-50%, -50%) scale(1.342)}
.hfx-intro.is-out .hfx-intro__logo{
  transform:translate(-50%, -50%) scale(2.00860);
  transition:transform .5s cubic-bezier(.2,.6,.3,1);
}
.hfx-intro__ring,
.hfx-intro__text,
.hfx-intro__photo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.hfx-intro__ring{
  width:calc(var(--hfx-tw) * 350.5 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 350.5 / var(--hfx-base) * 1281 / 1280);
  opacity:0;
  transition:opacity .3s ease, transform .5s cubic-bezier(.2,.6,.3,1);
}
.hfx-intro.is-step2 .hfx-intro__ring{opacity:1}
.hfx-intro.is-out .hfx-intro__ring{
  transform:translate(-50%,-50%) scale(1);
}
.hfx-intro__photo{
  width:calc(var(--hfx-tw) * 344.0 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 344.0 / var(--hfx-base) * 1270 / 1269);
  object-fit:contain;
  opacity:0;
  transition:opacity .45s ease;
}
.hfx-intro.is-step5 .hfx-intro__photo{opacity:1}
.hfx-intro__text{
  width:calc(var(--hfx-tw) * 298.0 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 156.0 / var(--hfx-base));
  opacity:0;
  transition:opacity .4s ease;
}
.hfx-intro.is-step1 .hfx-intro__text{opacity:1}
.hfx-intro.is-step5 .hfx-intro__text{opacity:0}
.hfx-intro__dot{
  position:absolute;
  border-radius:50%;
  background:var(--hfx-red);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.3,.64,1), opacity .4s ease;
}
.hfx-intro.is-step2 .hfx-intro__dot{transform:translate(-50%,-50%) scale(1);opacity:1}
.hfx-intro__dot--1{
  left:calc(var(--hfx-tl) + var(--hfx-tw) * 279.000 / var(--hfx-base));
  top:calc(var(--hfx-tt) + var(--hfx-tw) * 332.000 / var(--hfx-base));
  width:calc(var(--hfx-tw) * 126.000 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 126.000 / var(--hfx-base));
  transition-delay:.05s;
}
.hfx-intro__dot--2{
  left:calc(var(--hfx-tl) + var(--hfx-tw) * 132.500 / var(--hfx-base));
  top:calc(var(--hfx-tt) + var(--hfx-tw) * 659.500 / var(--hfx-base));
  width:calc(var(--hfx-tw) * 99.000 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 99.000 / var(--hfx-base));
  transition-delay:.15s;
}
.hfx-intro__dot--3{
  left:calc(var(--hfx-tl) + var(--hfx-tw) * 1716.000 / var(--hfx-base));
  top:calc(var(--hfx-tt) + var(--hfx-tw) * 571.000 / var(--hfx-base));
  width:calc(var(--hfx-tw) * 100.000 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 100.000 / var(--hfx-base));
  transition-delay:.25s;
}
.hfx-intro__dot--4{
  left:calc(var(--hfx-tl) + var(--hfx-tw) * 534.600 / var(--hfx-base));
  top:calc(var(--hfx-tt) + var(--hfx-tw) * 780.300 / var(--hfx-base));
  width:calc(var(--hfx-tw) * 158.900 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 158.900 / var(--hfx-base));
  transition-delay:.20s;
}
.hfx-intro__dot--5{
  left:calc(var(--hfx-tl) + var(--hfx-tw) * 1430.600 / var(--hfx-base));
  top:calc(var(--hfx-tt) + var(--hfx-tw) * 216.200 / var(--hfx-base));
  width:calc(var(--hfx-tw) * 217.600 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 217.600 / var(--hfx-base));
  transition-delay:.10s;
}
.hfx-intro__dot--6{
  left:calc(var(--hfx-tl) + var(--hfx-tw) * 1423.500 / var(--hfx-base));
  top:calc(var(--hfx-tt) + var(--hfx-tw) * 750.000 / var(--hfx-base));
  width:calc(var(--hfx-tw) * 277.200 / var(--hfx-base));
  height:calc(var(--hfx-tw) * 277.200 / var(--hfx-base));
  transition-delay:.30s;
}

.hfx-teaser{
  --hfx-mvw:min(1920px, 130.969%, calc((100vh - 85px) * 2.341));
  position:relative;
  width:var(--hfx-mvw);
  max-width:none;
  height:auto;
  aspect-ratio:1920 / 940;
  margin:85px 0 0 calc((100% - var(--hfx-mvw)) / 2);
  border:none;
}
.custom:has(> .hfx-teaser){overflow:hidden}
.hfx-mvdot{
  position:absolute;
  border-radius:50%;
  background:var(--hfx-red);
}
.hfx-mvdot--1{left:11.250%;top:28.617%;width:6.563%;aspect-ratio:1}
.hfx-mvdot--2{left:86.771%;top:55.426%;width:5.208%;aspect-ratio:1}
.hfx-mvdot--3{left:4.323%;top:64.894%;width:5.156%;aspect-ratio:1}
.hfx-mvdot--4{left:23.706%;top:74.558%;width:8.276%;aspect-ratio:1}
.hfx-mvdot--5{left:68.844%;top:11.426%;width:11.333%;aspect-ratio:1}
.hfx-mvdot--6{left:66.922%;top:65.043%;width:14.438%;aspect-ratio:1}
body.hfx-intro-on .hfx-mvdot{
  z-index:10001;
  transform:scale(0);
  opacity:0;
}
body.hfx-intro-anim .hfx-mvdot{
  transition:transform .5s cubic-bezier(.34,1.3,.64,1), opacity .4s ease;
}
body.hfx-intro-dots .hfx-mvdot{transform:scale(1);opacity:1}
body.hfx-intro-anim .hfx-mvdot--1{transition-delay:.05s}
body.hfx-intro-anim .hfx-mvdot--5{transition-delay:.10s}
body.hfx-intro-anim .hfx-mvdot--2{transition-delay:.15s}
body.hfx-intro-anim .hfx-mvdot--4{transition-delay:.20s}
body.hfx-intro-anim .hfx-mvdot--3{transition-delay:.25s}
body.hfx-intro-anim .hfx-mvdot--6{transition-delay:.30s}
.hfx-intro__dot{display:none}
.hfx-mv{position:absolute;aspect-ratio:1269 / 1270;transform:none;max-width:none}
.hfx-mv img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.2s ease}
.hfx-mv img.is-active{opacity:1}
.hfx-teaser .teaser_waku{max-width:none;transform:none}
.hfx-teaser .teaser_copy{left:16.389%;top:5.625%;width:7.222%}
.hfx-teaser .teaser_copy img{width:100%;height:auto;display:block}
.hfx-panel{position:absolute}
.hfx-panel img{display:block;width:100%;height:auto;opacity:0;transition:opacity .9s ease}
.hfx-panel img:first-child{position:relative}
.hfx-panel img+img{position:absolute;left:0;top:0}
.hfx-panel img.is-active{opacity:1}
body.hfx-mv-hold .hfx-panel img.is-active{opacity:0}
.hfx-teaser .teaser_img{aspect-ratio:auto;right:auto;bottom:auto}
#hfx-mv{left:32.111%;top:10.694%;width:35.987%}
.hfx-teaser .teaser_waku{left:31.771%;top:10.000%;width:36.667%}
.hfx-teaser .teaser_img1{left:30.417%;top:8.085%;width:5.260%}
.hfx-teaser .teaser_img4{left:67.188%;top:9.787%;width:13.021%}
.hfx-teaser .teaser_img2{left:15.365%;top:53.936%;width:6.094%}
.hfx-teaser .teaser_img5{left:79.948%;top:34.043%;width:8.229%}
.hfx-teaser .teaser_img3{left:23.490%;top:73.936%;width:11.198%}
.hfx-teaser .teaser_img6{left:66.927%;top:62.340%;width:16.458%}
.hfx-teaser .teaser_copy{left:22.448%;top:11.596%;width:5.625%}

.hfx-icons{
  position:relative;
  width:100%;
  max-width:1440px;
  margin:50px auto 0;
  aspect-ratio:1440 / 119.5;
}
.hfx-icons img{
  position:absolute;
  top:0;
  display:block;
  height:auto;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
.hfx-icons img:nth-child(1){left:18.368%;width:16.236%}
.hfx-icons img:nth-child(2){left:36.736%;width:16.194%}
.hfx-icons img:nth-child(3){left:55.125%;width:16.250%}
.hfx-icons img:nth-child(4){left:73.507%;width:8.278%}
.hfx-icons.is-shown img{opacity:1;transform:translateY(0)}
.hfx-icons.is-shown img:nth-child(2){transition-delay:.38s}
.hfx-icons.is-shown img:nth-child(3){transition-delay:.76s}
.hfx-icons.is-shown img:nth-child(4){transition-delay:1.14s}
.hfx-icons--sp{display:none}

.nutrition.hfx-nutrition{
  background-image:none;
  background-color:var(--hfx-beige);
  aspect-ratio:1440 / 713;
}
.hfx-bars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.hfx-bars img{
  position:absolute;
  left:7.569%;
  top:min(60.8px, 4.222vw);
  width:88.611%;
  height:auto;
  transition:opacity .45s ease;
}
.hfx-bars img.hfx-bars__b{opacity:0}
.hfx-bars.is-broken img.hfx-bars__a{opacity:0}
.hfx-bars.is-broken img.hfx-bars__b{opacity:1}
.hfx-bars img.hfx-bars--sp{display:none}
.hfx-nutrition .nutrition_content{padding-left:84px}
.hfx-nutrition .circle_btn{margin-left:15px}
/* 幅が足りないと写真のお菓子に文字が重なるため、SP と同じ縦組みにする */
@media screen and (min-width:768px) and (max-width:1199px){
  .nutrition.hfx-nutrition{
    aspect-ratio:auto;
    padding-top:calc(min(60.8px, 4.222vw) + 41.755vw + 34px);
    padding-bottom:60px;
  }
  .hfx-nutrition .nutrition_inner{height:auto}
  .hfx-nutrition .nutrition_content{
    position:relative;
    left:auto;
    top:auto;
    padding-left:0;
    text-align:center;
  }
  .hfx-nutrition .circle_btn{margin-left:auto;margin-right:auto}
}

.hfx-pagetop{
  position:absolute;
  left:min(calc(50% + min(497px, 50% - 30px) + 8.1px), calc(100% - 148px));
  top:113.2px;
  right:auto;
  bottom:auto;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:76.3px;
  opacity:1;
  visibility:visible;
}
.hfx-pagetop.is-shown{opacity:1;visibility:visible}
.hfx-pagetop.is-on-footer .hfx-pagetop__label{filter:brightness(0) invert(1)}
body:has(.hfx-pagetop) #back-to-top{display:none !important}
.hfx-pagetop:hover{text-decoration:none}
.hfx-pagetop__label{display:block;width:100%;height:auto}
.hfx-pagetop__img{position:relative;display:block;width:166.2px;margin:7.1px 0 0 -36.2px}
.hfx-pagetop__img img{display:block;width:100%;height:auto;transition:opacity .25s ease}
.hfx-pagetop__img img.hfx-pagetop__b{position:absolute;left:0;top:0;opacity:0}
a.hfx-pagetop:hover img{opacity:1}
a.hfx-pagetop:hover .hfx-pagetop__a{opacity:0}
a.hfx-pagetop:hover .hfx-pagetop__b{opacity:1}
@media (pointer:coarse){
  a.hfx-pagetop:hover .hfx-pagetop__a{opacity:1}
  a.hfx-pagetop:hover .hfx-pagetop__b{opacity:0}
}

.hfx-loop{transform:translateY(12px)}
.hfx-loop .nutrition_loop_item{position:relative}
.hfx-loop .nutrition_loop_item{overflow:visible}
.hfx-loop .nutrition_loop_item img{
  position:absolute;
  left:50%;
  top:50%;
  width:210px;
  height:auto;
  max-width:none;
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
}
@media screen and (max-width:768px){
  .hfx-loop .nutrition_loop_item img{width:115px}
}
.hfx-loop .nutrition_loop_item .hfx-b{opacity:0}
.hfx-loop .nutrition_loop_item.is-broken .hfx-a{opacity:0}
.hfx-loop .nutrition_loop_item.is-broken .hfx-b{opacity:1}
.hfx-loop.hfx-nofade .nutrition_loop_item img{transition:none}

.promise_section .promise_inner{overflow:visible}
body:has(#hfx-jack) .t4-section-inner.container{overflow:visible}
.hfx-jack-page .t4-section-inner.container{overflow:visible}
.hfx-jack{position:relative;height:560vh;margin:0 auto}
.hfx-jack__sticky{
  position:sticky;
  top:96px;
  height:calc(100vh - 110px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.hfx-jack__slide{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(16px);
  opacity:0;
  transition:opacity .9s ease, transform .9s ease;
  pointer-events:none;
}
.hfx-jack__slide>*{width:100%}
.hfx-jack__slide.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.hfx-jack__dots{
  position:absolute;
  left:50%;
  top:auto;
  bottom:12%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:2;
}
.hfx-jack .promise_visual{width:min(40vw, 550px, 62vh)}
.hfx-jack .promise_initial{width:min(130px, 20vh)}
.hfx-jack .promise_initial.promise_initial-s{width:min(88px, 13.5vh)}
.hfx-jack .promise_text h3{font-size:min(30px, 4.2vh)}
.hfx-jack .promise_text p{font-size:min(20px, 2.8vh)}
.hfx-jack__dots button{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#d8d3c4;
  cursor:pointer;
}
.hfx-jack__dots button[aria-current="true"]:nth-child(1){background:#2e9e6b}
.hfx-jack__dots button[aria-current="true"]:nth-child(2){background:#f19b28}
.hfx-jack__dots button[aria-current="true"]:nth-child(3){background:#1b8ecd}

body.hfx-menu-lock{overflow:hidden}
body.hfx-lock .hfx-pagetop{display:none}

.c-offcanvas.hfx-oc,
.c-offcanvas.hfx-oc *{transform:none !important;animation:none !important}
.c-offcanvas.hfx-oc *{transition:none !important}
.c-offcanvas.hfx-oc .hfx-pagetop__img img{transition:opacity .25s ease !important}
.hfx-oc ~ .c-offcanvas-bg,
.c-offcanvas-bg{transition:opacity .15s ease !important}
.c-offcanvas.hfx-oc{
  opacity:0;
  transition:opacity .15s ease, visibility .15s ease !important;
  background-color:var(--hfx-red);
}
.c-offcanvas.hfx-oc.hfx-oc-in{opacity:1}
.hfx-oc ~ .c-offcanvas-content-wrap,
.c-offcanvas-content-wrap{transform:none !important}
.c-offcanvas.hfx-oc .t4-off-canvas-header{
  position:static;
  height:0;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  background:none;
}
.c-offcanvas.hfx-oc .t4-off-canvas-header>a{display:none}
.c-offcanvas.hfx-oc .close.js-offcanvas-close{
  position:absolute;
  right:17.25px;
  top:13.5px;
  width:49.5px;
  height:49.5px;
  min-width:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:#fff;
  opacity:1;
  z-index:3;
}
.c-offcanvas.hfx-oc .close.js-offcanvas-close .c-button__text{font-size:0;line-height:0}
.c-offcanvas.hfx-oc .close.js-offcanvas-close::before,
.c-offcanvas.hfx-oc .close.js-offcanvas-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:2px;
  background:var(--hfx-red);
}
.c-offcanvas.hfx-oc .close.js-offcanvas-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.c-offcanvas.hfx-oc .close.js-offcanvas-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.c-offcanvas.hfx-oc .sub-menu-toggle,
.c-offcanvas.hfx-oc .btn-toggle,
.c-offcanvas.hfx-oc .sub-menu-back{display:none}
.c-offcanvas.hfx-oc .hfx-offcanvas .module-inner,
.c-offcanvas.hfx-oc .hfx-offcanvas .module-ct{padding:0;margin:0}
.c-offcanvas.hfx-oc .hfx-offcanvas .navbar{padding:0;margin:0;display:block;transform:none;height:auto}
.c-offcanvas.hfx-oc .navbar-nav{display:block;margin:0;list-style:none}
.c-offcanvas.hfx-oc .navbar-nav>.nav-item{display:block;padding:0;margin:0;border:0}
.c-offcanvas.hfx-oc .navbar-nav>.nav-item>.nav-link,
.c-offcanvas.hfx-oc .navbar-nav>.nav-item>.separator{color:#fff;background:none}
.c-offcanvas.hfx-oc .navbar-nav .dropdown-menu .dropdown-item{color:#fff;background:none}

@media screen and (max-width:768px){
  /* SP は 375px のデザインを幅に比例させる。500px で頭打ち */
  :root{--hfx-mk:calc(min(100vw, 500px) / 375)}
  .c-offcanvas.hfx-oc{
    opacity:0;
    transition:opacity .15s ease, visibility .15s ease !important;
    height:auto;
    min-height:0;
    max-height:100vh;
    border-radius:0;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:none;
    padding:0;
    background-color:transparent;
  }
  .c-offcanvas.hfx-oc::-webkit-scrollbar{width:0;height:0}
  .c-offcanvas.hfx-oc.hfx-oc-in{opacity:1}
  .hfx-oc ~ .c-offcanvas-content-wrap,
  .c-offcanvas-content-wrap{transform:none !important}
  .c-offcanvas.hfx-oc .t4-off-canvas-header{
    position:static;
    height:0;
    min-height:0;
    padding:0;
    margin:0;
    border:0;
    background:none;
  }
  /* ヘッダーのロゴは赤なので、赤背景に載る白のフッター用ロゴを使う。
     位置とサイズはページ側のロゴに合わせ、開いても動かないようにする */
  .c-offcanvas.hfx-oc .t4-off-canvas-header>a{
    display:block;
    position:absolute;
    left:18px;
    top:19.8px;
    width:155.2px;
    height:50.08px;
    padding:0;
    margin:0;
    background:url(../../../images/stories/footer/footer_logo.png) no-repeat left top / contain;
    font-size:0;
    z-index:4;
  }
  .c-offcanvas.hfx-oc .t4-off-canvas-header>a img{display:none !important}
  .c-offcanvas.hfx-oc .close.js-offcanvas-close{
    position:absolute;
    right:calc(14.2 * var(--hfx-mk));
    top:calc(16.7 * var(--hfx-mk));
    width:calc(62.4 * var(--hfx-mk));
    height:calc(62.4 * var(--hfx-mk));
    min-width:0;
    padding:0;
    border:0;
    border-radius:50%;
    background:#fff;
    opacity:1;
    z-index:3;
  }
  .c-offcanvas.hfx-oc .close.js-offcanvas-close .c-button__text{font-size:0;line-height:0}
  .c-offcanvas.hfx-oc .close.js-offcanvas-close::before,
  .c-offcanvas.hfx-oc .close.js-offcanvas-close::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:calc(38.7 * var(--hfx-mk));
    height:calc(2.2 * var(--hfx-mk));
    border-radius:calc(1.1 * var(--hfx-mk));
    background:var(--hfx-red);
  }
  .c-offcanvas.hfx-oc .close.js-offcanvas-close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .c-offcanvas.hfx-oc .close.js-offcanvas-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

  /* 赤ベタと下の角丸は中身側に持たせる。パネルは 100vh で頭打ちになるため、
     背景をパネルに置くとサブメニューを開いたとき中身が赤の外へ出てしまう */
  .c-offcanvas.hfx-oc .t4-off-canvas-body{
    display:flex;
    flex-direction:column;
    padding:0 0 calc(111 * var(--hfx-mk));
    overflow:visible;
    border-radius:0 0 38.667% 38.667% / 0 0 calc(140 * var(--hfx-mk)) calc(140 * var(--hfx-mk));
    background-color:var(--hfx-red);
  }
  .c-offcanvas.hfx-oc .t4-off-canvas-body>.t4-module{order:9;margin:0;padding:0}
  .c-offcanvas.hfx-oc .t4-off-canvas-body>.t4-module.hfx-offcanvas{order:1}
  .c-offcanvas.hfx-oc .hfx-offcanvas .module-inner,
  .c-offcanvas.hfx-oc .hfx-offcanvas .module-ct{padding:0;margin:0}
  .c-offcanvas.hfx-oc .hfx-offcanvas .navbar{padding:0;margin:0;display:block;transform:none;height:auto}
  .c-offcanvas.hfx-oc .navbar-nav{
    display:block;
    box-sizing:border-box;
    width:calc(375 * var(--hfx-mk));
    max-width:100%;
    max-height:none;
    overflow:visible;
    padding:calc(69 * var(--hfx-mk)) calc(56.2 * var(--hfx-mk)) 0 calc(58.8 * var(--hfx-mk));
    margin:0 auto;
    list-style:none;
  }
  .c-offcanvas.hfx-oc .navbar-nav>.nav-item{
    position:relative;
    display:block;
    padding:0;
    margin:0;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.5);
  }
  .c-offcanvas.hfx-oc .navbar-nav>.nav-item>.nav-link,
  .c-offcanvas.hfx-oc .navbar-nav>.nav-item>.separator{
    display:flex;
    align-items:center;
    box-sizing:border-box;
    height:calc(59.3 * var(--hfx-mk));
    padding:0;
    margin:0;
    color:#fff;
    font-weight:400;
    font-size:calc(17.3 * var(--hfx-mk));
    line-height:1.2;
    letter-spacing:.13em;
    background:none;
  }
  .c-offcanvas.hfx-oc .navbar-nav>.nav-item:first-child>.nav-link,
  .c-offcanvas.hfx-oc .navbar-nav>.nav-item:first-child>.separator{padding-top:calc(6.6 * var(--hfx-mk))}
  .c-offcanvas.hfx-oc .hfx-oc-toggle{
    display:block;
    position:absolute;
    top:calc(17.2 * var(--hfx-mk));
    right:calc(-1.5 * var(--hfx-mk));
    width:calc(24.9 * var(--hfx-mk));
    height:calc(24.9 * var(--hfx-mk));
    padding:0;
    margin:0;
    border:0;
    border-radius:50%;
    background:#fff;
    z-index:3;
  }
  .c-offcanvas.hfx-oc .hfx-oc-toggle::before,
  .c-offcanvas.hfx-oc .hfx-oc-toggle::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    background:var(--hfx-red);
  }
  .c-offcanvas.hfx-oc .hfx-oc-toggle::before{
    width:calc(10.6 * var(--hfx-mk));
    height:calc(1.6 * var(--hfx-mk));
    margin:calc(-0.8 * var(--hfx-mk)) 0 0 calc(-5.3 * var(--hfx-mk));
  }
  .c-offcanvas.hfx-oc .hfx-oc-toggle::after{
    width:calc(1.6 * var(--hfx-mk));
    height:calc(10.6 * var(--hfx-mk));
    margin:calc(-5.3 * var(--hfx-mk)) 0 0 calc(-0.8 * var(--hfx-mk));
  }
  .c-offcanvas.hfx-oc .nav-item.hfx-oc-open>.hfx-oc-toggle::after{opacity:0}
  .c-offcanvas.hfx-oc .navbar-nav .dropdown-menu{
    display:none;
    position:static;
    float:none;
    width:auto;
    min-width:0;
    margin:0;
    padding:0 0 calc(16 * var(--hfx-mk));
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    list-style:none;
    transform:none;
  }
  .c-offcanvas.hfx-oc .navbar-nav .nav-item.parent.hfx-oc-open>.dropdown-menu{display:block}
  .c-offcanvas.hfx-oc .navbar-nav .dropdown-menu>.nav-item{
    display:block;
    padding:0;
    margin:0;
    border:0;
  }
  .c-offcanvas.hfx-oc .navbar-nav .dropdown-menu .dropdown-item,
  .c-offcanvas.hfx-oc .navbar-nav .dropdown-menu .nav-link{
    display:flex;
    align-items:center;
    height:calc(30.7 * var(--hfx-mk));
    padding:0;
    margin:0;
    color:#fff;
    font-weight:400;
    font-size:calc(11 * var(--hfx-mk));
    line-height:1.2;
    letter-spacing:.05em;
    background:none;
  }
  .c-offcanvas.hfx-oc .sub-menu-toggle,
  .c-offcanvas.hfx-oc .btn-toggle,
  .c-offcanvas.hfx-oc .sub-menu-back{display:none}

  .c-offcanvas.hfx-oc .t4-off-canvas-body>.t4-module:not(.hfx-offcanvas){
    box-sizing:border-box;
    width:calc(375 * var(--hfx-mk));
    max-width:100%;
    margin:calc(53.7 * var(--hfx-mk)) auto 0;
  }
  .c-offcanvas.hfx-oc .t4-off-canvas-body>.t4-module .module-inner,
  .c-offcanvas.hfx-oc .t4-off-canvas-body>.t4-module .module-ct{margin:0;padding:0}
  .c-offcanvas.hfx-oc .search{display:block;margin:0;padding:0}
  .c-offcanvas.hfx-oc .search form{display:block;margin:0;padding:0}
  .c-offcanvas.hfx-oc .search .form-control{
    display:block;
    box-sizing:border-box;
    width:calc(258.4 * var(--hfx-mk));
    max-width:none;
    min-width:0;
    height:calc(36.5 * var(--hfx-mk));
    margin:0 0 0 calc(57.8 * var(--hfx-mk));
    padding:0 calc(44 * var(--hfx-mk)) 0 calc(22.3 * var(--hfx-mk));
    border:0;
    border-radius:calc(18.25 * var(--hfx-mk));
    box-shadow:none;
    background-color:#fff;
    background-image:url(../../../images/stories/header/zoom_ic.png);
    background-position:right calc(17.2 * var(--hfx-mk)) center;
    background-size:calc(19.8 * var(--hfx-mk)) auto;
    background-repeat:no-repeat;
    font-size:calc(16 * var(--hfx-mk));
    line-height:calc(36.5 * var(--hfx-mk));
    letter-spacing:.05em;
    color:#333;
  }
  .c-offcanvas.hfx-oc .search .form-control::placeholder{color:#a2a2a2;opacity:1}
}

@media screen and (max-width:767px){
  .hfx-icons{display:none}
  .hfx-icons--sp{display:block;aspect-ratio:375 / 106;margin-top:6.0%}
  .hfx-icons--sp img{width:19.280%}
  .hfx-icons--sp img:nth-child(1){left:6.800%;width:19.280%}
  .hfx-icons--sp img:nth-child(2){left:29.200%;width:19.280%}
  .hfx-icons--sp img:nth-child(3){left:51.600%;width:19.280%}
  .hfx-icons--sp img:nth-child(4){left:74.133%;width:18.933%}
  .nutrition.hfx-nutrition{aspect-ratio:auto;padding-top:74.667vw}
  .hfx-bars img.hfx-bars--pc{display:none}
  .hfx-bars img.hfx-bars--sp{display:block;left:5.600%;top:8.400vw;width:91.200%}
  .hfx-intro__logo{
    width:calc(var(--hfx-tw) * 165.825 / var(--hfx-base));
    height:calc(var(--hfx-tw) * 165.825 / var(--hfx-base));
  }
  .hfx-intro__ring{
    width:calc(var(--hfx-tw) * 152.480 / var(--hfx-base));
    height:calc(var(--hfx-tw) * 152.480 / var(--hfx-base) * 1281 / 1280);
  }
  .hfx-intro__photo{
    width:calc(var(--hfx-tw) * 151.174 / var(--hfx-base));
    height:calc(var(--hfx-tw) * 151.174 / var(--hfx-base) * 1270 / 1269);
  }
  .hfx-intro__text{
    width:calc(var(--hfx-tw) * 130.958 / var(--hfx-base));
    height:calc(var(--hfx-tw) * 68.554 / var(--hfx-base));
  }
  .hfx-intro__copy{
    left:calc(var(--hfx-tw) * 31.0 / var(--hfx-base));
    top:calc(var(--hfx-tt) + var(--hfx-tw) * 24.0 / var(--hfx-base));
    width:calc(var(--hfx-tw) * 61.0 / var(--hfx-base));
  }
  .hfx-intro.is-step4 .hfx-intro__logo{transform:translate(-50%, -50%) scale(1.14)}
  .hfx-intro.is-out .hfx-intro__logo{transform:translate(-50%, -50%) scale(1.875)}
  .hfx-intro.is-out .hfx-intro__ring{transform:translate(-50%,-50%) scale(1)}
  .hfx-intro{--hfx-tw:var(--hfx-tw2, var(--hfx-cw, 100vw));--hfx-tl:var(--hfx-tl2, 0px);--hfx-tt:var(--hfx-tt2, 70px);--hfx-base:375}
  .hfx-intro__logo{
    left:var(--hfx-mvcx, calc(var(--hfx-tw) * 186.560 / var(--hfx-base)));
    top:var(--hfx-mvcy, calc(var(--hfx-tt) + var(--hfx-tw) * 215.520 / var(--hfx-base)));
  }
  .hfx-intro__dot--1{
    left:calc(var(--hfx-tw) * 337.58 / var(--hfx-base));
    top:calc(var(--hfx-tt) + var(--hfx-tw) * 74.38 / var(--hfx-base));
    width:calc(var(--hfx-tw) * 83.45 / var(--hfx-base));
    height:calc(var(--hfx-tw) * 83.45 / var(--hfx-base));
  }
  .hfx-intro__dot--2{
    left:calc(var(--hfx-tw) * 93.17 / var(--hfx-base));
    top:calc(var(--hfx-tt) + var(--hfx-tw) * 407.11 / var(--hfx-base));
    width:calc(var(--hfx-tw) * 72.33 / var(--hfx-base));
    height:calc(var(--hfx-tw) * 72.33 / var(--hfx-base));
  }
  .hfx-intro__dot--3{
    left:calc(var(--hfx-tw) * 283.94 / var(--hfx-base));
    top:calc(var(--hfx-tt) + var(--hfx-tw) * 418.12 / var(--hfx-base));
    width:calc(var(--hfx-tw) * 110.44 / var(--hfx-base));
    height:calc(var(--hfx-tw) * 110.44 / var(--hfx-base));
  }
  .hfx-intro__dot--4,
  .hfx-intro__dot--5,
  .hfx-intro__dot--6{display:none}
  .hfx-teaser{
    width:100%;
    max-width:none;
    aspect-ratio:375 / 474;
    height:auto;
    margin:70px auto 0;
  }
  .hfx-mvdot{display:none}
  .hfx-mvdot--4{display:block;left:15.653%;top:78.766%;width:17.384%}
  .hfx-mvdot--5{display:block;left:78.899%;top:6.897%;width:22.229%}
  .hfx-mvdot--6{display:block;left:60.995%;top:76.722%;width:29.189%}
  #hfx-mv{left:11.949%;top:15.564%;width:75.600%;max-width:none;transform:none}
  .hfx-teaser .teaser_waku{left:11.624%;top:15.306%;width:76.253%;max-width:none;transform:none}
  .hfx-teaser .teaser_copy{left:8.267%;top:5.063%;width:16.267%}
  .hfx-teaser .teaser_img1{left:29.600%;top:4.008%;width:12.544%}
  .hfx-teaser .teaser_img4{left:75.659%;top:5.652%;width:25.536%}
  .hfx-teaser .teaser_img2{left:-1.109%;top:63.892%;width:14.373%}
  .hfx-teaser .teaser_img5{left:88.000%;top:55.295%;width:17.600%}
  .hfx-teaser .teaser_img3{left:15.203%;top:78.262%;width:23.520%}
  .hfx-teaser .teaser_img6{left:61.008%;top:74.599%;width:33.280%}
  .hfx-pagetop{left:auto;right:calc(32.45 * var(--hfx-mk));top:calc(-35.5 * var(--hfx-mk));bottom:auto;width:calc(59.8 * var(--hfx-mk))}
  .hfx-pagetop__img{width:212.2%;margin:10.5% 0 0 -56.4%}
  .hfx-jack{height:440vh}
  .hfx-jack__sticky{top:70px;height:calc(100vh - 76px)}
  .hfx-jack .promise_photo{width:90%;height:auto}
  .hfx-jack .promise_photo img{width:100%;height:100%}
  .hfx-jack__slide{height:calc(100% - 34px)}
  .hfx-jack__dots{bottom:10px}
  .hfx-jack .promise_slide{gap:min(30px, 3vh)}
  .hfx-jack .promise_visual{width:min(100%, 36vh)}
  .hfx-jack .promise_initial{width:min(100px, 13vh);margin-bottom:min(25px, 2vh)}
  .hfx-jack .promise_initial.promise_initial-s{width:min(68px, 8.8vh)}
  .hfx-jack .promise_text h3{margin:min(32px, 2.4vh) 0 min(10px, 1vh);font-size:min(26px, 3.6vh)}
  .hfx-jack .promise_text p{font-size:min(20px, 2.8vh);line-height:1.85}
  .hfx-nutrition .nutrition_content{padding-left:0}
  .hfx-nutrition .circle_btn{margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  .hfx-intro{display:none}
  .hfx-icons img{opacity:1;transform:none;transition:none}
  .hfx-mv img,
  .hfx-panel img,
  .hfx-bars img,
  .hfx-jack__slide{transition:none}
  .hfx-jack{height:auto}
  .hfx-jack__sticky{position:static;height:auto;display:block}
  .hfx-jack__slide{position:static;opacity:1;transform:none;margin-bottom:60px;pointer-events:auto}
}

/* 塗りはボーダーの外側まで覆う。内側で止めると、最後にボーダーが色付いた
   瞬間だけ赤円が 1px ずつ外へ広がって段差に見える */
.circle_btn{border-color:transparent;overflow:visible}
.circle_btn::before{
  transform:translate(-50%, -50%) scale(1.03);
  opacity:0;
  transition:opacity .25s ease;
}
@keyframes hfx-btn-in{
  0%{transform:translate(-50%, -50%) scale(0);opacity:1}
  100%{transform:translate(-50%, -50%) scale(1.03);opacity:1}
}
@keyframes hfx-btn-in-text{
  0%{color:#e60020}
  25%,100%{color:#fff}
}
.circle_btn.hfx-ripple::before{animation:hfx-btn-in .75s cubic-bezier(.65,0,.35,1) both}
.circle_btn.hfx-ripple{animation:hfx-btn-in-text .75s linear both}
.circle_btn.hfx-shown{border-color:var(--primary);color:#fff}
.circle_btn.hfx-shown::before{opacity:1}
.circle_btn.hfx-shown:hover{color:#e60020}
.circle_btn.hfx-shown:hover::before{opacity:0}

.product_card{transition:transform .4s cubic-bezier(.4,0,.2,1)}
.product_card:hover{transform:scale(1.035);z-index:2}

.about_teaser .swiper-slide img{display:block;width:100%;height:auto;max-width:none}
.about_teaser.hfx-kv-hold .swiper-slide{opacity:0 !important;transition:none !important}
.about_teaser.hfx-kv-hold .swiper-slide.hfx-kv-first{opacity:1 !important}

.hfx-oc-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:99998;
}
@media screen and (min-width:769px) and (max-width:991px){
  body.hfx-oc-open .hfx-oc-overlay{opacity:1;visibility:visible}
}