:root {
  --font-gothic:"Noto Sans JP", sans-serif;
  --font-min:"Hannari", serif;
  --color-black:#333;
  --color-brown:#5b0e09;
  --color-brown-510720:#510720;
  --color-purple:#5b2c89;
  --width: 1280;
  --height: 700;
  --px-vw: calc( 100vw / var( --width ) );
  --px-vh: calc( 100vh / var( --height ) );
}

@media screen and (max-width: 767px) {
  :root {
    --width:375;
    --height:670;
  }
}
.fadein {
  opacity: 0;
  transition: 2s ease;
  transform: translate(0, 0);
}
.fadein.fadein-down {
  transform: translate(0, -30px);
}
.fadein.fadein-up {
  transform: translate(0, 30px);
}
.fadein.on {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

@keyframes blur {
  0% {
    filter: blur(0.625rem);
    transform: translateY(14%);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  15% {
    filter: blur(0);
    transform: translateY(0);
    opacity: 1;
  }
  90% {
    filter: blur(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    filter: blur(0.625rem);
    opacity: 0;
  }
}
.c-blur {
  filter: blur(10px);
  transition: all 2s;
}
.c-blur.is-active {
  filter: blur(0);
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body .pagetop_1 {
  margin: 0;
}

.otofusweets .sp {
  display: none;
}
.otofusweets .pc {
  display: block;
}
.otofusweets .anchor {
  padding-top: 110px;
  margin-top: -110px;
}
.otofusweets {
  z-index: 0;
  font-feature-settings: "palt";
}
.otofusweets .fv {
  position: relative;
  z-index: 10;
  overflow: hidden;
  background: white;
}
.otofusweets .fv img {
  width: 100%;
}
.otofusweets .fv .slide {
  position: relative;
  width: 100%;
}
.otofusweets .fv .bg {
  height: calc(100vh - 110px);
}
.otofusweets .fv .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.otofusweets .fv .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.otofusweets .fv .img picture {
  display: block;
  width: 100%;
}
.otofusweets .fv .img img {
  width: 100%;
  max-width: none;
  height: calc(1120 * var(--px-vh));
  object-fit: cover;
  object-position: 50% 50%;
  position: relative;
  right: 0;
}
@media screen and (max-aspect-ratio: 3/2) and (min-width: 768px) {
  .otofusweets .fv .img img {
    height: 100%;
    object-position: 50% 50%;
  }
}
@media screen and (max-aspect-ratio: 1/1) and (min-width: 768px) {
  .otofusweets .fv .img img {
    height: 100%;
    object-position: 50% 0;
  }
}
@media screen and (max-aspect-ratio: 1280/1600) and (min-width: 768px) {
  .otofusweets .fv .img {
    display: block;
    width: 100%;
  }
}
.otofusweets .fv .ttl {
  position: absolute;
  top: 50%;
  left: 0;
  width: min(1000 * var(--px-vw), 1563px);
  margin: 0 calc((100% - min(1000 * var(--px-vw), 1563px)) / 2);
  margin-top: -28.8vh;
  padding: 0 min(40 * var(--px-vw), 40px) 0;
  padding: 0 calc(40 * var(--px-vw));
  box-sizing: border-box;
}
@media screen and (max-aspect-ratio: 3/2) and (min-width: 768px) {
  .otofusweets .fv .ttl {
    width: 80.2%;
    margin: 0 9.9%;
    margin-top: -19.8%;
  }
  .otofusweets .fv .ttl .ttl--1 {
    width: calc(245 * var(--px-vw));
    padding-left: calc(36 * var(--px-vw));
    margin-bottom: calc(34 * var(--px-vw));
  }
  .otofusweets .fv .ttl .ttl--2 {
    width: calc(289 * var(--px-vw));
    padding-left: calc(16 * var(--px-vw));
    margin-bottom: calc(32 * var(--px-vw));
  }
  .otofusweets .fv .ttl .ttl--3 {
    width: calc(314 * var(--px-vw));
  }
}
@media screen and (max-aspect-ratio: 1/1) and (min-width: 768px) {
  .otofusweets .fv .ttl {
    width: 28.98437%;
    padding: 0;
    margin: 0 35.507815%;
    margin-top: 0;
    top: 8.8888%;
  }
  .otofusweets .fv .ttl .ttl--1 {
    width: calc(290 * var(--px-vw));
    padding-left: 12%;
    margin-bottom: 11%;
  }
  .otofusweets .fv .ttl .ttl--2 {
    width: calc(342 * var(--px-vw));
    padding-left: 6%;
    margin-bottom: 10.1%;
  }
  .otofusweets .fv .ttl .ttl--3 {
    width: calc(371 * var(--px-vw));
  }
}
@media screen and (max-aspect-ratio: 1280/1600) and (min-width: 768px) {
  .otofusweets .fv .ttl {
    width: 34.84375%;
    margin: 0 32.578125%;
    top: 9.3%;
  }
  .otofusweets .fv .ttl .ttl--1 {
    width: calc(348 * var(--px-vw));
  }
  .otofusweets .fv .ttl .ttl--2 {
    width: calc(410 * var(--px-vw));
  }
  .otofusweets .fv .ttl .ttl--3 {
    width: calc(446 * var(--px-vw));
  }
}
.otofusweets .fv .ttl--1 {
  width: min(245 * var(--px-vw), 439px);
  padding-left: min(36 * var(--px-vw), 56px);
  margin-bottom: min(34 * var(--px-vw), 53px);
}
.otofusweets .fv .ttl--2 {
  width: min(289 * var(--px-vw), 452px);
  padding-left: min(16 * var(--px-vw), 25px);
  margin-bottom: min(32 * var(--px-vw), 50px);
}
.otofusweets .fv .ttl--3 {
  width: min(314 * var(--px-vw), 491px);
}
.otofusweets .fv .slick-slide .ttl img {
  transform: translateY(10%);
  opacity: 0;
  filter: blur(0.625rem);
  transition: 0.5s ease;
}
.otofusweets .fv .slick-slide .ttl img.ttl--1 {
  transition-delay: 0s;
}
.otofusweets .fv .slick-slide .ttl img.ttl--2, .otofusweets .fv .slick-slide .ttl img.ttl--3 {
  transition-delay: 0.5s;
}
.otofusweets .fv .slick-slide .img {
  opacity: 1;
}
.otofusweets .fv .slick-slide.slick-current .ttl img {
  animation: blur 5s linear forwards;
  opacity: 1;
  transform: translateY(0px);
}
.otofusweets .fv .slick-slide.slick-current .ttl img.ttl--1 {
  transition-delay: 0s;
  animation-delay: 0s;
}
.otofusweets .fv .slick-slide.slick-current .ttl img.ttl--2, .otofusweets .fv .slick-slide.slick-current .ttl img.ttl--3 {
  transition-delay: 0.5s;
  animation-delay: 0.5s;
}
.otofusweets .fv .slick-slide.slick-current .img {
  opacity: 1;
  transition-delay: 0s;
}
.otofusweets .intro {
  position: relative;
}
.otofusweets .intro .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
}
.otofusweets .intro .bg__img {
  position: relative;
  width: 50%;
  background: #ffcc68;
  display: flex;
  align-items: center;
}
.otofusweets .intro .bg__img .ilst {
  position: absolute;
  top: max(-90 * var(--px-vw), -90px);
  right: 0;
}
.otofusweets .intro .bg__img .ilst img {
  width: 100%;
}
.otofusweets .intro .bg__img .img {
  width: 100%;
  max-width: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.otofusweets .intro .bg__img .img.sp {
  display: none;
}
.otofusweets .intro .bg__img .img img {
  width: min(341 * var(--px-vw), 341px);
  position: relative;
  top: min(99 * var(--px-vw), 99px);
}
.otofusweets .intro .bg__img--1 {
  justify-content: flex-end;
}
.otofusweets .intro .bg__img--1 img {
  right: min(30 * var(--px-vw), 30px);
}
.otofusweets .intro .bg__img--2 {
  justify-content: flex-start;
  background: #f1c0d5;
}
.otofusweets .intro .bg__img--2 .ilst {
  right: auto;
  left: 0;
}
.otofusweets .intro .bg__img--2 img {
  left: min(30 * var(--px-vw), 30px);
}
.otofusweets .intro__cnt {
  position: relative;
  z-index: 1;
  padding: min(110 * var(--px-vw), 110px) 0 min(102 * var(--px-vw), 102px);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.otofusweets .intro__ttl {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-min);
  font-size: min(37 * var(--px-vw), 37px);
  letter-spacing: -0.02em;
  color: var(--color-brown);
  margin-left: max(-1 * var(--px-vw), -1px);
  margin-bottom: min(46 * var(--px-vw), 46px);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-stroke: 1px var(--color-brown);
  -webkit-text-stroke: 1px var(--color-brown);
}
.otofusweets .intro__ttl img {
  width: min(33 * var(--px-vw), 33px);
  height: min(409 * var(--px-vw), 409px);
  display: block;
}
.otofusweets .intro__txt {
  font-size: min(21 * var(--px-vw), 21px);
  text-align: center;
  font-family: var(--font-min);
  letter-spacing: -0.05em;
  line-height: 1.9;
  color: var(--color-brown);
  text-stroke: 0.5px var(--color-brown);
  -webkit-text-stroke: 0.5px var(--color-brown);
}
.otofusweets .detail {
  position: relative;
  z-index: 0;
  padding-top: min(107 * var(--px-vw), 107px);
  padding-bottom: min(100 * var(--px-vw), 100px);
}
.otofusweets .detail .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}
.otofusweets .detail .bg--1, .otofusweets .detail .bg--2 {
  width: 50%;
  height: 100%;
}
.otofusweets .detail .bg--1 {
  background: #ec8d1c;
}
.otofusweets .detail .bg--2 {
  background: #ca87b5;
}
.otofusweets .detail__cnt {
  display: flex;
  justify-content: center;
  margin-bottom: min(94 * var(--px-vw), 94px);
}
.otofusweets .detail__cnt--1, .otofusweets .detail__cnt--2 {
  width: 50%;
  max-width: 552px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.otofusweets .detail__cnt .pkg {
  width: min(322 * var(--px-vw), 322px);
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.4));
  margin-bottom: min(48 * var(--px-vw), 48px);
}
.otofusweets .detail__cnt .pkg--2 {
  width: min(331 * var(--px-vw), 331px);
  margin-bottom: min(50 * var(--px-vw), 50px);
}
.otofusweets .detail__cnt .ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: min(23 * var(--px-vw), 23px);
}
.otofusweets .detail__cnt .ttl--1 {
  width: min(202 * var(--px-vw), 202px);
  margin-bottom: min(20 * var(--px-vw), 20px);
}
.otofusweets .detail__cnt .ttl--2 {
  width: min(235 * var(--px-vw), 235px);
  padding-right: min(10 * var(--px-vw), 10px);
}
.otofusweets .detail__cnt .txt {
  text-align: justify;
  max-width: min(286 * var(--px-vw), 286px);
  color: white;
  font-size: min(19 * var(--px-vw), 19px);
  line-height: 2.05;
  letter-spacing: 0.08em;
  margin-bottom: min(33 * var(--px-vw), 33px);
}
.otofusweets .detail__cnt .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: white;
  border-radius: 100px;
  border: 2px solid var(--color-brown);
  text-decoration: none;
  color: var(--color-brown);
  width: min(252 * var(--px-vw), 252px);
  max-width: 100%;
  height: min(52 * var(--px-vw), 52px);
  min-height: 52px;
  font-size: min(22 * var(--px-vw), 22px);
  font-weight: 700;
  padding-right: 0.8181818em;
  box-sizing: border-box;
  transition: 0.3s ease;
}
.otofusweets .detail__cnt .btn svg {
  position: absolute;
  top: 50%;
  right: 9%;
  width: 0.5454545em;
  height: 0.6363636em;
  fill: var(--color-brown);
  transform: translateY(-50%);
}
.otofusweets .detail__cnt--1 .btn:hover {
  background: var(--color-brown);
  color: white;
}
.otofusweets .detail__cnt--1 .btn:hover svg {
  fill: white;
}
.otofusweets .detail__cnt--2 .ttl, .otofusweets .detail__cnt--2 .txt {
  padding-left: min(6 * var(--px-vw), 6px);
}
.otofusweets .detail__cnt--2 .btn {
  border-color: var(--color-purple);
  color: var(--color-purple);
}
.otofusweets .detail__cnt--2 .btn svg {
  fill: var(--color-purple);
}
.otofusweets .detail__cnt--2 .btn:hover {
  background: var(--color-purple);
  color: white;
}
.otofusweets .detail__cnt--2 .btn:hover svg {
  fill: white;
}
.otofusweets .detail__how {
  width: min(1000 * var(--px-vw), 1000px);
  max-width: 100%;
  margin: 0 auto;
  background: white;
  border: 2px solid var(--color-brown);
  border-radius: min(30 * var(--px-vw), 30px);
  padding: min(30 * var(--px-vw), 30px) min(28 * var(--px-vw), 28px) min(54 * var(--px-vw), 54px);
  box-sizing: border-box;
}
.otofusweets .detail__how .ttl {
  position: relative;
  background: var(--color-brown-510720);
  border-radius: 100px;
  color: white;
  text-align: center;
  min-height: 54px;
  font-size: min(24 * var(--px-vw), 24px);
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: min(40 * var(--px-vw), 40px);
}
.otofusweets .detail__how .ttl img {
  position: absolute;
  top: max(-62 * var(--px-vw), -62px);
  right: max(-9 * var(--px-vw), -9px);
}
.otofusweets .detail__how ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  padding-left: min(25 * var(--px-vw), 25px);
}
.otofusweets .detail__how ul li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.otofusweets .detail__how ul li p {
  position: relative;
  font-size: min(19 * var(--px-vw), 19px);
  font-weight: 500;
  color: var(--color-brown-510720);
  letter-spacing: 0.04em;
  padding-left: 1em;
}
.otofusweets .detail__how ul li p span {
  position: absolute;
  top: 0;
  left: 0;
}
.otofusweets .detail__how ul li .img img {
  width: 100%;
}
.otofusweets .detail__how ul li.li--1 .img {
  width: min(305 * var(--px-vw), 305px);
  height: min(159 * var(--px-vw), 159px);
  position: relative;
  bottom: max(-5 * var(--px-vw), -5px);
  left: max(-17 * var(--px-vw), -17px);
}
.otofusweets .detail__how ul li.li--2 p {
  margin-left: 0.7em;
  margin-bottom: min(13 * var(--px-vw), 13px);
}
.otofusweets .detail__how ul li.li--2 .img {
  width: min(273 * var(--px-vw), 273px);
  height: min(166 * var(--px-vw), 166px);
  position: relative;
  left: min(19 * var(--px-vw), 19px);
}
.otofusweets .detail__how ul li.li--3 p {
  margin-left: 1.5789473em;
}
.otofusweets .detail__how ul li.li--3 .img {
  width: min(256 * var(--px-vw), 256px);
  height: min(138 * var(--px-vw), 138px);
  position: relative;
  right: min(7 * var(--px-vw), 7px);
}
.otofusweets .protein {
  background: #f1eed6;
  padding: min(122 * var(--px-vw), 122px) 0 min(80 * var(--px-vw), 80px);
}
.otofusweets .protein .ttl {
  text-align: center;
  margin-bottom: min(52 * var(--px-vw), 52px);
}
.otofusweets .protein .ttl img {
  width: min(785 * var(--px-vw), 785px);
}
.otofusweets .protein .sub-ttl img {
  width: min(384 * var(--px-vw), 384px);
}
.otofusweets .protein .ilst {
  text-align: center;
  margin-bottom: min(65 * var(--px-vw), 65px);
}
.otofusweets .protein .ilst img {
  width: min(1004 * var(--px-vw), 1004px);
  margin-right: max(-8 * var(--px-vw), -8px);
}
.otofusweets .protein__cnt .sub-ttl {
  text-align: center;
  margin-bottom: min(30 * var(--px-vw), 30px);
}
.otofusweets .protein__cnt .txt {
  text-align: center;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-size: min(20 * var(--px-vw), 20px);
  color: var(--color-brown);
  line-height: 1.9;
}
@media screen and (max-width: 767px) {
  .otofusweets .pc {
    display: none;
  }
  .otofusweets .sp {
    display: block;
  }
  .otofusweets .fv {
    height: calc(100vh - 14.67vw);
  }
  .otofusweets .fv .bg {
    width: 100%;
    height: calc(100vh - 14.67vw);
    min-height: auto;
  }
  .otofusweets .fv .img {
    display: block;
    width: 100%;
  }
  .otofusweets .fv .img img {
    width: 100%;
    height: auto;
    right: 0;
    bottom: 0;
    position: absolute;
  }
  .otofusweets .fv .ttl {
    width: calc(198 * var(--px-vw));
    height: calc(253 * var(--px-vw));
    margin: 0;
    padding: 0;
    top: calc(34 * var(--px-vh));
    left: 50%;
    margin-left: calc(-99 * var(--px-vw));
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .otofusweets .fv .ttl--1 {
    width: calc(155 * var(--px-vw));
    padding: 0;
    padding-left: calc(3 * var(--px-vw));
    margin-bottom: calc(21 * var(--px-vw));
  }
  .otofusweets .fv .ttl--2 {
    width: calc(182 * var(--px-vw));
    padding: 0;
    padding-left: calc(6 * var(--px-vw));
    margin-bottom: calc(20 * var(--px-vw));
  }
  .otofusweets .fv .ttl--3 {
    width: calc(198 * var(--px-vw));
    padding: 0;
    margin-bottom: 0;
  }
  .otofusweets .intro .bg__img {
    align-items: flex-start;
  }
  .otofusweets .intro .bg__img .ilst {
    width: 100%;
    top: calc(-30 * var(--px-vw));
  }
  .otofusweets .intro .bg__img .img.pc {
    display: none;
  }
  .otofusweets .intro .bg__img .img.sp {
    display: flex;
  }
  .otofusweets .intro .bg__img .img img {
    width: calc(136 * var(--px-vw));
    top: 0;
  }
  .otofusweets .intro .bg__img--1 .img img {
    top: calc(44 * var(--px-vw));
    right: calc(3 * var(--px-vw));
  }
  .otofusweets .intro .bg__img--2 .img img {
    top: calc(174 * var(--px-vw));
    left: calc(5 * var(--px-vw));
  }
  .otofusweets .intro__ttl {
    margin-bottom: calc(35 * var(--px-vw));
  }
  .otofusweets .intro__ttl img {
    width: calc(21 * var(--px-vw));
    height: calc(265 * var(--px-vw));
  }
  .otofusweets .intro__cnt {
    padding-top: calc(70 * var(--px-vw));
    padding-bottom: calc(54 * var(--px-vw));
  }
  .otofusweets .intro__txt {
    font-size: calc(15 * var(--px-vw));
    line-height: 1.87;
  }
  .otofusweets .detail {
    padding: 0;
  }
  .otofusweets .detail .bg {
    display: none;
  }
  .otofusweets .detail__cnt {
    display: block;
    width: 100%;
    margin-bottom: 0;
  }
  .otofusweets .detail__cnt .pkg {
    width: calc(189 * var(--px-vw));
    margin-bottom: calc(28 * var(--px-vw));
  }
  .otofusweets .detail__cnt .ttl--1 {
    width: calc(148 * var(--px-vw));
    margin-bottom: calc(15 * var(--px-vw));
    padding: 0;
    padding-left: calc(3 * var(--px-vw));
  }
  .otofusweets .detail__cnt .ttl--2 {
    width: calc(172 * var(--px-vw));
    padding: 0;
    padding-right: calc(5 * var(--px-vw));
  }
  .otofusweets .detail__cnt .txt {
    width: 100%;
    max-width: none;
    padding: 0 calc(40 * var(--px-vw));
    font-size: calc(15 * var(--px-vw));
    box-sizing: border-box;
    line-height: 2;
    margin-bottom: calc(29 * var(--px-vw));
  }
  .otofusweets .detail__cnt .btn {
    font-size: calc(16 * var(--px-vw));
    width: calc(182 * var(--px-vw));
    height: calc(37 * var(--px-vw));
    min-height: calc(37 * var(--px-vw));
    border-width: 1px;
  }
  .otofusweets .detail__cnt .btn svg {
    right: 11%;
  }
  .otofusweets .detail__cnt--1, .otofusweets .detail__cnt--2 {
    width: 100%;
    padding-top: calc(63 * var(--px-vw));
    padding-bottom: calc(61 * var(--px-vw));
  }
  .otofusweets .detail__cnt--1 {
    background: #ec8d1c;
  }
  .otofusweets .detail__cnt--2 {
    background: #ca87b5;
    padding-bottom: 0;
  }
  .otofusweets .detail__cnt--2 .pkg {
    padding-top: calc(2 * var(--px-vw));
    padding-left: calc(2 * var(--px-vw));
    width: calc(191 * var(--px-vw));
    margin-bottom: calc(32 * var(--px-vw));
  }
  .otofusweets .detail__cnt--2 .ttl {
    padding: 0;
  }
  .otofusweets .detail__how {
    padding: calc(18 * var(--px-vw)) calc(18 * var(--px-vw));
    border-radius: calc(20 * var(--px-vw));
  }
  .otofusweets .detail__how__wrap {
    width: 100%;
    margin: 0 auto;
    background: #ca87b5;
    padding: calc(79 * var(--px-vw)) calc(29 * var(--px-vw)) calc(40 * var(--px-vw));
    box-sizing: border-box;
  }
  .otofusweets .detail__how .ttl {
    font-size: calc(21 * var(--px-vw));
    min-height: calc(48 * var(--px-vw));
    justify-content: flex-start;
    padding: 0 1em;
    letter-spacing: 0.05em;
    margin-bottom: calc(18 * var(--px-vw));
  }
  .otofusweets .detail__how .ttl img {
    width: calc(125 * var(--px-vw));
    top: calc(-59 * var(--px-vw));
    right: calc(-29 * var(--px-vw));
  }
  .otofusweets .detail__how ul {
    display: block;
    padding: 0;
    padding-left: calc(6 * var(--px-vw));
  }
  .otofusweets .detail__how ul li p {
    font-size: calc(17 * var(--px-vw));
  }
  .otofusweets .detail__how ul li .img {
    margin: 0 auto calc(11 * var(--px-vw));
  }
  .otofusweets .detail__how ul li.li--1 .img {
    width: calc(232 * var(--px-vw));
    height: auto;
    margin-top: calc(11 * var(--px-vw));
    bottom: auto;
    left: calc(4 * var(--px-vw));
  }
  .otofusweets .detail__how ul li.li--1 .img img {
    width: 100%;
  }
  .otofusweets .detail__how ul li.li--2 p {
    margin: 0;
  }
  .otofusweets .detail__how ul li.li--2 .img {
    width: calc(228 * var(--px-vw));
    height: auto;
    margin-top: calc(15 * var(--px-vw));
    margin-bottom: calc(34 * var(--px-vw));
    bottom: 0;
    left: calc(4 * var(--px-vw));
  }
  .otofusweets .detail__how ul li.li--2 .img img {
    width: 100%;
  }
  .otofusweets .detail__how ul li.li--3 p {
    margin: 0;
  }
  .otofusweets .detail__how ul li.li--3 .img {
    width: calc(214 * var(--px-vw));
    height: auto;
    margin-top: calc(21 * var(--px-vw));
    margin-bottom: calc(1 * var(--px-vw));
    left: calc(-3 * var(--px-vw));
  }
  .otofusweets .detail__how ul li.li--3 .img img {
    width: 100%;
  }
  .otofusweets .protein {
    padding-top: calc(51 * var(--px-vw));
    padding-bottom: calc(47 * var(--px-vw));
  }
  .otofusweets .protein .ttl {
    margin-bottom: calc(23 * var(--px-vw));
  }
  .otofusweets .protein .ttl img {
    width: calc(270 * var(--px-vw));
  }
  .otofusweets .protein .ilst {
    margin-bottom: calc(22 * var(--px-vw));
  }
  .otofusweets .protein .ilst img {
    width: calc(337 * var(--px-vw));
    margin: 0;
  }
  .otofusweets .protein .sub-ttl {
    margin-bottom: calc(19 * var(--px-vw));
  }
  .otofusweets .protein .sub-ttl img {
    width: calc(235 * var(--px-vw));
  }
  .otofusweets .protein__cnt {
    padding: 0 calc(30 * var(--px-vw));
  }
  .otofusweets .protein__cnt .txt {
    font-size: calc(15 * var(--px-vw));
    line-height: 1.8;
    letter-spacing: -0.05em;
    text-align: justify;
  }
}

/*# sourceMappingURL=otofusweets.css.map */