body{
  color:#554943;
}
#back-top.is-keyboard-target {
  display: block !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#back-top.is-keyboard-target.is-visible,
#back-top.is-keyboard-target:focus-within {
  opacity: 1;
  pointer-events: auto;
}
#back-top.is-keyboard-target a:focus-visible {
  outline: 0.3rem solid #261E1E;
  outline-offset: 0.3rem;
}
#tsuginomilkMain {
  position: relative;
  z-index: 1;
}
#tsuginomilkMain #mvCopy {
  opacity: 0;
  /*transform: translate(-40%, 40%);*/
}
#tsuginomilkMain #mvTitle {
  opacity: 0;
}
#tsuginomilkMain #mvtsuginomilkGreen,
#tsuginomilkMain #mvtsuginomilkPink {
  opacity: 0;
  transform: translateY(50%);
}
#tsuginomilkMain #noriGroup {
  opacity: 0;
  transform: translateY(20%);
}
#tsuginomilkMain #noriGroupBg {
  opacity: 0;
  transform: translateX(-80%);
}
#tsuginomilkMain #noriGroupText {
  opacity: 0;
}
#tsuginomilkMain img {
  height: auto;
}
#tsuginomilkMain .mainBg {
  /* background-image: url(../img/main-bg.avif);
  background-repeat: no-repeat;
  background-size: 100vw; */
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
#tsuginomilkMain .mainBg__image {
  height: 100dvh;
  left: 50%;
  max-width: -moz-max-content;
  max-width: max-content;
  min-width: 100vw;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: auto;
  width: auto;
  z-index: -2;
}
#tsuginomilkMain .mainBg picture .mainBg__image {
  z-index: 0;
}
#tsuginomilkMain .mainBg__ripple {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 76%;
  will-change: opacity, transform;
  z-index: 1;
}
#tsuginomilkMain .mainBg__rippleFinal {
  -webkit-mask-image:
    radial-gradient(ellipse 68% 46% at 50% 73.5%, #000 0%, #000 38%, rgba(0, 0, 0, 0.9) 48%, rgba(0, 0, 0, 0.65) 62%, rgba(0, 0, 0, 0.32) 78%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 68% 46% at 50% 73.5%, #000 0%, #000 38%, rgba(0, 0, 0, 0.9) 48%, rgba(0, 0, 0, 0.65) 62%, rgba(0, 0, 0, 0.32) 78%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  mask-composite: intersect;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 73.5%;
  will-change: opacity;
  z-index: 1;
}
#tsuginomilkMain .mainBg__rippleProduct {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 73.5%;
  will-change: opacity, transform;
  z-index: 2;
}
#tsuginomilkMain #mainNav,
#tsuginomilkMain #asideDisplay {
  z-index: 2;
}
#tsuginomilkMain .yellowBG {
  background-color: #f0e8c6;
  background-image: url(../img/center-bg.avif);
  background-repeat: repeat;
  background-size: 29.9rem;
  display: block;
}
#tsuginomilkMain .mainContainer {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  margin: 0 auto;
  margin-top: 5.5rem;
  max-width: 75rem;
}
#tsuginomilkMain .sr-box {
  position: relative;
}
#tsuginomilkMain .sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: normal;
  width: 1px;
}
#tsuginomilkMain .sectionTitle  {
  text-align: center;
}
#tsuginomilkMain #topBanner {
  /*align-items: center;*/
  background: url(../img/banner-bg.jpg) no-repeat center/cover;
  display: flex;
  gap: 1rem;
  height: 5.5rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
		height:80px;
		padding:0.8rem 0;
}
#tsuginomilkMain #topBanner .topBanner__icon img {
  height: auto;
  transform: translateY(0.3rem);
  width: 4.1rem;
}
#tsuginomilkMain #topBanner .topBanner__text img {
  height: auto;
  transform: translateY(0.3rem);
  width: 38rem;
}

#tsuginomilkMain #topBanner .end_txt {
  position:absolute;
		top:4.5rem;
		font-weight:bold;
		color:#D30407;
		font-size:2rem;
}

@media screen and (max-width: 767px) {
  #tsuginomilkMain {
    z-index: 101;
  }

#tsuginomilkMain #topBanner {
position:relative;
}
}

#tsuginomilkMain #mv {
  aspect-ratio: 750/883;
  background: transparent;
  height: auto;
  position: relative;
}
#tsuginomilkMain #mv .mv__title {
  display: flex;
  gap: 2.1rem;
  left: 0.9rem;
  position: absolute;
  top: 48.5rem;
}
#tsuginomilkMain #mv .mv__new img {
  width: 13.4rem;
}
#tsuginomilkMain #mv .mv__mainTitle img {
  margin-top: 1.3rem;
  width: 42rem;
}
#tsuginomilkMain #mv .mv__copy {
  left: 4.2rem;
  position: absolute;
  top: -2.2rem;
  z-index: 1;
}
#tsuginomilkMain #mv .mv__copy img {
  -webkit-animation: bound 1s ease-in; 
  -moz-animation:    bound 1s ease-in; 
  animation: bound 1s ease-in;
}
@keyframes bound {
  /** 開始時は１倍の大きさ */
  from { transform: scale(1); }
  /** 0%～25%にかけて1.15倍する */
  25% { transform: scale(1.15); }
  /** 25%～50%にかけて0.95倍する */
  50% { transform: scale(0.95); }
  /** 50%～75%にかけて1.05倍する */
  75% { transform: scale(1.05); }
  /** 終了時は元の大きさに戻す */
  to { transform: scale(1); }
}
#tsuginomilkMain #mv .mv__copy p {
  color: #091f0f;
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin-top: 2.2rem;
}
#tsuginomilkMain #mv .mv__lead {
      left: 8.7rem;
    position: absolute;
    top: 69.1rem;
    width: 31.5rem;
  font-size: 0px;
}

.mv__lead img {
  opacity: 0;
  animation: leadfadeIn 0.8s ease-out forwards;
}
@keyframes leadfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


#tsuginomilkMain #mv .mv__lead img:nth-child(1) {
  animation-delay: 1.8s;
}

#tsuginomilkMain #mv .mv__lead img:nth-child(2) {
  animation-delay: 2.5s;
}

#tsuginomilkMain #mv .mv__mainVis {
  position: absolute;
          right: 20.4rem;
    top: -10.2rem;
    width: 42.6rem;
    aspect-ratio: 289 / 595;
  opacity: 0;
  will-change: transform, opacity;
  z-index:2;
}
#tsuginomilkMain #mv .mv__mainVis .mv__productTitle {
  margin: 0;
  padding: 0;
  transform: none;
}
#tsuginomilkMain #mv .mv__mainVis img {
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  width: 100%;
}
#tsuginomilkMain #mv .mv__potato,
#tsuginomilkMain #mv .mv__product {
  will-change: transform, opacity;
}
#tsuginomilkMain #mv .mv__product {
  opacity: 0;
}
#tsuginomilkMain #mv .mv__flash {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(255, 239, 187, 0.86) 30%, rgba(255, 226, 133, 0.35) 52%, rgba(255, 226, 133, 0) 72%);
  border-radius: 50%;
  filter: blur(0.3rem);
  height: 26rem;
  left: 57%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 56%;
  transform: translate(-50%, -50%) scale(0.35);
  visibility: hidden;
  width: 26rem;
  will-change: opacity, transform;
  z-index: 3;
}

#tsuginomilkMain #mv .mv__mainVis img.mv__potato {
  bottom: auto;
  height: auto;
  left: 50%;
  margin-left: -17.95rem;
  margin-top: -31rem;
  right: auto;
  top: 50%;
  width: 40rem;
}

#tsuginomilkMain #mv .mv__mainVis img.mv__product {
  bottom: auto;
    height: auto;
    left: 50%;
    margin-left: -18rem;
    margin-top: -44.85rem;
    right: auto;
    top: 63%;
    width: 42.6rem;
}




#tsuginomilkMain #mv .mv__tsuginomilkPink,
#tsuginomilkMain #mv .mv__tsuginomilkGreen {
  filter: drop-shadow(10px 20px 7px rgba(0, 0, 0, 0.25));
  position: absolute;
  top: 68.2rem;
  width: 22.6rem;
}
#tsuginomilkMain #mv .mv__tsuginomilkPink {
  left: 11.8rem;
}
#tsuginomilkMain #mv .mv__tsuginomilkGreen {
  right: 11.8rem;
}
#tsuginomilkMain #mv .mv__notice {
  bottom: auto;
    top: 78vh;
  font-family: "Inter", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  position: absolute;
  right: 1.7rem;
  text-align: right;
  color:#AF7B43;
  opacity: 0;
  visibility: hidden;
}
#tsuginomilkMain #mv .icon_new{
      position: absolute;
    right: 8rem;
    top: 13rem;
    width: 14rem;
  opacity: 0;
  visibility: hidden;
}
#tsuginomilkMain #whats-tsuginomilk {
  padding-top: 9rem;
  padding-bottom: 18rem;
  background:url("../img/shizuku_bg.png") center 94% / 50rem auto no-repeat;
  background-color:#FFE86C;
  border-radius: 5rem;
  margin-top:20rem;
}
#tsuginomilkMain #whats-tsuginomilk .sectionTitle img {
  width: 21.8rem;
}
#tsuginomilkMain #whats-tsuginomilk .whats-brand {
  text-align: center;
  margin: 1.5rem auto 6rem;
}
#tsuginomilkMain #whats-tsuginomilk .whats-brand img {
  width: 40.7rem;
}
#tsuginomilkMain #whats-tsuginomilk .calbee_logo{
  width:12rem;
  margin-right:0.2em;
}
#tsuginomilkMain #whats-tsuginomilk .message p{
  font-size:3.6rem;
  color:#821820;
  text-align: center;
}
#tsuginomilkMain #whats-tsuginomilk .message p:first-child{
  margin-bottom:2em;
}




#tsuginomilkMain #products {
  margin-top: 20rem;
  overflow: hidden;
  background-color:#9C2229;
  border-radius: 5rem;
  padding-top:8rem;
  padding-bottom:2rem;
}
#tsuginomilkMain #products h2 img {
  width:47.2rem;
}
#tsuginomilkMain #products .products__message {
  color: #FFF7F1;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.71;
  margin-top: 7.2rem;
  margin-bottom:18rem;
  text-align: center;
}
#tsuginomilkMain #products .products__message span{
  color:#FFE86C;
}
#tsuginomilkMain #products .package{
  text-align: center;
  color:#9C2229;
  font-size:5rem;
  line-height: 1.3;
}
#tsuginomilkMain #products .package .main_package{
  position:relative;
  z-index:1;
}

#tsuginomilkMain #products .package .icon_new{
  position:absolute;
  left: 8rem;
    top: -13rem;
  z-index:0;
}
#tsuginomilkMain #products .package div{
  display:inline-block;
  text-align: left;
  margin-top:-2rem;
}
#tsuginomilkMain #products .package div .volume{
  font-size:3.2rem;
  display:inline-block;
  border:solid 0.05em;
  line-height: 1;
  padding:0 0.2em 0.2em 0.2em;
}
#tsuginomilkMain #products .package div .small{
  font-size:0.6em;
}
#tsuginomilkMain #products .point{
  background-color:#FFF7F1;
  width:95%;
  margin:0 auto;
  box-sizing: border-box;
  padding:48rem 2.5% 6rem;
  margin-top:-39rem;
  border:0.8rem solid #9C2229;
  border-top-right-radius: 15rem;
  border-bottom-left-radius: 5rem;
  border-bottom-right-radius: 5rem;
}
#tsuginomilkMain #products .point dl dt{
  color:#9C2229;
  font-size:4.6rem;
  border-top:0.05em dashed #000;
  border-bottom:0.05em dashed #000;
  position:relative;
  text-align: center;
  padding:0.8em 0;
}
#tsuginomilkMain #products .point dl dt img{
      position: absolute;
    top: -2em;
    left: 0.1em;
}
#tsuginomilkMain #products .point dl dd{
  text-align: center;
  font-size:3rem;
  margin:1em 0 4em;
  line-height: 2;
}
#tsuginomilkMain #products .point dl div:last-child dd{
  margin-bottom:2rem;
}
#tsuginomilkMain #products .point dl dd img{
  margin-right:0.1em;
  margin-bottom:-0.1em;
}
#tsuginomilkMain #products .point dl dd .caption{
  font-size:2.2rem;
  margin-top:1em;
}

#tsuginomilkMain #how-to-drink {
  overflow: hidden;
  padding-top:10rem;
  background-color:#FFE86C;
  border-radius: 5rem;
  margin-top:20rem;
}
#tsuginomilkMain #how-to-drink h2 img {
  width:62.4rem;
}
#tsuginomilkMain #how-to-drink .time{
  text-align: center;
}
#tsuginomilkMain #how-to-drink .time dd{
  font-size:3rem;
  line-height: 2;
  margin-bottom:4em;
}

#tsuginomilkMain #calbee-plus {
  margin-top: 20rem;
  padding-top:10rem;
  padding-bottom: 2rem;
  position: relative;
  background-color:#9C2229;
  border-radius: 5rem;
  text-align: center;
  margin-bottom:40rem;
}
#tsuginomilkMain #calbee-plus .limited {
    background-color: #FFF7F1;
    width: 95%;
    margin: 4rem auto 0;
    box-sizing: border-box;
    padding: 6rem 6% 6rem;
    border-radius: 5rem;
    border:0.8rem solid #9C2229;
}
#tsuginomilkMain #calbee-plus .limited .limitedProductName{
  color:#9C2229;
  font-size:5rem;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom:0.5em;
}
#tsuginomilkMain #calbee-plus .limited .limitedProductName span{
  font-size:0.6em;
}
#tsuginomilkMain #calbee-plus .limited .area{
  background: linear-gradient(90deg, #E73828 0%, #9C2229 100%);
  font-size:3.8rem;
  padding:0.3em 1em;
  border-radius: 3em;
  color:#FFF;
  display:inline-block;
  margin:0.5em 0 0.7em;
}
#tsuginomilkMain #calbee-plus .limited .area + p{
  font-size:5.4rem;
  line-height: 1.5;
  margin-bottom:0.5em;
}
#tsuginomilkMain #calbee-plus .limited .area + p .red{
  color:#FF0000;
}
#tsuginomilkMain #calbee-plus .limited .area + p .red + span{
  font-size:0.7em;
}
#tsuginomilkMain #calbee-plus .limited .caption{
  text-align: left;
  font-size:2.2rem;
  margin-bottom:2em;
}


#tsuginomilkMain #asideDisplay {
  display: flex;
  flex-direction: column;
  gap: 1.5104vw;
  left: 7.4583vw;
  position: fixed;
  top: 50dvh;
  transform: translateY(-50%);
  width: -moz-fit-content;
  width: fit-content;
}
#tsuginomilkMain #asideDisplay .asideLogo {
  align-self: center;
  width: 11.9271vw;
}
#tsuginomilkMain #asideDisplay .asideGroup {
  display: flex;
  gap: 1.4rem;
}
#tsuginomilkMain #asideDisplay .asideGroup img {
  aspect-ratio: 147/146;
  filter: drop-shadow(1rem 2rem 0.73rem rgba(0, 0, 0, 0.25));
  height: auto;
  width: 7.6563vw;
}
#tsuginomilkMain #mainNav {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 5.7813vw;
  top: 50dvh;
  transform: translateY(-50%);
  img{
    width:12vw;
    max-width:273px;
    margin-bottom:2vw;
    margin-left:-1vw;
  }
}
#tsuginomilkMain #mainNav.is-nav-loading {
  visibility: hidden;
}
#tsuginomilkMain #mainNav a {
  align-items: center;
  color: #821820;
  cursor: pointer;
  display: flex;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 1.0417vw;
  font-weight: 700;
  height: 2.8125vw;
  justify-content: center;
  transition: box-shadow 0.3s;
  width: 10.6563vw;
  position:relative;
  margin-bottom:0.3em;
  border-radius: 0.2em;
}
#tsuginomilkMain #mainNav a:hover {
  /*box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.4);*/
  opacity: 1;
}
#tsuginomilkMain #mainNav a.active::before {
    content: "";
    position: absolute;
    left: 0.2vw;
    top: -1vw;
    width: 2.3vw;
    height: 3.3vw;
    background-image: url("../img/navi_icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: navDropIn 0.48s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
#tsuginomilkMain #mainNav a:nth-child(n) { background-color: #FFCF3D; }
#tsuginomilkMain #mainNav a.active {
  animation: navStretchIn 0.55s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  background-color:#D41C20;
  color:#fff;
  margin-left: -3vw;
    width: 16.125vw;
}
#tsuginomilkMain #mainNav a.active.is-initial-active,
#tsuginomilkMain #mainNav a.active.is-initial-active::before {
  animation: none;
}

@keyframes navDropIn {
  0% {
    opacity: 0;
    transform: translateY(-2.2vw) scale(0.82);
  }
  65% {
    opacity: 1;
    transform: translateY(0.18vw) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes navStretchIn {
  0% {
    transform: scaleX(0.66);
  }
  68% {
    transform: scaleX(1.07);
  }
  100% {
    transform: scaleX(1);
  }
}

#tsuginomilkMain #mainNav .pageMarker {
  height: 0.7292vw;
  left: -1.3542vw;
  position: absolute;
  transform: translateY(1.1458vw);
  transition: 0.3s ease-out;
  width: 1.8229vw;
}
#hamburger {
  display: none;
}
#tsuginomilkMain #sidedrawer {
  display: none;
}
#tsuginomilkMain .js-fadeUp {
  opacity: 0;
  transform: translateY(8rem);
}


@media screen and (max-width: 1400px) {
  #tsuginomilkMain #mainNav,
  #tsuginomilkMain #asideDisplay {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-height: 900px) {
  #tsuginomilkMain #mv .mv__mainVis img.mv__potato {
    margin-left: -16.2rem;
    width: 36.5rem;
  }
  #tsuginomilkMain #mv .mv__mainVis img.mv__product {
    margin-left: -16.45rem;
    width: 39.5rem;
  }
  #tsuginomilkMain #mv .mv__flash {
    height: 24rem;
    width: 24rem;
  }
  #tsuginomilkMain #mv .icon_new {
    right: 9rem;
  }
}

@media screen and (min-width: 768px) and (max-height: 820px) {
  #tsuginomilkMain #mv .mv__mainVis img.mv__potato {
    margin-left: -14.2rem;
    width: 32.5rem;
  }
  #tsuginomilkMain #mv .mv__mainVis img.mv__product {
    margin-left: -14.2rem;
    width: 35rem;
  }
  #tsuginomilkMain #mv .mv__flash {
    height: 21rem;
    width: 21rem;
  }
  #tsuginomilkMain #mv .icon_new {
    right: 11rem;
  }
}

@media screen and (min-width: 768px) and (max-height: 740px) {
  #tsuginomilkMain #mv .mv__mainVis img.mv__potato {
    margin-left: -12.2rem;
    width: 28.5rem;
  }
  #tsuginomilkMain #mv .mv__mainVis img.mv__product {
    margin-left: -12.2rem;
    width: 31rem;
  }
  #tsuginomilkMain #mv .mv__flash {
    height: 19rem;
    width: 19rem;
  }
  #tsuginomilkMain #mv .icon_new {
    right: 13rem;
  }
}

@media screen and (max-width: 767px) {
  #tsuginomilkMain .yellowBG {
    background-size: 39.8667vw;
  }
  #tsuginomilkMain .mainBg__image {
    height: 144vw;
    min-width: 256vw;
    object-fit: contain;
    top: 10.8vw;
    width: 256vw;
  }
  #tsuginomilkMain .mainBg picture .mainBg__image {
    background-color: #F4E9D7;
    height: 100vh;
    object-position: center top;
  }
  #tsuginomilkMain #mv {
    aspect-ratio: 750 / 1003;
}
  #tsuginomilkMain #mv .mv__title {
    display: flex;
    gap: 2.8vw;
    left: 1.2vw;
    position: absolute;
    top: 64.6667vw;
  }
  #tsuginomilkMain #mv .mv__new img {
    width: 17.8667vw;
  }
  #tsuginomilkMain #mv .mv__mainTitle img {
    margin-top: 1.7333vw;
    width: 56vw;
  }
  #tsuginomilkMain #mv .mv__copy {
                    left: 5.5333vw;
        top: 18.2667vw;
  }
  #tsuginomilkMain #mv .mv__copy img {
    width: 92.2667vw;
  }
  #tsuginomilkMain #mv .mv__copy p {
    font-size: 2.6667vw;
    margin-top: 2.9333vw;
  }
  #tsuginomilkMain #mv .mv__lead {
    left: 11.2667vw;
        top: 114.4667vw;
        width: 42.4667vw;
  }
  #tsuginomilkMain #mv .mv__mainVis {
    aspect-ratio: auto;
    height: 144vw;
    left: 0;
    right: auto;
    top: 15.6vw;
    width: 100vw;
  }
  #tsuginomilkMain #mv .icon_new {
    right: 2rem;
    top: 17rem;
    width: 10rem;
}
  #tsuginomilkMain #mv .mv__mainVis img.mv__potato {
    left: 24.1333vw;
    margin-left: 0;
    margin-top: 0;
    max-width: none;
    top: 9.7917vw;
    width: 51.7333vw;
  }
  #tsuginomilkMain #mv .mv__mainVis img.mv__product {
   left: 22.0267vw;
        margin-left: 0;
        margin-top: 0;
        max-width: none;
        top: 6.6667vw;
        width: 54.9467vw;
  }
  #tsuginomilkMain #mv .mv__flash {
    filter: blur(0.4vw);
    height: 37vw;
    left: -6%;
    top: 57%;
    width: 37vw;
  }
  #tsuginomilkMain #mv .mv__tsuginomilkPink,
  #tsuginomilkMain #mv .mv__tsuginomilkGreen {
    top: 90.9333vw;
    width: 30.1333vw;
  }
  #tsuginomilkMain #mv .mv__tsuginomilkPink {
    left: 15.7333vw;
  }
  #tsuginomilkMain #mv .mv__tsuginomilkGreen {
    right: 15.7333vw;
  }
  #tsuginomilkMain #mv .mv__notice {
    bottom: -7.0667vw;
        font-size: 2.5vw;
        right: 2.2667vw;
            top: 116vw;
  }
  #tsuginomilkMain #whats-tsuginomilk {
    padding-top: 15vw;
    margin-top: 24vw;
    padding-bottom: 10rem;
    background: url(../img/shizuku_bg.png) center 78% / 63% no-repeat;
    background-color: #FFE86C;
  }
  #tsuginomilkMain #whats-tsuginomilk h2 img{
    width:20vw;
  }
  #tsuginomilkMain #whats-tsuginomilk .sectionTitle h2{
    line-height: 0;
  }
  #tsuginomilkMain #whats-tsuginomilk .sectionTitle img {
    width: 11.8rem;
}
  #tsuginomilkMain #whats-tsuginomilk .whats-brand {
    margin: 1rem auto 5rem;
  }
  #tsuginomilkMain #whats-tsuginomilk .whats-brand img {
    width:54vw;
  }
  #tsuginomilkMain #whats-tsuginomilk .calbee_logo {
            width: 6rem;
        margin-bottom: -0.2rem;
}
#tsuginomilkMain #whats-tsuginomilk .whats-tsuginomilk-title p:first-child {
    margin-bottom: 0rem;
}
#tsuginomilkMain #whats-tsuginomilk .message p {
    font-size: 1.8rem;
}
  
  
  

  #tsuginomilkMain #products {
    padding-top: 7rem;
    padding-bottom: 1rem;
  }
  #tsuginomilkMain #products h2 img{
    width:63%;
  }
  #tsuginomilkMain #products .products__message {
            font-size: 1.8rem;
        margin-top: 1.7vw;
        margin-bottom: 10rem;
  }
  #tsuginomilkMain #products .package .icon_new {
    left: 3rem;
    top: -8rem;
    z-index: 0;
    width: 11rem;
}
  #tsuginomilkMain #products .package {
    font-size: 2.5rem;
    line-height: 1.3;
}
  #tsuginomilkMain #products .package img{
    width:40%;
  }
  #tsuginomilkMain #products .package div {
    margin-top: 0rem;
}
  #tsuginomilkMain #products .package div .volume {
    font-size: 1.6rem;
}
  #tsuginomilkMain #products .point {
    background-color: #FFF7F1;
    padding: 30rem 2.5% 3rem;
    margin-top: -26rem;
    border-top-right-radius: 10rem;
    border-width:0.5rem;
}
  #tsuginomilkMain #products .point dl dt {
    font-size: 2.2rem;
}
#tsuginomilkMain #products .point dl dt img {
    top: -1.5em;
        left: 0.2em;
    width: 15vw;
}
  #tsuginomilkMain #products .point dl dd {
    font-size: 1.5rem;
}
  #tsuginomilkMain #products .point dl dd img {
    width: 17vw;
}
  #tsuginomilkMain #products .point dl dd .caption {
    font-size: 1.1rem;
}
  
  
  

  #tsuginomilkMain #how-to-drink {
    padding-bottom: 0vw;
        padding-top: 6rem;
  }
  #tsuginomilkMain #how-to-drink h2 img{
    width:83%;
  }
  
  #tsuginomilkMain #how-to-drink .time dt img{
    width:80%;
  }
  #tsuginomilkMain #how-to-drink .time dd {
    font-size: 1.6rem;
}
  
  

  #tsuginomilkMain #calbee-plus {
        padding-top: 6rem;
    padding-bottom: 1rem;
    margin-bottom: 26rem;
  }
  #tsuginomilkMain #calbee-plus h2 img{
    width:84vw;
  }
  #tsuginomilkMain #calbee-plus .limited {
    margin: 1rem auto 0;
    padding: 4rem 6% 2rem;
    border-width:0.5rem;
}
  #tsuginomilkMain #calbee-plus .limited .limitedProductName{
    font-size:2.4rem;
  }
  #tsuginomilkMain #calbee-plus .limited .limitedProductName + img{
    width:90%;
  }
  #tsuginomilkMain #calbee-plus .limited .area{
    font-size:2rem;
  }
  #tsuginomilkMain #calbee-plus .limited .area + p {
    font-size: 2.6rem;
    margin-bottom:1em;
}
  #tsuginomilkMain #calbee-plus .limited .caption {
    font-size: 1.1rem;
}
  #tsuginomilkMain #calbee-plus .limited .limitedLogo img{
    width:30vw;
  }
  

  #tsuginomilkMain .mainContainer {
    margin-top: 1vw;
  }
  #tsuginomilkMain #topBanner {
    gap: 1.3333vw;
    height: 12.5vw;
				padding-top:0.2rem;
  }
  #tsuginomilkMain #topBanner .topBanner__icon img {
    transform: translateY(0.4vw);
    width: 5.4667vw;
  }
  #tsuginomilkMain #topBanner .topBanner__text img {
    height: auto;
    transform: translateY(0.4vw);
    width: 50.6667vw;
  }
		
		#tsuginomilkMain #topBanner .end_txt {
		top: 2rem;
		font-size: 4.2vw;
		}
		
  #hamburger {
    --hamburger-fixed-top: 3.6vw;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    height: 10.9333vw;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 3.2vw;
    top: 19.6vw;
    width: 8vw;
    z-index: 1001;
  }
  #hamburger.is-fixed {
    position: fixed;
    top: var(--hamburger-fixed-top);
  }
  #hamburger::after {
    color: #80191F;
    content: "MENU";
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.9333vw;
    font-weight: 700;
    left: 50%;
    letter-spacing: 0.1467vw;
    line-height: 1;
    position: absolute;
    top: 6.1333vw;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  #hamburger span {
    background: #80191F;
    height: 0.5vw;
    left: 0;
    position: absolute;
    top: 0;
    transform: none;
    transition: opacity 0.2s ease, top 0.2s ease, transform 0.2s ease;
    width: 8vw;
  }
  #hamburger span:nth-child(2) {
    top: 2.2667vw;
  }
  #hamburger span:nth-child(1) {
    top: 0;
  }
  #hamburger span:nth-child(3) {
    top: 4.5333vw;
  }
  .navOpen #hamburger span:nth-child(1) {
    top: 2.2667vw;
    transform: rotate(45deg);
  }
  .navOpen #hamburger span:nth-child(2) {
    opacity: 0;
  }
  .navOpen #hamburger span:nth-child(3) {
    top: 2.2667vw;
    transform: rotate(-45deg);
  }
  #tsuginomilkMain #sidedrawer {
    background-color: #FFF7F1;
    display: block;
    height: 100dvh;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    width: 100vw;
    z-index: 1000;
  }
  #tsuginomilkMain #sidedrawer .sidedrawer__logo {
    display: block;
    height: auto;
    left: 50%;
    max-width: none;
    position: absolute;
    top: 30.2vw;
    transform: translateX(-50%);
    width: 36.4vw;
  }
  #tsuginomilkMain #sidedrawer .sidedrawer__nav {
    display: flex;
    flex-direction: column;
    gap: 2.02vw;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 55.345vw;
    transform: translateX(-50%);
    width: 61.3133vw;
  }
  #tsuginomilkMain #sidedrawer a {
    align-items: center;
    background-color: #FFCF3D;
    border-radius: 1.2616vw;
    color: #821820;
    cursor: pointer;
    display: flex;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 6.5604vw;
    font-weight: 700;
    height: 13.1207vw;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100%;
    z-index: 0;
  }
  #tsuginomilkMain #sidedrawer a::after {
    content: "";
    background-color: transparent;
    border-radius: 1.2616vw;
    inset: 0;
    position: absolute;
    z-index: -1;
  }
  #tsuginomilkMain #sidedrawer a::before {
    content: "";
    background-image: url("../img/navi_icon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    height: 16.6667vw;
    left: -10.6667vw;
    position: absolute;
    top: -4.8147vw;
    width: 9.4667vw;
    z-index: 2;
  }
  #tsuginomilkMain #sidedrawer a.hasMark {
    background-color: transparent;
    color: #FBF7EE;
    font-size: 7.5696vw;
        height: 15.1207vw;
    line-height: 1.3;
  }
  #tsuginomilkMain #sidedrawer a.hasMark::after {
    background-color: #D41C20;
    inset: -0.5229vw -13.2437vw 0;
    height: 15.6439vw;
  }
  #tsuginomilkMain #sidedrawer a.hasMark::before {
    display: block;
  }
  .navOpen #tsuginomilkMain #sidedrawer {
    transform: translateX(0%);
  }
  body.navOpen {
    overflow: hidden;
  }
  #header_calbeeroot {
    z-index: 102;
  }
  .navOpen #back-top {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tsuginomilkMain .mainBg__ripple,
  #tsuginomilkMain .mainBg__rippleProduct,
  #tsuginomilkMain #mv .mv__mainVis,
  #tsuginomilkMain #mv .mv__potato,
  #tsuginomilkMain #mv .mv__product {
    will-change: auto;
  }
  #tsuginomilkMain #mainNav a.active,
  #tsuginomilkMain #mainNav a.active::before {
    animation: none;
  }
}

#back-top {
  z-index:100001;
}
footer {
  position: relative;
  z-index:100000;
}