@charset "UTF-8";
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(5.3333333333vw);
    @media screen and (min-width: 641px) {
      transform: translateY(min(40px, 3.2vw));
    }
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
ul,
ol,
li,
dl,
dt,
dd,
figure,
figcaption,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #0C1112;
}
a:hover {
  text-decoration: none;
  color: #0C1112;
}
a:hover img {
  opacity: 1;
}

img {
  width: 100%;
  height: auto;
}

html {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  scroll-behavior: auto !important;
}

body {
  font-family: YakuHanJP, "Noto Sans JP", serif;
  font-feature-settings: "palt";
  width: 100%;
  color: #0C1112;
  overflow: hidden;
}

.pc {
  display: block;
}
@media screen and (max-width: 641px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 641px) {
  .sp {
    display: block;
  }
}

header {
  position: fixed;
  top: 0;
  z-index: 101;
  height: 17.3333333333vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background-color: #fff;
  border-bottom: 0.2666666667vw solid #c4c4c4;
  padding-right: 4.2666666667vw;
  transform: translate3d(0, 0, 0);
}
@media screen and (min-width: 641px) {
  header {
    height: min(76px, 6.08vw);
    padding: 0 min(20px, 1.6vw) 0 0;
    border-bottom-width: min(1px, 0.08vw);
  }
  header:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
  }
}
header p {
  z-index: 1;
  width: auto;
  height: 100%;
}
header p img {
  height: 100%;
  width: auto;
}
header button {
  display: grid;
  place-content: center;
  width: 8.5333333333vw;
  height: 8.5333333333vw;
  background: none;
  z-index: 10;
  position: relative;
}
@media screen and (min-width: 641px) {
  header button {
    display: none;
  }
}
header button .wrap {
  width: 6.4vw;
  height: 4.2666666667vw;
  position: relative;
  display: block;
}
header button .wrap span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.5333333333vw;
  border-radius: 0.5333333333vw;
  transition: all 0.5s;
}
header button .wrap span:nth-of-type(1) {
  top: 0;
  background-color: #0C1112;
}
header button .wrap span:nth-of-type(2) {
  width: 5.3333333333vw;
  top: 1.8666666667vw;
  background-color: #008AB4;
}
header button .wrap span:nth-of-type(3) {
  bottom: 0;
  background-color: #D6007F;
}
header button.active .wrap span:nth-of-type(1) {
  left: 50%;
  opacity: 0;
  animation: active-bar01 0.75s forwards;
}
header button.active .wrap span:nth-of-type(2) {
  width: 6.4vw;
  transform: translateY(0vw) rotate(-45deg);
}
header button.active .wrap span:nth-of-type(3) {
  transform: translateY(-1.8666666667vw) rotate(45deg);
}
@keyframes active-bar01 {
  100% {
    height: 0;
  }
}
header #gNavi {
  display: none;
  height: auto;
  max-height: 100svh;
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 17.0666666667vw;
  left: 0;
  overflow-y: scroll;
}
@media screen and (min-width: 641px) {
  header #gNavi {
    display: flex;
    top: auto;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    max-height: 100%;
    width: max-content;
    height: 100%;
    align-items: center;
  }
}
header #gNavi ul {
  display: block;
}
@media screen and (min-width: 641px) {
  header #gNavi ul {
    display: flex;
    gap: 0;
    height: 100%;
  }
}
header #gNavi ul li > a, header #gNavi ul li > span {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  width: 100%;
  padding: 3.7333333333vw 8vw;
  font-size: 4.2666666667vw;
  line-height: 1;
  font-weight: 700;
  color: #0C1112;
  border-bottom: 0.2666666667vw solid #c4c4c4;
  display: grid;
  grid-template-columns: 1fr 3.4666666667vw;
  position: relative;
  align-items: center;
}
@media screen and (min-width: 641px) {
  header #gNavi ul li > a, header #gNavi ul li > span {
    padding: 0 min(10px, 0.8vw);
    height: 100%;
    border: none;
    display: flex;
    width: max-content;
    font-size: min(1.12vw, 14px);
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    z-index: 1;
    transition: background-color 0.2s linear, color 0.2s linear;
  }
  header #gNavi ul li > a:before, header #gNavi ul li > span:before {
    content: "";
    width: 100%;
    height: min(7px, 0.56vw);
    background-color: #008AB4;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.3, 0.9);
    transform-origin: right;
    transform: scaleX(0);
  }
  header #gNavi ul li > a.active:before, header #gNavi ul li > span.active:before {
    transform: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  header #gNavi ul li > a:hover:before, header #gNavi ul li > span:hover:before {
    transition: transform 0.2s;
    transform-origin: left;
    transform: scaleX(1);
  }
}
header #gNavi ul li a:after {
  content: "";
  width: 3.4666666667vw;
  aspect-ratio: 13/4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='4' fill='none'%3E%3Cpath fill='%230C1112' fill-rule='evenodd' d='M8.62.175A.5.5 0 0 1 9.325.12l3.5 3A.5.5 0 0 1 12.5 4H.5a.5.5 0 0 1 0-1h10.648L8.675.88A.5.5 0 0 1 8.62.175Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
@media screen and (min-width: 641px) {
  header #gNavi ul li a:after {
    display: none;
  }
}
@media screen and (min-width: 641px) {
  header #gNavi ul li > span {
    display: grid;
    grid-template-columns: 1fr min(8px, 0.64vw);
    gap: min(6px, 0.48vw);
  }
}
header #gNavi ul li > span:after {
  content: "";
  width: 3.4666666667vw;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='14' fill='none'%3E%3Cpath fill='%230C1112' fill-rule='evenodd' d='M13 7a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1 0-1h12a.5.5 0 0 1 .5.5Z' clip-rule='evenodd'/%3E%3Cpath fill='%230C1112' fill-rule='evenodd' d='M6.75 13.5a.5.5 0 0 1-.5-.5V1a.5.5 0 0 1 1 0v12a.5.5 0 0 1-.5.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
@media screen and (min-width: 641px) {
  header #gNavi ul li > span:after {
    width: 100%;
    aspect-ratio: 4/8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' fill='none'%3E%3Cpath fill='%23161616' d='M.675.107A.403.403 0 0 0 .389.004a.417.417 0 0 0-.28.119A.379.379 0 0 0 0 .395a.366.366 0 0 0 .125.266l3.598 3.235a.41.41 0 0 0 .55 0L7.87.661A.382.382 0 0 0 8 .394.364.364 0 0 0 7.89.12.4.4 0 0 0 7.61 0a.418.418 0 0 0-.287.107L3.998 3.096.675.107Z'/%3E%3C/svg%3E");
  }
}
header #gNavi ul li > span.active:after {
  aspect-ratio: 13/2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='2' fill='none'%3E%3Cpath fill='%230C1112' fill-rule='evenodd' d='M13 1a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1 0-1h12a.5.5 0 0 1 .5.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
@media screen and (min-width: 641px) {
  header #gNavi ul li > span.active:after {
    aspect-ratio: 4/8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' fill='none'%3E%3Cpath fill='%23161616' d='M.675.107A.403.403 0 0 0 .389.004a.417.417 0 0 0-.28.119A.379.379 0 0 0 0 .395a.366.366 0 0 0 .125.266l3.598 3.235a.41.41 0 0 0 .55 0L7.87.661A.382.382 0 0 0 8 .394.364.364 0 0 0 7.89.12.4.4 0 0 0 7.61 0a.418.418 0 0 0-.287.107L3.998 3.096.675.107Z'/%3E%3C/svg%3E");
    transform: rotate(180deg);
  }
}
header #gNavi ul li ul {
  display: none;
  padding-left: 13.3333333333vw;
}
@media screen and (min-width: 641px) {
  header #gNavi ul li ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 min(30px, 2.4vw);
    background-color: #fff;
    top: min(76px, 6.08vw);
    position: fixed;
    width: calc(100% - min(60px, 4.8vw));
    left: min(30px, 2.4vw);
    border-radius: 0 0 min(40px, 3.2vw) min(40px, 3.2vw);
    box-shadow: 0 0 min(40px, 3.2vw) 0 rgba(0, 45, 93, 0.25);
    padding: min(50px, 4vw) min(55px, 4.4vw) min(55px, 4.4vw);
    height: auto;
  }
}
header #gNavi ul li ul li a {
  display: grid;
  grid-template-columns: 26.6666666667vw 1fr 3.4666666667vw;
  position: relative;
  align-items: center;
  padding-left: 0;
}
@media screen and (min-width: 641px) {
  header #gNavi ul li ul li a {
    grid-template-columns: min(120px, 9.6vw) 1fr min(30px, 2.4vw);
    gap: min(15px, 1.2vw) min(30px, 2.4vw);
    padding: min(20px, 1.6vw);
    width: 100%;
    font-size: min(1.44vw, 18px);
    line-height: 1;
    align-self: flex-end;
    background: url(../img/line.svg) repeat-x top/auto min(2px, 0.16vw);
    transition: background-color 0.2s linear, color 0.2s linear;
  }
  header #gNavi ul li ul li a:before {
    content: "";
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #f7f7f7;
    display: block;
    grid-row: 1/3;
    position: relative;
    bottom: auto;
    transform: none;
  }
  header #gNavi ul li ul li a:after {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: min(1px, 0.08vw) solid #0C1112;
    background-size: min(16px, 1.28vw) auto;
    align-self: flex-end;
    grid-row: 1/3;
    background-color: #fff;
  }
  header #gNavi ul li ul li a img {
    width: auto;
    height: min(32px, 2.56vw);
    display: block;
    margin-top: min(15px, 1.2vw);
  }
}
header #gNavi ul li ul li a .pc {
  align-self: flex-end;
}
header #gNavi ul li ul li a span:not(.sp, .pc) {
  background-color: #fff;
  font-size: 2.6666666667vw;
  line-height: 1;
  letter-spacing: 0.2px;
  padding: 0 1.0666666667vw;
  border: 0.2666666667vw solid #0C1112;
  border-radius: 1.0666666667vw;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.2666666667vw;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  header #gNavi ul li ul li a span:not(.sp, .pc) {
    font-size: min(1.12vw, 14px);
    line-height: 1;
    padding: 0 min(4px, 0.32vw);
    height: min(21px, 1.68vw);
    border-width: min(1px, 0.08vw);
    letter-spacing: 0.42px;
    border-radius: min(4px, 0.32vw);
    grid-row: 2/3;
    align-self: flex-start;
  }
}
header #gNavi ul li ul li:nth-of-type(1) a:before {
  background-image: url(../img/product-helcare2.png);
  background-size: min(90px, 7.2vw) auto;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(min(2px, 0.16vw)) translateX(min(2px, 0.16vw));
}
@media (hover: hover) and (pointer: fine) {
  header #gNavi ul li ul li:nth-of-type(1) a:hover {
    background-color: #C9C5FD;
  }
}
header #gNavi ul li ul li:nth-of-type(2) a:before {
  background-image: url(../img/product-toushiblock.png);
  background-size: min(60px, 4.8vw) auto;
  background-repeat: no-repeat;
  background-position: center;
}
@media (hover: hover) and (pointer: fine) {
  header #gNavi ul li ul li:nth-of-type(2) a:hover {
    background-color: #FDDCD2;
  }
}
@media screen and (min-width: 641px) {
  header #gNavi ul li ul li:nth-of-type(3) a {
    background: url(../img/line.svg) repeat-x top/auto min(2px, 0.16vw), url(../img/line.svg) repeat-x bottom/auto min(2px, 0.16vw);
  }
}
header #gNavi ul li ul li:nth-of-type(3) a:before {
  background-image: url(../img/product-nyousanguard.png);
  background-size: min(62px, 4.96vw) auto;
  background-repeat: no-repeat;
  background-position: center;
}
@media (hover: hover) and (pointer: fine) {
  header #gNavi ul li ul li:nth-of-type(3) a:hover {
    background-color: #FEF9D6;
  }
}
@media screen and (min-width: 641px) {
  header #gNavi ul li ul li:nth-of-type(4) a {
    background: url(../img/line.svg) repeat-x top/auto min(2px, 0.16vw), url(../img/line.svg) repeat-x bottom/auto min(2px, 0.16vw);
  }
}
header #gNavi ul li ul li:nth-of-type(4) a:before {
  background-image: url(../img/product-kekkansaracare.png);
  background-size: min(60px, 4.8vw) auto;
  background-repeat: no-repeat;
  background-position: center;
}
@media (hover: hover) and (pointer: fine) {
  header #gNavi ul li ul li:nth-of-type(4) a:hover {
    background-color: #FDC5CA;
  }
}
header.clear {
  position: absolute;
  background-color: transparent;
  border-bottom: none;
  border-bottom: 0.2666666667vw solid transparent;
  transition: background-color 0.2s ease-in-out 0.2s;
}
@media screen and (min-width: 641px) {
  header.clear {
    border-bottom-width: min(1px, 0.08vw);
  }
  header.clear:before {
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }
}
header.clear.active {
  background-color: #fff;
  border-bottom: 0.2666666667vw solid #c4c4c4;
  transition: background-color 0s;
}
@media screen and (min-width: 641px) {
  header.clear.active {
    background-color: transparent;
    border-bottom-width: min(1px, 0.08vw);
  }
  header.clear.active:before {
    opacity: 1;
  }
}

#allproduct {
  z-index: 100;
  position: relative;
  background: url(../img/bg-cream.png) repeat top center/100% auto;
}
@media screen and (min-width: 641px) {
  #allproduct {
    background-size: min(375px, 30vw) auto;
  }
}
#allproduct .wrap {
  width: 100%;
  border-radius: 50vw 50vw 0 0;
  background: url(../img/bg-gray.png) repeat center;
  background-size: 100vw auto;
  padding-bottom: 16vw;
  position: relative;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap {
    border-radius: 0;
    background-size: min(375px, 30vw) auto;
    padding-bottom: min(140px, 11.2vw);
    margin-top: max(-2px, -0.16vw);
  }
  #allproduct .wrap:before {
    content: "";
    width: 100%;
    aspect-ratio: 1280/90;
    background-image: url(../img/allproduct-bg.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: block;
    position: absolute;
    top: 0;
    transform: translateY(calc(-100% + 1px));
    left: 0;
  }
}
#allproduct .wrap .supplement {
  padding-top: 16vw;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  text-align: center;
  opacity: 0;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap .supplement {
    padding-top: min(50px, 4vw);
    display: grid;
    grid-template-columns: min(350px, 28vw) 1fr;
    align-items: flex-start;
    gap: min(75px, 6vw);
    width: min(1130px, 90.4vw);
    transform: translateX(min(10px, 0.8vw));
  }
}
#allproduct .wrap .supplement.animeOn {
  animation: fadeInUp 0.5s ease-out 0.2s forwards;
}
#allproduct .wrap .supplement dt {
  width: 57.6vw;
  margin: 0 auto;
  padding: 3.2vw 0;
  position: relative;
  border-top: 0.2666666667vw solid #0C1112;
  border-bottom: 0.2666666667vw solid #0C1112;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap .supplement dt {
    width: 100%;
    padding: min(15px, 1.2vw) 0;
    border-top-width: min(1px, 0.08vw);
    border-bottom-width: min(1px, 0.08vw);
  }
}
#allproduct .wrap .supplement dt:before, #allproduct .wrap .supplement dt:after {
  content: "";
  position: relative;
  width: 100%;
  height: 0.2666666667vw;
  background-color: #0C1112;
  display: block;
  position: relative;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap .supplement dt:before, #allproduct .wrap .supplement dt:after {
    height: min(1px, 0.08vw);
  }
}
#allproduct .wrap .supplement dt:before {
  top: -2.4vw;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap .supplement dt:before {
    top: max(-12px, -0.96vw);
  }
}
#allproduct .wrap .supplement dt:after {
  bottom: -2.4vw;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap .supplement dt:after {
    bottom: max(-12px, -0.96vw);
  }
}
#allproduct .wrap .supplement dd {
  margin: 5.3333333333vw auto 0;
  width: 89.3333333333vw;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap .supplement dd {
    margin-top: max(-10px, -0.8vw);
    width: 100%;
  }
}
#allproduct .wrap nav {
  width: 84vw;
  margin: 4vw auto 0;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav {
    width: min(1110px, 88.8vw);
    margin-top: min(50px, 4vw);
  }
}
#allproduct .wrap nav ul {
  background: url(../img/line.svg) repeat-x top/auto 0.5333333333vw;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 min(30px, 2.4vw);
    background: none;
  }
}
#allproduct .wrap nav ul li {
  background: url(../img/line.svg) repeat-x bottom/auto 0.5333333333vw;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li {
    background: url(../img/line.svg) repeat-x bottom/auto min(2px, 0.16vw);
    transition: background-color 0.2s linear, color 0.2s linear;
  }
  #allproduct .wrap nav ul li:nth-of-type(1), #allproduct .wrap nav ul li:nth-of-type(2) {
    background: url(../img/line.svg) repeat-x top/auto min(2px, 0.16vw), url(../img/line.svg) repeat-x bottom/auto min(2px, 0.16vw);
  }
}
#allproduct .wrap nav ul li > a, #allproduct .wrap nav ul li > span {
  display: grid;
  grid-template-columns: 23.2vw 1fr;
  padding: 3.2vw 2.6666666667vw;
  position: relative;
  gap: 2.1333333333vw;
  align-items: center;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li > a, #allproduct .wrap nav ul li > span {
    grid-template-columns: min(120px, 9.6vw) 1fr;
    padding: min(20px, 1.6vw);
    gap: min(30px, 2.4vw);
  }
}
#allproduct .wrap nav ul li > a > span, #allproduct .wrap nav ul li > span > span {
  background-color: #fff;
  border-radius: 50%;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
}
#allproduct .wrap nav ul li > a p, #allproduct .wrap nav ul li > span p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.6666666667vw;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li > a p, #allproduct .wrap nav ul li > span p {
    gap: min(15px, 1.2vw);
  }
}
#allproduct .wrap nav ul li > a p span:nth-of-type(1), #allproduct .wrap nav ul li > span p span:nth-of-type(1) {
  font-size: 3.4666666667vw;
  line-height: 1;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-weight: 600;
  white-space: nowrap;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li > a p span:nth-of-type(1), #allproduct .wrap nav ul li > span p span:nth-of-type(1) {
    font-size: min(1.44vw, 18px);
    line-height: 1;
  }
}
#allproduct .wrap nav ul li > a p img, #allproduct .wrap nav ul li > span p img {
  display: block;
  width: auto;
  height: 6.6666666667vw;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li > a p img, #allproduct .wrap nav ul li > span p img {
    height: min(32px, 2.56vw);
  }
}
#allproduct .wrap nav ul li > a p span:nth-of-type(2), #allproduct .wrap nav ul li > span p span:nth-of-type(2) {
  width: max-content;
  font-size: 2.6666666667vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 0.8vw;
  border-radius: 1.0666666667vw;
  border: 0.2666666667vw solid #0C1112;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li > a p span:nth-of-type(2), #allproduct .wrap nav ul li > span p span:nth-of-type(2) {
    font-size: min(1.12vw, 14px);
    line-height: 1;
    padding: min(3px, 0.24vw);
    border-width: min(1px, 0.08vw);
    border-radius: min(4px, 0.32vw);
  }
}
#allproduct .wrap nav ul li a:after {
  content: "";
  width: 8vw;
  aspect-ratio: 1/1;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4' fill='none'%3E%3Cpath fill='%230C1112' fill-rule='evenodd' d='M11.62.175a.5.5 0 0 1 .705-.055l3.5 3A.5.5 0 0 1 15.5 4H.5a.5.5 0 0 1 0-1h13.648L11.675.88a.5.5 0 0 1-.055-.705Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 4.2666666667vw auto;
  background-position: center;
  border-radius: 50%;
  display: grid;
  place-content: center;
  position: absolute;
  right: 0;
  bottom: 2.6666666667vw;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li a:after {
    width: min(30px, 2.4vw);
    background-size: min(16px, 1.28vw) auto;
    bottom: min(20px, 1.6vw);
    right: min(20px, 1.6vw);
  }
}
#allproduct .wrap nav ul li.Helcare a > span img,
#allproduct .wrap nav ul li.Helcare span > span img {
  width: 17.8666666667vw;
  transform: translateX(0.5333333333vw) translateY(0.8vw);
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li.Helcare a > span img,
  #allproduct .wrap nav ul li.Helcare span > span img {
    width: min(75px, 6vw);
    transform: translateX(min(2px, 0.16vw)) translateY(min(3px, 0.24vw));
  }
}
@media (hover: hover) and (pointer: fine) {
  #allproduct .wrap nav ul li.Helcare:has(a):hover {
    background-color: #C9C5FD;
  }
}
#allproduct .wrap nav ul li.Toushi a > span img,
#allproduct .wrap nav ul li.Toushi span > span img {
  width: 11.4666666667vw;
  transform: translateX(-0.5333333333vw);
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li.Toushi a > span img,
  #allproduct .wrap nav ul li.Toushi span > span img {
    width: min(50px, 4vw);
    transform: translateX(max(-2px, -0.16vw));
  }
}
@media (hover: hover) and (pointer: fine) {
  #allproduct .wrap nav ul li.Toushi:has(a):hover {
    background-color: #FDDCD2;
    opacity: 1;
  }
}
#allproduct .wrap nav ul li.Nyousan a > span img,
#allproduct .wrap nav ul li.Nyousan span > span img {
  width: 11.4666666667vw;
  transform: translateX(-0.5333333333vw);
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li.Nyousan a > span img,
  #allproduct .wrap nav ul li.Nyousan span > span img {
    width: min(50px, 4vw);
    transform: translateX(max(-2px, -0.16vw));
  }
}
@media (hover: hover) and (pointer: fine) {
  #allproduct .wrap nav ul li.Nyousan:has(a):hover {
    background-color: #FEF9D6;
  }
}
#allproduct .wrap nav ul li.Kekkan a > span img,
#allproduct .wrap nav ul li.Kekkan span > span img {
  width: 11.2vw;
}
@media screen and (min-width: 641px) {
  #allproduct .wrap nav ul li.Kekkan a > span img,
  #allproduct .wrap nav ul li.Kekkan span > span img {
    width: min(50px, 4vw);
  }
}
@media (hover: hover) and (pointer: fine) {
  #allproduct .wrap nav ul li.Kekkan:has(a):hover {
    background-color: #FDC5CA;
  }
}
#allproduct .wrap nav .anime {
  opacity: 0;
}
#allproduct .wrap nav .anime.animeOn {
  animation: fadeIn 0.4s ease-out 0.2s forwards;
}

.allproduct-fixed {
  position: fixed !important;
  width: 100%;
  bottom: 0;
  bottom: env(safe-area-inset-bottom);
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

footer {
  z-index: 100;
  position: relative;
}

.o {
  overflow: hidden;
  display: inline-block;
}
.o .anime {
  transform: translateY(110%);
  transition: transform 1.4s cubic-bezier(0.14, 1, 0.34, 1);
  display: inline-block;
  will-change: transform, opacity;
}
.o .animeOn {
  transform: translateY(0);
}

@keyframes slideIn {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}
.n {
  display: inline-block;
  animation: slideIn 1.4s cubic-bezier(0.14, 1, 0.34, 1) forwards;
}

#top h1 {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0;
}
#top #kv {
  background-color: #fff;
}
#top #kv .kv-wrap {
  position: relative;
}
#top #kv .kv-wrap:after {
  content: "";
  width: 100%;
  height: 102.4vw;
  background-image: url(../img/top/kv-bg_sp.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  display: block;
  position: absolute;
  top: 48.2666666667vw;
  bottom: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap:after {
    top: auto;
    bottom: -7.8vw;
    height: auto;
    aspect-ratio: 1280/191;
    background-image: url(../img/top/kv-bg.png);
  }
}
#top #kv .kv-wrap .kv-slider {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s linear;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .kv-slider {
    width: 100%;
    aspect-ratio: 1280/717;
  }
}
#top #kv .kv-wrap .kv-slider.slick-initialized {
  opacity: 1;
}
#top #kv .kv-wrap .kv-slider .slick-dots {
  position: absolute;
  top: 69.3333333333vw;
  left: 2.9333333333vw;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 2.6666666667vw;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .kv-slider .slick-dots {
    top: 52.25vw;
    left: 50%;
    transform: translateX(max(-70px, -5.6vw));
    gap: min(14px, 1.12vw);
    flex-direction: row;
  }
}
#top #kv .kv-wrap .kv-slider .slick-dots li {
  width: 2.1333333333vw;
  height: 2.1333333333vw;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .kv-slider .slick-dots li {
    width: min(10px, 0.8vw);
    height: min(10px, 0.8vw);
  }
}
#top #kv .kv-wrap .kv-slider .slick-dots li button {
  font-size: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  line-height: 0;
  padding: 0;
  border: none;
}
#top #kv .kv-wrap .kv-slider .slick-dots li.slick-active button {
  background-color: #008AB4;
}
#top #kv .kv-wrap .kv-slider .slick-prev,
#top #kv .kv-wrap .kv-slider .slick-next {
  width: 4.2666666667vw;
  height: 6.6666666667vw;
  position: absolute;
  z-index: 10;
  font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='25' fill='none'%3E%3Cpath fill='%230C1112' d='m5.483 12.5 9.597 9.723L12.338 25 0 12.5 12.338 0l2.742 2.777L5.483 12.5Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  display: block;
  border: none;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .kv-slider .slick-prev,
  #top #kv .kv-wrap .kv-slider .slick-next {
    width: min(26px, 2.08vw);
    height: min(40px, 3.2vw);
  }
}
#top #kv .kv-wrap .kv-slider .slick-prev {
  left: 1.6vw;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .kv-slider .slick-prev {
    left: min(30px, 2.4vw);
  }
}
#top #kv .kv-wrap .kv-slider .slick-next {
  right: 1.6vw;
  transform: rotate(180deg);
}
@media screen and (min-width: 641px) {
  #top #kv .kv-wrap .kv-slider .slick-next {
    right: min(30px, 2.4vw);
  }
}
#top #kv .kv-wrap .kv-slider .slick-prev,
#top #kv .kv-wrap .kv-slider .slick-next {
  top: 45.6vw;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .kv-slider .slick-prev,
  #top #kv .kv-wrap .kv-slider .slick-next {
    top: 26vw;
  }
}
#top #kv .kv-wrap .text-slider {
  position: absolute;
  z-index: 10;
  top: 86.4vw;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s linear;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .text-slider {
    top: 29vw;
  }
}
#top #kv .kv-wrap .text-slider.slick-initialized {
  opacity: 1;
}
#top #kv .kv-wrap .text-slider p {
  width: 100%;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  z-index: 10;
  text-align: center;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 8.5333333333vw;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-shadow: 0 0 2.1333333333vw rgba(0, 0, 0, 0.4);
  color: #fff;
  padding-bottom: 2.6666666667vw;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .text-slider p {
    margin-left: min(85px, 6.8vw);
    text-align: left;
    font-size: min(4vw, 50px);
    line-height: 1.4;
    letter-spacing: 2.5px;
    text-shadow: 0 0 min(8px, 0.64vw) rgba(0, 0, 0, 0.4);
    padding-bottom: 0;
  }
}
#top #kv .kv-wrap .caption {
  position: absolute;
  z-index: 10;
  right: 1.3333333333vw;
  top: 81.6vw;
  color: #fff;
  font-size: 2.6666666667vw;
  line-height: 1.6;
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .caption {
    font-size: min(0.8vw, 10px);
    line-height: 1;
    letter-spacing: 0.3px;
    right: min(88px, 7.04vw);
    top: 48.8vw;
  }
}
#top #kv .kv-wrap .slider_pause {
  width: 4.8vw;
  height: 4.8vw;
  border: 0.2666666667vw solid #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 11;
  font-size: 0;
  left: 1.6vw;
  top: 89.6vw;
  z-index: 10;
}
@media screen and (min-width: 641px) {
  #top #kv .kv-wrap .slider_pause {
    width: min(34px, 2.72vw);
    height: min(34px, 2.72vw);
    border-width: min(1px, 0.08vw);
  }
}
#top #kv .kv-wrap .slider_pause:before {
  content: "";
  display: block;
  width: 1.6vw;
  aspect-ratio: 6/8;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='6' fill='none'%3E%3Crect width='1' height='6' fill='%23fff' rx='.5'/%3E%3Crect width='1' height='6' x='3.176' fill='%23fff' rx='.5'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media screen and (min-width: 641px) {
  #top #kv .kv-wrap .slider_pause:before {
    width: min(8px, 0.64vw);
  }
}
#top #kv .kv-wrap .slider_pause.paused:before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath fill='%23fff' d='m0 0 10 5-10 5V0Z'/%3E%3C/svg%3E");
  width: 1.8666666667vw;
  aspect-ratio: 1/1;
}
@media screen and (min-width: 641px) {
  #top #kv .kv-wrap .slider_pause.paused:before {
    width: min(11px, 0.88vw);
  }
}
@media screen and (min-width: 640px) {
  #top #kv .kv-wrap .slider_pause {
    left: 50%;
    transform: translateX(min(35px, 2.8vw));
    top: 51.2vw;
  }
}
#top #kv .supplement {
  margin: 32.2666666667vw auto 0;
  padding-bottom: 15.4666666667vw;
  position: relative;
  z-index: 10;
  text-align: center;
  opacity: 0;
  animation: fadeInUp 0.5s ease-out 0.2s forwards;
}
@media screen and (min-width: 641px) {
  #top #kv .supplement {
    margin: min(100px, 8vw) auto 0;
    padding-bottom: min(155px, 12.4vw);
  }
}
#top #kv .supplement dt {
  width: 57.6vw;
  margin: 0 auto;
  padding: 3.2vw 0;
  position: relative;
  border-top: 0.2666666667vw solid #0C1112;
  border-bottom: 0.2666666667vw solid #0C1112;
}
@media screen and (min-width: 641px) {
  #top #kv .supplement dt {
    width: min(500px, 40vw);
    padding: min(15px, 1.2vw) 0;
    border-top-width: min(1px, 0.08vw);
    border-bottom-width: min(1px, 0.08vw);
  }
}
#top #kv .supplement dt:before, #top #kv .supplement dt:after {
  content: "";
  position: relative;
  width: 100%;
  height: 0.2666666667vw;
  background-color: #0C1112;
  display: block;
  position: relative;
}
@media screen and (min-width: 641px) {
  #top #kv .supplement dt:before, #top #kv .supplement dt:after {
    height: min(1px, 0.08vw);
  }
}
#top #kv .supplement dt:before {
  top: -2.4vw;
}
@media screen and (min-width: 641px) {
  #top #kv .supplement dt:before {
    top: max(-12px, -0.96vw);
  }
}
#top #kv .supplement dt:after {
  bottom: -2.4vw;
}
@media screen and (min-width: 641px) {
  #top #kv .supplement dt:after {
    bottom: max(-12px, -0.96vw);
  }
}
#top #kv .supplement dd {
  margin: 2.6666666667vw auto 0;
  width: 98.6666666667vw;
}
@media screen and (min-width: 641px) {
  #top #kv .supplement dd {
    margin-top: min(20px, 1.6vw);
    width: min(670px, 53.6vw);
  }
}
#top:before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: url(../img/top/lineup-bg_sp.jpg) no-repeat center/cover;
  z-index: -1;
  pointer-events: none;
}
@media screen and (min-width: 641px) {
  #top:before {
    background-image: url(../img/top/lineup-bg.jpg);
  }
}
#top #concept {
  position: relative;
  text-align: center;
  background-color: #fff;
  padding-bottom: 10.4vw;
}
@media screen and (min-width: 641px) {
  #top #concept {
    padding-bottom: min(150px, 12vw);
  }
}
#top #concept:before {
  content: "";
  width: 100%;
  aspect-ratio: 375/200;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='375' height='186' fill='none'%3E%3Cmask id='a' width='375' height='186' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M187.575 0H375v185.491h-.006C373.825 82.847 290.329 0 187.5 0 84.67 0 1.175 82.847.007 185.491H0V0' clip-rule='evenodd'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23fff' d='M0 0h375v200H0z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
@media screen and (min-width: 641px) {
  #top #concept:before {
    aspect-ratio: 1280/90;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='90' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M645.562 0a3247.263 3247.263 0 0 0-11.126 0H0v90l1280-.005V0H645.562Zm0 0h-11.126C359.042.483 120.284 36.832 0 89.995h1280C1159.71 36.831 920.957.483 645.562 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  }
}
#top #concept h3 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.4vw;
  line-height: 1.5;
  letter-spacing: 0.72px;
  font-weight: 700;
  padding-top: 16vw;
  z-index: 10;
  position: relative;
}
@media screen and (min-width: 641px) {
  #top #concept h3 {
    font-size: min(3.2vw, 40px);
    line-height: 1.7;
    letter-spacing: 4px;
  }
}
#top #concept h3 span:not(.o):not(.anime) {
  color: #7D7D90;
  display: block;
  font-family: YakuHanMP, "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 6.9333333333vw;
  line-height: 1;
  letter-spacing: 1.3px;
  margin-bottom: 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #top #concept h3 span:not(.o):not(.anime) {
    font-size: min(6.4vw, 80px);
    line-height: 1;
    letter-spacing: 6.4px;
    margin-bottom: min(80px, 6.4vw);
  }
}
@media screen and (min-width: 641px) {
  #top #concept h3 {
    padding-top: 0;
    transform: translateY(max(-40px, -3.2vw));
  }
}
#top #concept p {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 4.2666666667vw;
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.32px;
  margin-top: 5.3333333333vw;
  z-index: 10;
  position: relative;
}
@media screen and (min-width: 641px) {
  #top #concept p {
    font-size: min(2.08vw, 26px);
    line-height: 2.2;
    letter-spacing: 2.6px;
  }
}
@media screen and (min-width: 641px) {
  #top #concept p {
    margin-top: min(10px, 0.8vw);
  }
}
#top #concept .images {
  margin: 8vw 4.2666666667vw 0;
  width: max-content;
  display: flex;
  gap: 4vw;
  z-index: 1;
  position: relative;
}
@media screen and (min-width: 641px) {
  #top #concept .images {
    margin: min(80px, 6.4vw) 0 0 min(85px, 6.8vw);
    gap: min(30px, 2.4vw);
  }
}
#top #concept .images li {
  width: 40vw;
  border-radius: 123.24vw;
  overflow: hidden;
}
@media screen and (min-width: 641px) {
  #top #concept .images li {
    width: min(350px, 28vw);
    border-radius: min(462.15px, 36.972vw);
  }
}
#top #concept .images + p {
  margin: 2.9333333333vw 2.6666666667vw 0 auto;
  text-align: right;
  color: #fff;
  font-size: 2.6666666667vw;
  line-height: 1;
  font-family: YakuHanJP, "Noto Sans JP", serif;
  padding-bottom: 2.6666666667vw;
}
@media screen and (min-width: 641px) {
  #top #concept .images + p {
    color: #8B8B8B;
    margin: min(20px, 1.6vw) min(85px, 6.8vw) 0 auto;
    font-size: min(0.8vw, 10px);
    line-height: 1;
    letter-spacing: -0.2px;
    padding-bottom: min(10px, 0.8vw);
  }
}
#top #concept .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}
#top #concept .bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#top #concerns {
  background: url(../img/top/concept-bg_sp.jpg) no-repeat center center/cover;
  width: 100%;
  height: 74.9333333333vw;
  position: relative;
}
@media screen and (min-width: 641px) {
  #top #concerns {
    background-image: url(../img/top/concept-bg.jpg);
    height: auto;
    aspect-ratio: 1280/720;
  }
}
@media screen and (min-width: 641px) {
  #top #concerns ul {
    width: min(564px, 45.12vw);
    margin: 0 auto;
    position: relative;
    display: block;
    height: 100%;
  }
}
#top #concerns ul.animeOn li {
  animation: fadeInUp 0.8s ease-out forwards;
}
#top #concerns ul li {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-weight: 600;
  position: absolute;
  opacity: 0;
}
#top #concerns ul li:nth-of-type(1) {
  font-size: 13.6vw;
  line-height: 1;
  letter-spacing: 1.53px;
  color: #d0687b;
  top: 4.2666666667vw;
  left: 6.4vw;
  animation-delay: 0.2s;
}
@media screen and (min-width: 641px) {
  #top #concerns ul li:nth-of-type(1) {
    font-size: min(7.4872vw, 93.59px);
    line-height: 1;
    letter-spacing: 2.808px;
    top: 7vw;
    left: 0;
  }
}
#top #concerns ul li:nth-of-type(2) {
  font-size: 8.8vw;
  line-height: 1;
  letter-spacing: 0.99px;
  color: #3c98cd;
  top: 11.4666666667vw;
  left: 38.1333333333vw;
  animation-delay: 0.4s;
}
@media screen and (min-width: 641px) {
  #top #concerns ul li:nth-of-type(2) {
    font-size: min(4.8448vw, 60.56px);
    line-height: 1;
    letter-spacing: 1.817px;
    top: 10.7vw;
    left: min(220px, 17.6vw);
  }
}
#top #concerns ul li:nth-of-type(3) {
  font-size: 6.4vw;
  line-height: 1;
  letter-spacing: 0.72px;
  color: #987746;
  top: 21.6vw;
  left: 19.4666666667vw;
  animation-delay: 0.6s;
}
@media screen and (min-width: 641px) {
  #top #concerns ul li:nth-of-type(3) {
    font-size: min(3.52336vw, 44.042px);
    line-height: 1;
    letter-spacing: 1.321px;
    top: 16vw;
    left: min(90px, 7.2vw);
  }
}
#top #concerns ul li:nth-of-type(4) {
  font-size: 5.6vw;
  line-height: 1.2;
  color: #8a6ccb;
  top: 23.4666666667vw;
  left: 38.1333333333vw;
  animation-delay: 0.8s;
}
@media screen and (min-width: 641px) {
  #top #concerns ul li:nth-of-type(4) {
    font-size: min(3.08288vw, 38.536px);
    line-height: 1.2000207598;
    top: 17vw;
    left: auto;
    right: 0;
  }
}
#top #concerns ul li:nth-of-type(5) {
  font-size: 10.1333333333vw;
  line-height: 1;
  letter-spacing: 1.2px;
  color: #666e2c;
  top: 31.7333333333vw;
  left: 6.4vw;
  animation-delay: 1s;
}
@media screen and (min-width: 641px) {
  #top #concerns ul li:nth-of-type(5) {
    font-size: min(5.87224vw, 73.403px);
    line-height: 1;
    letter-spacing: 2.202px;
    top: 21.2vw;
    left: 0;
  }
}
#top #concerns ul li:nth-of-type(6) {
  font-size: 6.6666666667vw;
  line-height: 1;
  letter-spacing: 0.75px;
  color: #b45a63;
  top: 33.3333333333vw;
  left: 32.2666666667vw;
  animation-delay: 1.2s;
}
@media screen and (min-width: 641px) {
  #top #concerns ul li:nth-of-type(6) {
    font-size: min(3.67016vw, 45.877px);
    line-height: 1;
    letter-spacing: 1.376px;
    top: 22.4vw;
    left: min(180px, 14.4vw);
  }
}
#top #concerns ul li:nth-of-type(7) {
  font-size: 9.3333333333vw;
  line-height: 1;
  letter-spacing: 1.05px;
  color: #559983;
  top: 43.2vw;
  left: 35.7333333333vw;
  animation-delay: 1.4s;
}
@media screen and (min-width: 641px) {
  #top #concerns ul li:nth-of-type(7) {
    font-size: min(5.13816vw, 64.227px);
    line-height: 1;
    letter-spacing: 1.927px;
    top: 27.5vw;
    left: auto;
    right: min(95px, 7.6vw);
  }
}
#top #solution {
  padding-top: 13.3333333333vw;
  text-align: center;
  padding-bottom: 8vw;
  background-color: #fff;
}
@media screen and (min-width: 641px) {
  #top #solution {
    padding-top: min(160px, 12.8vw);
    padding-bottom: min(160px, 12.8vw);
  }
}
#top #solution h3 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.4vw;
  line-height: 1.5;
  letter-spacing: 0.72px;
  font-weight: 700;
}
@media screen and (min-width: 641px) {
  #top #solution h3 {
    font-size: min(3.2vw, 40px);
    line-height: 1.7;
    letter-spacing: 4px;
  }
}
#top #solution h3 span:not(.o):not(.anime) {
  color: #7D7D90;
  display: block;
  font-family: YakuHanMP, "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 6.9333333333vw;
  line-height: 1;
  letter-spacing: 1.3px;
  margin-bottom: 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #top #solution h3 span:not(.o):not(.anime) {
    font-size: min(6.4vw, 80px);
    line-height: 1;
    letter-spacing: 6.4px;
    margin-bottom: min(80px, 6.4vw);
  }
}
#top #solution p {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 4.2666666667vw;
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.32px;
  margin-top: 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #top #solution p {
    font-size: min(2.08vw, 26px);
    line-height: 2.2;
    letter-spacing: 2.6px;
  }
}
@media screen and (min-width: 641px) {
  #top #solution p {
    margin-top: min(50px, 4vw);
  }
}
#top #solution img {
  margin: 8vw auto 0;
  display: block;
  width: 50.6666666667vw;
  border-radius: 16vw;
  opacity: 0;
}
@media screen and (min-width: 641px) {
  #top #solution img {
    margin-top: min(80px, 6.4vw);
    width: min(450px, 36vw);
    border-radius: min(150px, 12vw);
  }
}
#top #solution img.animeOn {
  animation: fadeInUp 0.5s ease-out forwards;
}
#top #lineup {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 13.3333333333vw 0 21.8666666667vw;
}
@media screen and (min-width: 641px) {
  #top #lineup {
    padding: min(160px, 12.8vw) 0 min(160px, 12.8vw);
  }
}
#top #lineup h3 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.4vw;
  line-height: 1.5;
  letter-spacing: 0.72px;
  font-weight: 700;
}
@media screen and (min-width: 641px) {
  #top #lineup h3 {
    font-size: min(3.2vw, 40px);
    line-height: 1.7;
    letter-spacing: 4px;
  }
}
#top #lineup h3 span:not(.o):not(.anime) {
  color: #7D7D90;
  display: block;
  font-family: YakuHanMP, "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 6.9333333333vw;
  line-height: 1;
  letter-spacing: 1.3px;
  margin-bottom: 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #top #lineup h3 span:not(.o):not(.anime) {
    font-size: min(6.4vw, 80px);
    line-height: 1;
    letter-spacing: 6.4px;
    margin-bottom: min(80px, 6.4vw);
  }
}
#top #lineup ul {
  margin-top: 24vw;
  display: flex;
  flex-direction: column;
  gap: 16vw;
}
@media screen and (min-width: 641px) {
  #top #lineup ul {
    margin: min(95px, 7.6vw) auto 0;
    gap: min(80px, 6.4vw);
    width: min(950px, 76vw);
  }
}
#top #lineup ul li {
  position: relative;
}
#top #lineup ul li:before {
  content: "";
  width: 105.3333333333vw;
  height: 105.3333333333vw;
  display: block;
  position: absolute;
  top: -3.4666666667vw;
  left: -2.6666666667vw;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li:before {
    width: calc(100% + min(30px, 2.4vw));
    height: calc(100% + min(28px, 2.24vw));
    top: max(-14px, -1.12vw);
    left: max(-15px, -1.2vw);
    border-radius: min(330px, 26.4vw);
  }
}
#top #lineup ul li .wrap {
  width: 100%;
  border-radius: 50.1333333333vw;
  background: url(../img/bg-gray.png) repeat center;
  background-size: 100vw auto;
  padding: 16vw 0 8vw;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li .wrap {
    background-size: min(375px, 30vw) auto;
    padding: min(80px, 6.4vw) min(100px, 8vw) min(25px, 2vw) min(60px, 4.8vw);
    border-radius: min(300px, 24vw);
  }
}
@media screen and (min-width: 641px) {
  #top #lineup ul li h4 {
    padding-left: min(403px, 32.24vw);
    text-align: left;
  }
}
#top #lineup ul li h4 > span {
  padding: 1.3333333333vw;
  color: #fff;
  border-radius: 1.0666666667vw;
  font-size: 4.2666666667vw;
  line-height: 1;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  letter-spacing: 0.48px;
  font-weight: 600;
  display: block;
  width: max-content;
  margin: 0 auto;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li h4 > span {
    font-size: min(1.92vw, 24px);
    line-height: 1;
    padding: min(5px, 0.4vw);
    border-radius: min(4px, 0.32vw);
    letter-spacing: 0.72px;
    margin-left: 0;
  }
}
#top #lineup ul li h4 > span + span {
  margin-top: 1.3333333333vw;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li h4 > span + span {
    margin-top: min(5px, 0.4vw);
  }
}
#top #lineup ul li h4 > span .mini {
  font-size: 2.6666666667vw;
  line-height: 1;
  vertical-align: super;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li h4 > span .mini {
    font-size: min(0.8vw, 10px);
    line-height: 1;
  }
}
#top #lineup ul li h4 img {
  display: block;
  width: auto;
  height: 9.3333333333vw;
  margin: 4.5333333333vw auto 0;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li h4 img {
    height: min(59px, 4.72vw);
    margin-top: min(25px, 2vw);
    margin-left: 0;
  }
}
@media screen and (min-width: 641px) {
  #top #lineup ul li figure {
    grid-column: 1/2;
  }
}
#top #lineup ul li figure > span {
  display: grid;
  place-content: center;
  margin: 6.6666666667vw auto 0;
  width: 74.4vw;
  aspect-ratio: 1/1;
  background-color: #fff;
  border-radius: 50%;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li figure > span {
    width: min(350px, 28vw);
    margin-top: 0;
    position: absolute;
    top: min(50px, 4vw);
    left: min(60px, 4.8vw);
  }
}
#top #lineup ul li figure > span img {
  opacity: 0;
}
#top #lineup ul li figure > span.animeOn img {
  animation: fadeInUp 0.5s ease-out forwards;
}
#top #lineup ul li figure figcaption span {
  display: block;
  width: max-content;
  border-radius: 1.0666666667vw;
  border: 0.2666666667vw solid #0C1112;
  font-size: 3.7333333333vw;
  line-height: 1;
  letter-spacing: 0.42px;
  font-weight: 700;
  padding: 1.6vw;
  background-color: #fff;
  margin: -7.4666666667vw auto 0;
  opacity: 0;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li figure figcaption span {
    font-size: min(1.6vw, 20px);
    line-height: 1;
    border-width: min(1px, 0.08vw);
    border-radius: min(4px, 0.32vw);
    padding: min(9px, 0.72vw) min(9px, 0.72vw) min(8px, 0.64vw);
    margin-top: 0;
    position: absolute;
    top: min(375px, 30vw);
    left: min(152px, 12.16vw);
  }
}
#top #lineup ul li figure figcaption span.animeOn {
  animation: fadeIn 0.5s ease-out forwards;
}
#top #lineup ul li figure figcaption p {
  margin-top: 6.4vw;
  font-size: 4.2666666667vw;
  line-height: 2;
  letter-spacing: 0.48px;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li figure figcaption p {
    margin-top: min(25px, 2vw);
    font-size: min(1.6vw, 20px);
    line-height: 1.8;
    letter-spacing: 0.6px;
    padding-left: min(403px, 32.24vw);
    text-align: left;
  }
}
#top #lineup ul li .more {
  margin: 6.6666666667vw auto 0;
  width: 60.8vw;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li .more {
    margin-top: min(25px, 2vw);
    width: min(266px, 21.28vw);
    margin-left: min(403px, 32.24vw);
  }
}
#top #lineup ul li .more a {
  display: grid;
  grid-template-columns: 4.2666666667vw 1fr 4.2666666667vw;
  position: relative;
  height: 14.6666666667vw;
  align-items: center;
  color: #fff;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 4.2666666667vw;
  line-height: 1;
  font-weight: 600;
  border-radius: 12.8vw;
  padding: 0 4.2666666667vw;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li .more a {
    height: min(66px, 5.28vw);
    font-size: min(1.44vw, 18px);
    line-height: 1;
    padding: 0 min(20px, 1.6vw);
    border-radius: min(48px, 3.84vw);
    grid-template-columns: min(24px, 1.92vw) 1fr min(24px, 1.92vw);
    transition: background-color 0.3s ease-in-out;
  }
}
#top #lineup ul li .more a:before {
  content: "";
}
#top #lineup ul li .more a:after {
  content: "";
  width: 100%;
  aspect-ratio: 16/4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='4' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12.12.175a.5.5 0 0 1 .705-.055l3.5 3A.5.5 0 0 1 16 4H1a.5.5 0 0 1 0-1h13.648L12.175.88a.5.5 0 0 1-.055-.705Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
#top #lineup ul li .more + p {
  width: 69.3333333333vw;
  margin: 6.6666666667vw auto 0;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li .more + p {
    width: 65%;
    margin-top: min(55px, 4.4vw);
  }
}
#top #lineup ul li .more + p + p {
  width: 53.8666666667vw;
  margin: 6.6666666667vw auto 0;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li .more + p + p {
    width: 100%;
    margin-top: min(30px, 2.4vw);
  }
}
#top #lineup ul li p {
  font-size: 2.4vw;
  line-height: 1.5;
  letter-spacing: 0.27px;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li p {
    font-size: min(0.8vw, 10px);
    line-height: 1.4;
    letter-spacing: 0.3px;
  }
}
@media screen and (min-width: 641px) {
  #top #lineup ul li:nth-of-type(odd) {
    transform: translateX(max(-65px, -5.2vw));
  }
}
@media screen and (min-width: 641px) {
  #top #lineup ul li:nth-of-type(even) {
    transform: translateX(min(65px, 5.2vw));
  }
  #top #lineup ul li:nth-of-type(even) h4 {
    padding-left: min(40px, 3.2vw);
  }
  #top #lineup ul li:nth-of-type(even) figure > span {
    margin-left: min(480px, 38.4vw);
  }
  #top #lineup ul li:nth-of-type(even) figure figcaption span {
    margin-left: min(480px, 38.4vw);
  }
  #top #lineup ul li:nth-of-type(even) figure figcaption p {
    padding-left: min(40px, 3.2vw);
  }
  #top #lineup ul li:nth-of-type(even) .more {
    margin-left: min(40px, 3.2vw);
  }
}
#top #lineup ul li.Helcare:before {
  border: 0.2666666667vw solid #0295FF;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li.Helcare:before {
    border-width: min(1px, 0.08vw);
  }
}
#top #lineup ul li.Helcare h4 span {
  background-color: #0295FF;
}
#top #lineup ul li.Helcare figure img {
  width: 50.6666666667vw;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li.Helcare figure img {
    width: min(260px, 20.8vw);
  }
}
#top #lineup ul li.Helcare .more a {
  background-color: #0295FF;
}
@media (hover: hover) and (pointer: fine) {
  #top #lineup ul li.Helcare .more a:hover {
    background-color: #68c0ff;
  }
}
#top #lineup ul li.Toushi:before {
  border: 0.2666666667vw solid #F5511D;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li.Toushi:before {
    border-width: min(1px, 0.08vw);
  }
}
#top #lineup ul li.Toushi h4 span {
  background-color: #F5511D;
}
#top #lineup ul li.Toushi figure img {
  width: 40vw;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li.Toushi figure img {
    width: min(190px, 15.2vw);
  }
}
#top #lineup ul li.Toushi .more a {
  background-color: #F5511D;
}
@media (hover: hover) and (pointer: fine) {
  #top #lineup ul li.Toushi .more a:hover {
    background-color: #f99c7f;
  }
}
#top #lineup ul li.Nyousan:before {
  border: 0.2666666667vw solid #EC850D;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li.Nyousan:before {
    border-width: min(1px, 0.08vw);
  }
}
#top #lineup ul li.Nyousan h4 span {
  background-color: #EC850D;
}
#top #lineup ul li.Nyousan figure img {
  width: 40vw;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li.Nyousan figure img {
    width: min(190px, 15.2vw);
  }
}
#top #lineup ul li.Nyousan .more a {
  background-color: #EC850D;
}
@media (hover: hover) and (pointer: fine) {
  #top #lineup ul li.Nyousan .more a:hover {
    background-color: #f7b568;
  }
}
#top #lineup ul li.Kekkan:before {
  border: 0.2666666667vw solid #F64B6A;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li.Kekkan:before {
    border-width: min(1px, 0.08vw);
  }
}
#top #lineup ul li.Kekkan h4 span {
  background-color: #F64B6A;
  letter-spacing: 0;
}
#top #lineup ul li.Kekkan figure img {
  width: 41.0666666667vw;
}
@media screen and (min-width: 641px) {
  #top #lineup ul li.Kekkan figure img {
    width: min(194px, 15.52vw);
  }
}
#top #lineup ul li.Kekkan .more a {
  background-color: #F64B6A;
}
@media (hover: hover) and (pointer: fine) {
  #top #lineup ul li.Kekkan .more a:hover {
    background-color: #fbacba;
  }
}
#top #invitation {
  padding: 13.3333333333vw 0;
  text-align: center;
  background: url(../img/bg-cream.png) repeat center;
  background-size: 100vw auto;
}
@media screen and (min-width: 641px) {
  #top #invitation {
    padding: min(160px, 12.8vw) 0 min(250px, 20vw);
    background-size: min(375px, 30vw) auto;
  }
}
#top #invitation h3 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.4vw;
  line-height: 1.5;
  letter-spacing: 0.72px;
  font-weight: 700;
}
@media screen and (min-width: 641px) {
  #top #invitation h3 {
    font-size: min(3.2vw, 40px);
    line-height: 1.7;
    letter-spacing: 4px;
  }
}
#top #invitation h3 span:not(.o):not(.anime) {
  color: #7D7D90;
  display: block;
  font-family: YakuHanMP, "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 6.9333333333vw;
  line-height: 1;
  letter-spacing: 1.3px;
  margin-bottom: 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #top #invitation h3 span:not(.o):not(.anime) {
    font-size: min(6.4vw, 80px);
    line-height: 1;
    letter-spacing: 6.4px;
    margin-bottom: min(80px, 6.4vw);
  }
}
#top #invitation p {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 4.2666666667vw;
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.32px;
  margin-top: 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #top #invitation p {
    font-size: min(2.08vw, 26px);
    line-height: 2.2;
    letter-spacing: 2.6px;
  }
}
@media screen and (min-width: 641px) {
  #top #invitation p {
    margin-top: min(50px, 4vw);
  }
}

#product:before {
  content: "";
  width: 100%;
  height: 100lvh;
  position: fixed;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}
#product h1 {
  margin-top: 17.0666666667vw;
  padding: 2.6666666667vw 0;
  text-align: center;
  position: relative;
  background-color: #fff;
}
@media screen and (min-width: 641px) {
  #product h1 {
    margin-top: min(76px, 6.08vw);
    padding: min(12px, 0.96vw) 0;
  }
}
#product h1 img {
  height: 5.6vw;
  width: auto;
}
@media screen and (min-width: 641px) {
  #product h1 img {
    height: min(28px, 2.24vw);
  }
}
#product #kv {
  text-align: center;
  position: relative;
}
@media screen and (min-width: 641px) {
  #product #kv {
    padding-top: min(20px, 1.6vw);
  }
}
#product #kv h2 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  text-align: center;
  width: 100%;
  font-size: 7.4666666667vw;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 1.4px;
  position: absolute;
}
@media screen and (min-width: 641px) {
  #product #kv h2 {
    width: max-content;
    left: 14vw;
    text-align: left;
    font-size: min(4vw, 50px);
    line-height: 1.4;
    letter-spacing: 2.5px;
  }
}
#product #kv h2 span:not(.o):not(.n):not(.mini) {
  font-size: 3.2vw;
  line-height: 1;
  vertical-align: super;
  display: inline-block;
  transform: translateY(-0.5333333333vw);
}
@media screen and (min-width: 641px) {
  #product #kv h2 span:not(.o):not(.n):not(.mini) {
    font-size: min(1.6vw, 20px);
    line-height: 1;
    transform: translateY(max(-5px, -0.4vw));
  }
}
#product #kv:before {
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
#product #kv img {
  margin-top: 5.6vw;
}
@media screen and (min-width: 641px) {
  #product #kv img {
    margin-top: 0;
  }
}
#product #kv p {
  font-size: 2.4vw;
  line-height: 1;
  letter-spacing: 0.27px;
  position: absolute;
  bottom: 2.6666666667vw;
  width: 100%;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #product #kv p {
    bottom: min(20px, 1.6vw);
    font-size: min(0.8vw, 10px);
    line-height: 1;
    letter-spacing: 0.3px;
    text-align: left;
    width: max-content;
    left: 14vw;
  }
}
#product #slider {
  padding: 4vw 0 2.1333333333vw;
  position: relative;
}
@media screen and (min-width: 641px) {
  #product #slider {
    padding: min(30px, 2.4vw) 0 min(29px, 2.32vw);
  }
}
@media screen and (min-width: 641px) {
  #product #slider ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(30px, 2.4vw);
    width: min(1110px, 88.8vw);
    margin: 0 auto;
  }
}
#product #slider ul li {
  padding: 0 2vw;
  opacity: 0.7;
}
@media screen and (min-width: 641px) {
  #product #slider ul li {
    padding: 0;
    opacity: 1;
  }
}
#product #slider ul li.slick-current {
  opacity: 1;
}
#product #slider ul li img {
  border-radius: 42.6666666667vw;
}
@media screen and (min-width: 641px) {
  #product #slider ul li img {
    border-radius: min(160px, 12.8vw);
  }
}
#product #slider p {
  margin-top: 1.8666666667vw;
  font-size: 2.4vw;
  line-height: 1;
  letter-spacing: -0.18px;
  color: #8B8B8B;
  text-align: center;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #product #slider p {
    margin-top: min(8px, 0.64vw);
    font-size: min(0.8vw, 10px);
    line-height: 1;
    letter-spacing: -0.2px;
  }
}
#product #slider .slick-prev,
#product #slider .slick-next {
  width: 4.2666666667vw;
  height: 6.6666666667vw;
  position: absolute;
  z-index: 10;
  font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='25' fill='none'%3E%3Cpath fill='%230C1112' d='m5.483 12.5 9.597 9.723L12.338 25 0 12.5 12.338 0l2.742 2.777L5.483 12.5Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  display: block;
  border: none;
}
@media screen and (min-width: 640px) {
  #product #slider .slick-prev,
  #product #slider .slick-next {
    width: min(26px, 2.08vw);
    height: min(40px, 3.2vw);
  }
}
#product #slider .slick-prev {
  left: 1.6vw;
}
@media screen and (min-width: 640px) {
  #product #slider .slick-prev {
    left: min(30px, 2.4vw);
  }
}
#product #slider .slick-next {
  right: 1.6vw;
  transform: rotate(180deg);
}
@media screen and (min-width: 641px) {
  #product #slider .slick-next {
    right: min(30px, 2.4vw);
  }
}
#product #slider .slick-prev,
#product #slider .slick-next {
  bottom: 28vw;
}
#product #slider .slick-dots {
  position: absolute;
  bottom: -10.1333333333vw;
  right: 16.8vw;
  display: flex;
  gap: 2.6666666667vw;
}
#product #slider .slick-dots li {
  width: 2.1333333333vw;
  height: 2.1333333333vw;
  padding: 0;
}
#product #slider .slick-dots li button {
  font-size: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 50%;
  background-color: #C4C4C4;
  border: none;
}
#product #slider .slick-dots li.slick-active button {
  background-color: #008AB4;
}
#product #slider .slider_pause {
  width: 4.8vw;
  height: 4.8vw;
  border: 0.2666666667vw solid #0C1112;
  border-radius: 50%;
  position: absolute;
  z-index: 11;
  font-size: 0;
  right: 8vw;
  bottom: -9.0666666667vw;
}
@media screen and (min-width: 641px) {
  #product #slider .slider_pause {
    width: min(34px, 2.72vw);
    height: min(34px, 2.72vw);
    border-width: min(1px, 0.08vw);
  }
}
#product #slider .slider_pause:before {
  content: "";
  display: block;
  width: 1.6vw;
  aspect-ratio: 6/8;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='6' fill='none'%3E%3Crect width='1' height='6' fill='%23fff' rx='.5'/%3E%3Crect width='1' height='6' x='3.176' fill='%23fff' rx='.5'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  background-color: #0C1112;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media screen and (min-width: 641px) {
  #product #slider .slider_pause:before {
    width: min(8px, 0.64vw);
  }
}
#product #slider .slider_pause.paused:before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath fill='%23fff' d='m0 0 10 5-10 5V0Z'/%3E%3C/svg%3E");
  width: 1.8666666667vw;
  aspect-ratio: 1/1;
}
@media screen and (min-width: 641px) {
  #product #slider .slider_pause.paused:before {
    width: min(11px, 0.88vw);
  }
}
@media screen and (min-width: 641px) {
  #product #slider .slider_pause {
    display: none;
  }
}
#product #description {
  text-align: center;
  padding: 22.1333333333vw 0 0;
  background-color: #fff;
}
@media screen and (min-width: 641px) {
  #product #description {
    padding: min(100px, 8vw) 0 0;
  }
}
#product #description h3 {
  font-size: 6.4vw;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.72px;
  font-family: YakuHanMP, "Noto Serif JP", serif;
}
@media screen and (min-width: 641px) {
  #product #description h3 {
    font-size: min(2.72vw, 34px);
    line-height: 1.5;
    letter-spacing: 1.7px;
  }
}
#product #description h3 span:not(.o):not(.anime) {
  font-size: 3.7333333333vw;
  line-height: 1;
  vertical-align: super;
}
@media screen and (min-width: 641px) {
  #product #description h3 span:not(.o):not(.anime) {
    font-size: min(1.6vw, 20px);
    line-height: 1;
  }
}
#product #description p {
  margin-top: 5.3333333333vw;
  font-size: 4.2666666667vw;
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.32px;
  font-family: YakuHanMP, "Noto Serif JP", serif;
}
@media screen and (min-width: 641px) {
  #product #description p {
    margin-top: min(35px, 2.8vw);
    font-size: min(1.76vw, 22px);
    line-height: 2;
    letter-spacing: 1.1px;
  }
  #product #description p + p {
    margin-top: min(18px, 1.44vw);
  }
}
#product #description p span {
  font-size: 2.6666666667vw;
  line-height: 1;
  vertical-align: super;
}
@media screen and (min-width: 641px) {
  #product #description p span {
    font-size: min(1.04vw, 13px);
    line-height: 1;
  }
}
#product #description p.mini {
  font-size: 2.4vw;
  line-height: 1;
  letter-spacing: 0.27px;
}
@media screen and (min-width: 641px) {
  #product #description p.mini {
    font-size: min(1.04vw, 13px);
    line-height: 1;
  }
}
#product #description ol {
  margin-top: 5.3333333333vw;
  padding: 0 8vw;
  text-align: left;
  counter-reset: list-counter;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #product #description ol {
    margin: min(15px, 1.2vw) auto 0;
    width: max-content;
  }
}
#product #description ol li {
  font-size: 2.6666666667vw;
  line-height: 2;
  font-weight: 400;
  letter-spacing: 0.7px;
  position: relative;
  counter-increment: list-counter;
  padding-left: 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product #description ol li {
    font-size: min(0.96vw, 12px);
    line-height: 2;
    letter-spacing: 0.84px;
    padding-left: min(25px, 2vw);
  }
}
#product #description ol li:before {
  content: "※" counter(list-counter);
  position: absolute;
  left: 0;
}
#product #purchase {
  padding-top: 13.3333333333vw;
  background-color: #fff;
}
@media screen and (min-width: 641px) {
  #product #purchase {
    padding-top: min(100px, 8vw);
  }
}
#product #purchase .wrap {
  position: relative;
  background: url(../img/purchase-bg_sp.jpg) no-repeat top center/100% auto;
  border-radius: 50vw 50vw 0 0;
  padding: 0 8vw 13.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product #purchase .wrap {
    background: url(../img/purchase-bg.jpg) no-repeat top center/100% auto;
    border-radius: 0;
    padding: 0 0 min(100px, 8vw);
  }
  #product #purchase .wrap:before {
    content: "";
    width: 100%;
    aspect-ratio: 1280/90;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='90' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M645.562 0a3247.263 3247.263 0 0 0-11.126 0H0v90l1280-.005V0H645.562Zm0 0h-11.126C359.042.483 120.284 36.832 0 89.995h1280C1159.71 36.831 920.957.483 645.562 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
  }
}
#product #purchase .wrap .product {
  display: block;
  margin: 0 auto;
  width: 36.8vw;
  opacity: 0;
}
@media screen and (min-width: 641px) {
  #product #purchase .wrap .product {
    width: min(218px, 17.44vw);
  }
}
#product #purchase .wrap .product.animeOn {
  animation: fadeInUp 0.5s ease-out forwards;
}
#product #purchase .wrap .icon {
  position: absolute;
  width: 15.7333333333vw;
  top: 49.6vw;
  right: 16vw;
}
@media screen and (min-width: 641px) {
  #product #purchase .wrap .icon {
    width: min(135px, 10.8vw);
    top: min(347px, 27.76vw);
    right: 50%;
    transform: translateX(min(239px, 19.12vw));
  }
}
#product #purchase .wrap p a {
  display: grid;
  align-items: center;
  grid-template-columns: 5.0666666667vw 1fr 5.0666666667vw;
  background-color: #008AB4;
  color: #fff;
  font-size: 4.2666666667vw;
  line-height: 3.4375;
  font-weight: 600;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  color: #fff;
  width: 100%;
  border-radius: 12.8vw;
  position: relative;
  padding: 0 5.0666666667vw;
  text-align: center;
}
@media screen and (min-width: 641px) {
  #product #purchase .wrap p a {
    padding: 0 min(20px, 1.6vw);
    grid-template-columns: min(24px, 1.92vw) 1fr min(24px, 1.92vw);
    border-radius: min(48px, 3.84vw);
    font-size: min(1.44vw, 18px);
    line-height: 3.6666666667;
    width: min(360px, 28.8vw);
    transition: background-color 0.2s linear, color 0.2s linear;
  }
}
@media screen and (min-width: 641px) and (hover: hover) and (pointer: fine) {
  #product #purchase .wrap p a:hover {
    background-color: #68c0ff;
  }
}
#product #purchase .wrap p a:before {
  content: "";
}
#product #purchase .wrap p a:after {
  content: "";
  width: 100%;
  aspect-ratio: 19/17;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' fill='none'%3E%3Cpath fill='%23fff' d='M7.117 17.172c.777 0 1.406-.61 1.406-1.362 0-.752-.63-1.362-1.406-1.362-.777 0-1.407.61-1.407 1.362 0 .752.63 1.362 1.407 1.362ZM16.963 17.172c.777 0 1.407-.61 1.407-1.362 0-.752-.63-1.362-1.407-1.362s-1.406.61-1.406 1.362c0 .753.63 1.362 1.406 1.362ZM19.46 3.245a1.047 1.047 0 0 0-.364-.276 1.08 1.08 0 0 0-.451-.098H5.266l-.27-1.48a.677.677 0 0 0-.24-.403.717.717 0 0 0-.452-.16H1.49a.715.715 0 0 0-.497.2.67.67 0 0 0-.206.481c0 .18.074.354.206.482s.31.2.497.2h2.224L5.72 13.204c.029.158.114.3.24.403.127.103.287.16.453.16h11.253a.715.715 0 0 0 .498-.2.67.67 0 0 0 .206-.482.67.67 0 0 0-.206-.481.715.715 0 0 0-.498-.2H7.004l-.248-1.362h10.623c.244 0 .48-.082.669-.231a1.02 1.02 0 0 0 .367-.59l1.266-6.129a.99.99 0 0 0-.22-.848Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
#product #purchase .wrap dl {
  margin-top: 8.2666666667vw;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #product #purchase .wrap dl {
    width: min(820px, 65.6vw);
    margin: min(50px, 4vw) auto 0;
  }
}
#product #purchase .wrap dl dt {
  border-radius: 2.6666666667vw 2.6666666667vw 0 0;
  border: 0.2666666667vw solid #7B6320;
  font-size: 3.2vw;
  line-height: 1;
  font-weight: 700;
  background-color: #fff;
  color: #7B6320;
  text-align: center;
  padding: 2.6666666667vw 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product #purchase .wrap dl dt {
    font-size: min(1.28vw, 16px);
    line-height: 1;
    padding: min(14px, 1.12vw) min(20px, 1.6vw);
    border-width: min(1px, 0.08vw);
    border-radius: min(10px, 0.8vw) min(10px, 0.8vw) 0 0;
  }
}
#product #purchase .wrap dl dt span {
  font-size: 2.6666666667vw;
  line-height: 1;
  font-weight: 500;
}
@media screen and (min-width: 641px) {
  #product #purchase .wrap dl dt span {
    font-size: min(0.96vw, 12px);
    line-height: 1;
  }
}
#product #purchase .wrap dl dd {
  background-color: #fff;
  color: #7B6320;
  border-radius: 0 0 2.6666666667vw 2.6666666667vw;
  border-right: 0.2666666667vw solid #7B6320;
  border-bottom: 0.2666666667vw solid #7B6320;
  border-left: 0.2666666667vw solid #7B6320;
  padding: 2.6666666667vw 5.3333333333vw;
  font-size: 2.9333333333vw;
  line-height: 1.6;
}
@media screen and (min-width: 641px) {
  #product #purchase .wrap dl dd {
    font-size: min(1.12vw, 14px);
    line-height: 1.7;
    padding: min(15px, 1.2vw) min(20px, 1.6vw);
    border-right-width: min(1px, 0.08vw);
    border-bottom-width: min(1px, 0.08vw);
    border-left-width: min(1px, 0.08vw);
    border-radius: 0 0 min(10px, 0.8vw) min(10px, 0.8vw);
  }
}
#product #purchase .wrap ul {
  margin-top: 2.6666666667vw;
  font-family: YakuHanJP, "Noto Sans JP", serif;
  font-size: 2.4vw;
  line-height: 1.6;
  font-weight: 400;
  color: #7B6320;
}
@media screen and (min-width: 641px) {
  #product #purchase .wrap ul {
    width: min(820px, 65.6vw);
    margin: min(15px, 1.2vw) auto 0;
    font-size: min(0.96vw, 12px);
    line-height: 2;
    font-weight: 400;
  }
}
#product #purchase .images {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  aspect-ratio: 375/250;
  display: grid;
  align-items: center;
}
@media screen and (min-width: 641px) {
  #product #purchase .images {
    aspect-ratio: 1280/400;
  }
}
#product #purchase .images p {
  font-size: 6.9333333333vw;
  line-height: 1.0192307692;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-weight: 700;
  letter-spacing: 1.82px;
}
@media screen and (min-width: 641px) {
  #product #purchase .images p {
    font-size: min(4vw, 50px);
    line-height: 1.01;
    letter-spacing: 5px;
  }
}
#product #purchase .images p span:not(.o):not(.anime) {
  margin: 0 auto;
  display: block;
  width: max-content;
  background-color: #fff;
  padding: 1.0666666667vw;
  border-radius: 1.0666666667vw;
}
@media screen and (min-width: 641px) {
  #product #purchase .images p span:not(.o):not(.anime) {
    padding: min(13px, 1.04vw);
    border-radius: min(4px, 0.32vw);
  }
}
#product #purchase .images p span:not(.o):not(.anime) + span {
  margin-top: 1.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product #purchase .images p span:not(.o):not(.anime) + span {
    margin-top: min(15px, 1.2vw);
  }
}
#product #purchase .images p span:not(.o):not(.anime):last-of-type {
  padding-right: 0;
}
#product #quality {
  position: relative;
  z-index: 10;
}
#product #quality .detail {
  padding: 13.3333333333vw 0 0;
  background: url(../img/bg-beige.png) repeat center center/100% auto;
}
@media screen and (min-width: 641px) {
  #product #quality .detail {
    background-size: min(375px, 30vw) auto;
    padding-top: min(100px, 8vw);
  }
}
#product #quality .detail h3 {
  text-align: center;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 5.3333333333vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.4px;
}
@media screen and (min-width: 641px) {
  #product #quality .detail h3 {
    font-size: min(2.72vw, 34px);
    line-height: 1;
    letter-spacing: 1.7px;
  }
}
#product #quality .detail dl {
  margin: 8vw auto 0;
  width: 84vw;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl {
    margin-top: min(50px, 4vw);
    width: min(920px, 73.6vw);
  }
}
#product #quality .detail dl dt {
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
  background: #e5f3f7;
  padding: 3.7333333333vw 5.3333333333vw 4vw;
  text-align: center;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 5.3333333333vw;
  line-height: 1.4;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dt {
    border-radius: min(20px, 1.6vw) min(20px, 1.6vw) 0 0;
    padding: min(38px, 3.04vw) min(40px, 3.2vw) min(40px, 3.2vw);
    font-size: min(2.4vw, 30px);
    line-height: 1.4;
    letter-spacing: 1.5px;
  }
}
#product #quality .detail dl dt .super {
  font-size: 2.9333333333vw;
  line-height: 1;
  vertical-align: super;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dt .super {
    font-size: min(1.6vw, 20px);
    line-height: 1;
  }
}
#product #quality .detail dl dt .mini1 {
  display: block;
  font-size: 4vw;
  line-height: 1.3;
  margin-bottom: 1.0666666667vw;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dt .mini1 {
    font-size: min(1.6vw, 20px);
    line-height: 1.3;
    letter-spacing: 1px;
    margin-bottom: min(4px, 0.32vw);
  }
}
#product #quality .detail dl dt .mini2 {
  display: block;
  font-size: 3.2vw;
  line-height: 1.4;
  font-family: YakuHanJP, "Noto Sans JP", serif;
  font-weight: 400;
  margin-top: 1.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dt .mini2 {
    font-size: min(0.96vw, 12px);
    line-height: 1.4;
    line-height: 140%;
    margin-top: min(11px, 0.88vw);
  }
}
#product #quality .detail dl dd {
  border-radius: 0 0 5.3333333333vw 5.3333333333vw;
  background: #fff;
  padding: 4vw 5.3333333333vw;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd {
    padding: min(40px, 3.2vw);
    border-radius: 0 0 min(20px, 1.6vw) min(20px, 1.6vw);
  }
}
#product #quality .detail dl dd figure {
  display: flex;
  flex-direction: column;
  gap: 4vw;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd figure {
    flex-direction: row;
    gap: min(66px, 5.28vw);
    background: url(../img/line.svg) repeat-x bottom center/auto min(2px, 0.16vw);
    padding-bottom: min(25px, 2vw);
  }
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd figure img {
    width: min(435px, 34.8vw);
  }
}
#product #quality .detail dl dd figure figcaption {
  background: url(../img/line.svg) repeat-x bottom center/auto 0.5333333333vw;
  padding-bottom: 4vw;
  order: -1;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd figure figcaption {
    padding-bottom: 0;
    background: none;
  }
}
#product #quality .detail dl dd figure figcaption p {
  font-size: 3.4666666667vw;
  line-height: 2;
  letter-spacing: 0.91px;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd figure figcaption p {
    font-size: min(1.44vw, 18px);
    line-height: 2;
    letter-spacing: 0.9px;
  }
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd .small {
    width: min(435px, 34.8vw);
    margin: 0 auto;
    display: block;
  }
}
#product #quality .detail dl dd .mini {
  margin-top: 4vw;
  font-size: 2.1333333333vw;
  line-height: 1.6;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd .mini {
    font-size: min(0.8vw, 10px);
    line-height: 1.6;
    margin: min(25px, 2vw) 0 0;
    letter-spacing: 0.5px;
  }
}
#product #quality .detail dl dd .mini li:before {
  content: "●";
}
#product #quality .detail dl dd .mini.last {
  background: url(../img/line.svg) repeat-x bottom center/auto 0.5333333333vw;
  padding-bottom: 4vw;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd .mini.last {
    background: url(../img/line.svg) repeat-x bottom center/auto min(2px, 0.16vw);
    padding-bottom: min(25px, 2vw);
  }
}
#product #quality .detail dl dd .close,
#product #quality .detail dl dd .open {
  display: grid;
  grid-template-columns: 4vw 1fr 4vw;
  align-items: center;
  font-size: 4.2666666667vw;
  line-height: 1;
  font-weight: 600;
  border-radius: 5.3333333333vw;
  background: #008AB4;
  color: #fff;
  height: 9.3333333333vw;
  width: 100%;
  padding: 0 4.2666666667vw;
  text-align: center;
  font-family: YakuHanMP, "Noto Serif JP", serif;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd .close,
  #product #quality .detail dl dd .open {
    grid-template-columns: min(22px, 1.76vw) 1fr min(22px, 1.76vw);
    border-radius: min(48px, 3.84vw);
    height: min(50px, 4vw);
    font-size: min(1.44vw, 18px);
    line-height: 1;
    padding: 0 min(20px, 1.6vw);
    cursor: pointer;
    transition: background-color 0.2s linear, color 0.2s linear;
  }
}
@media screen and (min-width: 641px) and (hover: hover) and (pointer: fine) {
  #product #quality .detail dl dd .close:hover,
  #product #quality .detail dl dd .open:hover {
    background-color: #1bcaff;
  }
}
#product #quality .detail dl dd .close:before,
#product #quality .detail dl dd .open:before {
  content: "";
}
#product #quality .detail dl dd .close:after,
#product #quality .detail dl dd .open:after {
  content: "";
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
#product #quality .detail dl dd .close {
  margin-top: 4vw;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd .close {
    margin-top: min(25px, 2vw);
  }
}
#product #quality .detail dl dd .close:after {
  height: 0.5333333333vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='2' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' d='M16 .82H1'/%3E%3C/svg%3E");
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd .close:after {
    height: min(2px, 0.16vw);
  }
}
#product #quality .detail dl dd .open:after {
  height: 4vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' d='M8.5 1v15M16 8.5H1'/%3E%3C/svg%3E");
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl dd .open:after {
    height: min(15px, 1.2vw);
  }
}
#product #quality .detail dl dd .wrap {
  display: none;
}
@media screen and (min-width: 641px) {
  #product #quality .detail dl.large dd figure {
    flex-direction: column-reverse;
    gap: min(25px, 2vw);
  }
  #product #quality .detail dl.large dd figure figcaption {
    order: 0;
  }
  #product #quality .detail dl.large dd figure img {
    width: 100%;
  }
}
#product #quality .ingredient .wrap {
  position: relative;
}
#product #quality .ingredient h3 {
  padding-top: 13.3333333333vw;
  padding-bottom: 8vw;
  text-align: center;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.9333333333vw;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 1.82px;
  background: url(../img/bg-beige.png) repeat center center/100% auto;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient h3 {
    background-size: min(375px, 30vw) auto;
    font-size: min(2.72vw, 34px);
    line-height: 1;
    letter-spacing: 1.7px;
    padding-top: min(100px, 8vw);
    padding-bottom: min(50px, 4vw);
  }
}
#product #quality .ingredient .bg {
  position: relative;
}
#product #quality .ingredient .bg figure {
  padding: 15.2vw 0 24.8vw;
  text-align: center;
  z-index: 1;
  position: relative;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure {
    padding: min(90px, 7.2vw) 0 min(90px, 7.2vw);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(50px, 4vw);
  }
}
#product #quality .ingredient .bg figure:before, #product #quality .ingredient .bg figure:after {
  content: "";
  width: 100%;
  height: 49.8666666667vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  left: 0;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure:before, #product #quality .ingredient .bg figure:after {
    height: auto;
    aspect-ratio: 1280/90;
  }
}
#product #quality .ingredient .bg figure:after {
  background-image: url(../img/bg-ingredient-bottom_sp.png);
  background-position: bottom;
  bottom: 0;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure:after {
    background-image: url(../img/bg-ingredient-bottom.png);
    bottom: -1px;
  }
}
#product #quality .ingredient .bg figure:before {
  background-image: url(../img/bg-ingredient-top_sp.png);
  background-position: top;
  top: 0;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure:before {
    background-image: url(../img/bg-ingredient-top.png);
  }
}
#product #quality .ingredient .bg figure img {
  width: 53.3333333333vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure img {
    width: min(230px, 18.4vw);
    transform: translateX(max(-40px, -3.2vw)) translateY(max(-15px, -1.2vw));
  }
}
#product #quality .ingredient .bg figure figcaption {
  width: 80vw;
  margin: 5.3333333333vw auto 0;
  border-radius: 5.3333333333vw;
  background: linear-gradient(119deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.9) 100%);
  backdrop-filter: blur(1.3333333333vw);
  padding: 4vw;
  position: relative;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure figcaption {
    width: min(460px, 36.8vw);
    margin: 0;
    border-radius: min(20px, 1.6vw);
    padding: min(30px, 2.4vw);
    backdrop-filter: blur(min(5px, 0.4vw));
    transform: translateX(max(-40px, -3.2vw));
  }
}
#product #quality .ingredient .bg figure figcaption dl dt {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 5.3333333333vw;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 1.4px;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure figcaption dl dt {
    font-size: min(2.24vw, 28px);
    line-height: 1.5;
  }
}
#product #quality .ingredient .bg figure figcaption dl dd {
  margin-top: 1.8666666667vw;
  font-size: 4vw;
  line-height: 1.8;
  letter-spacing: 0.15px;
  text-align: left;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure figcaption dl dd {
    margin-top: min(20px, 1.6vw);
    font-size: min(1.44vw, 18px);
    line-height: 2;
    letter-spacing: 1.26px;
  }
}
#product #quality .ingredient .bg figure figcaption dl dd .super {
  font-size: 2.6666666667vw;
  line-height: 1;
  vertical-align: super;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure figcaption dl dd .super {
    font-size: min(0.96vw, 12px);
    line-height: 1;
  }
}
#product #quality .ingredient .bg figure figcaption dl dd .mini {
  margin-top: 1.8666666667vw;
  font-size: 2.4vw;
  line-height: 1.6;
  font-weight: 400;
  display: block;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg figure figcaption dl dd .mini {
    margin-top: min(7px, 0.56vw);
    font-size: min(0.8vw, 10px);
    line-height: 1.44;
  }
}
#product #quality .ingredient .bg p {
  font-size: 2.4vw;
  line-height: 1.6;
  color: #fff;
  width: max-content;
  text-shadow: 0 0 1.0666666667vw rgba(0, 0, 0, 0.5);
  position: absolute;
  right: 17.3333333333vw;
  bottom: 15.4666666667vw;
}
@media screen and (min-width: 641px) {
  #product #quality .ingredient .bg p {
    left: 50%;
    transform: translateX(max(-320px, -25.6vw));
    right: auto;
    bottom: min(140px, 11.2vw);
    text-shadow: 0 0 min(3px, 0.24vw) rgba(0, 0, 0, 0.4);
    font-size: min(0.8vw, 10px);
    line-height: 1;
    letter-spacing: 0.3px;
  }
}
#product #quality .feelings {
  background: url(../img/bg-cream.png) repeat center center/100% auto;
  margin: 0 auto 0;
  padding: 6.4vw 4vw 13.3333333333vw;
  margin-top: -0.2666666667vw;
}
@media screen and (min-width: 641px) {
  #product #quality .feelings {
    background-size: min(375px, 30vw) auto;
    padding: min(70px, 5.6vw) 0 min(100px, 8vw);
    margin-top: max(-1px, -0.08vw);
  }
}
@media screen and (min-width: 641px) {
  #product #quality .feelings h4 {
    width: min(425px, 34vw);
    margin: 0 auto;
    transform: translateX(min(50px, 4vw));
  }
}
#product #quality .feelings dl {
  margin-top: 0.5333333333vw;
  text-align: center;
}
@media screen and (min-width: 641px) {
  #product #quality .feelings dl {
    margin-top: min(17px, 1.36vw);
  }
}
#product #quality .feelings dl dt {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 5.3333333333vw;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 1.4px;
}
@media screen and (min-width: 641px) {
  #product #quality .feelings dl dt {
    font-size: min(2.24vw, 28px);
    line-height: 1.5;
  }
}
#product #quality .feelings dl dd {
  margin-top: 2.6666666667vw;
  font-size: 4vw;
  line-height: 1.8;
  letter-spacing: 0.15px;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #product #quality .feelings dl dd {
    margin-top: min(25px, 2vw);
    font-size: min(1.44vw, 18px);
    line-height: 2;
    letter-spacing: 1.26px;
  }
}
#product #habit {
  padding: 13.3333333333vw 8vw;
  background-color: #fff;
}
@media screen and (min-width: 641px) {
  #product #habit {
    padding: min(100px, 8vw) 0;
  }
}
#product #habit h3 {
  min-height: 19.2vw;
  width: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: block;
  font-weight: 700;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.4vw;
  line-height: 1.4;
  position: relative;
  letter-spacing: -0.5px;
}
@media screen and (min-width: 641px) {
  #product #habit h3 {
    font-size: min(2.72vw, 34px);
    line-height: 1.6882352941;
    letter-spacing: 3.4px;
    min-height: min(116px, 9.28vw);
    letter-spacing: 1.8px;
    width: min(600px, 48vw);
    margin: 0 auto;
  }
}
#product #habit h3:before, #product #habit h3:after {
  content: "";
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none'%3E%3Cpath stroke='%23008AB4' d='M1 17V1h16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  position: absolute;
}
@media screen and (min-width: 641px) {
  #product #habit h3:before, #product #habit h3:after {
    width: min(30px, 2.4vw);
    height: min(30px, 2.4vw);
  }
}
#product #habit h3:before {
  left: 0;
  top: -0.2666666667vw;
}
@media screen and (min-width: 641px) {
  #product #habit h3:before {
    top: 0;
  }
}
#product #habit h3:after {
  right: 0;
  bottom: 0.2666666667vw;
  transform: rotate(180deg);
}
@media screen and (min-width: 641px) {
  #product #habit h3:after {
    bottom: 0;
  }
}
#product #habit h3 span {
  color: #D6007F;
}
@media screen and (min-width: 641px) {
  #product #habit h3 span {
    display: block;
  }
}
#product #habit p {
  margin-top: 4.8vw;
  font-size: 2.4vw;
  line-height: 1;
  color: #8B8B8B;
  text-align: right;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #product #habit p {
    width: min(600px, 48vw);
    margin: min(20px, 1.6vw) auto 0;
    font-size: min(0.8vw, 10px);
    line-height: 1;
  }
}
#product #habit ul {
  margin: 16vw auto 13.3333333333vw;
  width: 84vw;
  display: flex;
  flex-direction: column;
  gap: 21.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product #habit ul {
    width: min(500px, 40vw);
    margin: min(80px, 6.4vw) auto 0;
    gap: min(100px, 8vw);
  }
}
#product #habit ul li {
  overflow: hidden;
  opacity: 1 !important;
}
@media screen and (min-width: 641px) {
  #product #habit ul li {
    margin-top: max(-15px, -1.2vw);
  }
}
#product #habit ul li:nth-child(2n+1) dl {
  transform: translateX(-100%);
  transition: transform 0.7s ease-out;
}
#product #habit ul li:nth-child(2n) dl {
  transform: translateX(100%);
  transition: transform 0.7s ease-out;
}
#product #habit ul li.animeOn dl {
  transform: translateX(0);
}
#product #habit ul li dl dt {
  width: max-content;
  background-color: #008AB4;
  color: #fff;
  border-radius: 1.3333333333vw 4vw 0 0;
  padding: 1.3333333333vw 2.6666666667vw;
  font-size: 5.3333333333vw;
  line-height: 1;
  font-weight: 600;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  position: relative;
  display: grid;
  grid-template-columns: 6.6666666667vw 1fr;
  gap: 1.8666666667vw;
  align-items: center;
}
@media screen and (min-width: 641px) {
  #product #habit ul li dl dt {
    border-radius: min(5px, 0.4vw) min(15px, 1.2vw) 0 0;
    padding: min(10px, 0.8vw) min(15px, 1.2vw);
    font-size: min(2vw, 25px);
    line-height: 1;
    grid-template-columns: min(29px, 2.32vw) 1fr;
    gap: min(8px, 0.64vw);
  }
}
#product #habit ul li dl dt:before {
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none'%3E%3Cpath fill='%23fff' d='M24.017 7.634a12.458 12.458 0 0 0-2.678-3.973A12.454 12.454 0 0 0 12.5 0a12.459 12.459 0 0 0-8.839 3.661A12.452 12.452 0 0 0 0 12.5a12.46 12.46 0 0 0 3.661 8.839A12.455 12.455 0 0 0 12.5 25a12.46 12.46 0 0 0 8.839-3.661A12.457 12.457 0 0 0 25 12.5c0-1.687-.33-3.324-.983-4.866Zm-.598 4.866c0 6.03-4.888 10.92-10.919 10.92-6.03 0-10.92-4.89-10.92-10.92S6.47 1.58 12.5 1.58 23.42 6.47 23.42 12.5Z'/%3E%3Cpath fill='%23fff' d='M12.48 5.11a.56.56 0 0 1-.559-.563v-1.27a.56.56 0 1 1 1.119 0v1.27a.56.56 0 0 1-.56.564ZM8.516 6.168a.564.564 0 0 1-.49-.283l-.623-1.08a.564.564 0 1 1 .977-.565l.624 1.081a.564.564 0 0 1-.488.846ZM5.598 9.086a.562.562 0 0 1-.281-.076l-1.081-.624a.564.564 0 1 1 .564-.977l1.08.624a.564.564 0 0 1-.282 1.053ZM4.547 13.064h-1.27a.56.56 0 1 1 0-1.119h1.27a.56.56 0 1 1 0 1.119ZM4.52 17.672a.564.564 0 0 1-.283-1.053l1.08-.624a.564.564 0 1 1 .565.977l-1.081.624a.56.56 0 0 1-.282.076ZM7.89 21.047a.564.564 0 0 1-.488-.846l.623-1.082a.564.564 0 1 1 .977.565l-.624 1.08a.564.564 0 0 1-.489.283ZM12.48 22.286a.56.56 0 0 1-.559-.564v-1.269a.56.56 0 1 1 1.119 0v1.27a.56.56 0 0 1-.56.563ZM17.105 21.044a.564.564 0 0 1-.49-.282l-.623-1.081a.564.564 0 1 1 .977-.564l.624 1.08a.564.564 0 0 1-.488.847ZM20.474 17.674a.562.562 0 0 1-.281-.075l-1.081-.624a.564.564 0 1 1 .564-.977l1.08.624a.564.564 0 0 1-.282 1.053ZM21.722 13.064h-1.269a.56.56 0 1 1 0-1.119h1.27a.56.56 0 1 1 0 1.119ZM19.396 9.083a.564.564 0 0 1-.283-1.053l1.081-.624a.564.564 0 1 1 .564.977l-1.08.624a.56.56 0 0 1-.282.076ZM16.478 6.17a.564.564 0 0 1-.488-.846l.624-1.08a.564.564 0 1 1 .977.563l-.624 1.081a.564.564 0 0 1-.489.282ZM13.299 13.213a1.128 1.128 0 1 0-1.596-1.595 1.128 1.128 0 0 0 1.596 1.595Z'/%3E%3Cpath fill='%23fff' d='M12.501 12.975a.56.56 0 0 1-.56-.56V6.7a.56.56 0 1 1 1.12 0v5.715a.56.56 0 0 1-.56.56Z'/%3E%3Cpath fill='%23fff' d='M10.359 16.685a.558.558 0 0 1-.484-.84l2.143-3.711a.56.56 0 0 1 .969.56l-2.143 3.71a.56.56 0 0 1-.485.28Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  position: relative;
}
#product #habit ul li dl dd {
  border-radius: 0 5.3333333333vw 5.3333333333vw 5.3333333333vw;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 641px) {
  #product #habit ul li dl dd {
    border-radius: 0 min(20px, 1.6vw) min(20px, 1.6vw) min(20px, 1.6vw);
  }
}
#product #habit ul li dl dd figcaption {
  font-size: 4vw;
  line-height: 1.5;
  font-weight: 500;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  border-radius: 2.6666666667vw;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  padding: 2.6666666667vw;
}
@media screen and (min-width: 641px) {
  #product #habit ul li dl dd figcaption {
    padding: min(20px, 1.6vw);
    font-size: min(1.6vw, 20px);
    line-height: 1.6;
    border-radius: min(10px, 0.8vw);
  }
}
#product #habit ul li dl dd figcaption.br {
  bottom: 4vw;
  right: 4vw;
}
@media screen and (min-width: 641px) {
  #product #habit ul li dl dd figcaption.br {
    bottom: min(20px, 1.6vw);
    right: min(20px, 1.6vw);
  }
}
#product #habit ul li dl dd figcaption.tl {
  top: 4vw;
  left: 4vw;
}
@media screen and (min-width: 641px) {
  #product #habit ul li dl dd figcaption.tl {
    top: min(20px, 1.6vw);
    left: min(20px, 1.6vw);
  }
}
#product #habit ul li dl dd figcaption.bl {
  bottom: 4vw;
  left: 4vw;
}
@media screen and (min-width: 641px) {
  #product #habit ul li dl dd figcaption.bl {
    bottom: min(20px, 1.6vw);
    left: min(20px, 1.6vw);
  }
}
#product #habit ul li dl dd figcaption.tr {
  top: 4vw;
  right: 4vw;
}
@media screen and (min-width: 641px) {
  #product #habit ul li dl dd figcaption.tr {
    top: min(20px, 1.6vw);
    right: min(20px, 1.6vw);
  }
}
@media screen and (min-width: 641px) {
  #product #habit ul li:nth-child(2n) {
    transform: translateX(min(170px, 13.6vw));
  }
}
#product #habit ul li:nth-child(2n) dl dt {
  margin-left: auto;
  border-radius: 4vw 1.3333333333vw 0 0;
}
@media screen and (min-width: 641px) {
  #product #habit ul li:nth-child(2n) dl dt {
    border-radius: min(15px, 1.2vw) min(5px, 0.4vw) 0 0;
  }
}
#product #habit ul li:nth-child(2n) dl dd {
  border-radius: 5.3333333333vw 0 5.3333333333vw 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product #habit ul li:nth-child(2n) dl dd {
    border-radius: min(20px, 1.6vw) 0 min(20px, 1.6vw) min(20px, 1.6vw);
  }
}
#product #habit ul li p {
  margin-top: 1.8666666667vw;
  color: #8B8B8B;
  font-size: 2.4vw;
  line-height: 1;
  text-align: right;
}
@media screen and (min-width: 641px) {
  #product #habit ul li p {
    margin-top: min(10px, 0.8vw);
    font-size: min(0.8vw, 10px);
    line-height: 1;
    letter-spacing: 0.3px;
    width: 100%;
  }
}
#product #productInfo .info {
  background: url(../img/info-bg_sp.jpg) no-repeat top center/100% auto;
  background-color: #fff;
  padding-top: 6.6666666667vw;
  padding-bottom: 13.3333333333vw;
  position: relative;
}
@media screen and (min-width: 641px) {
  #product #productInfo .info {
    padding-top: min(70px, 5.6vw);
    padding-bottom: min(60px, 4.8vw);
    background-image: url(../img/info-bg.jpg);
  }
}
#product #productInfo .info h3 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.4vw;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 641px) {
  #product #productInfo .info h3 {
    font-size: min(3.2vw, 40px);
    line-height: 1.7;
    letter-spacing: 4px;
  }
}
#product #productInfo .info h3 .o {
  display: block;
}
#product #productInfo .info dl {
  width: 88vw;
  margin: 2.6666666667vw auto 0;
  border-radius: 2.6666666667vw;
  background: #fff;
  padding: 5.3333333333vw 4.6666666667vw 0;
  text-align: center;
}
@media screen and (min-width: 641px) {
  #product #productInfo .info dl {
    width: min(920px, 73.6vw);
    margin-top: min(45px, 3.6vw);
    padding: min(40px, 3.2vw) min(40px, 3.2vw) min(40px, 3.2vw) min(40px, 3.2vw);
    border-radius: min(10px, 0.8vw);
  }
}
#product #productInfo .info dl dt {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.4vw;
  line-height: 1.4;
  font-weight: 700;
  color: #008AB4;
}
@media screen and (min-width: 641px) {
  #product #productInfo .info dl dt {
    font-size: min(2.72vw, 34px);
    line-height: 1.5;
    letter-spacing: 1.7px;
  }
}
#product #productInfo .info dl dd {
  margin-top: 8vw;
}
@media screen and (min-width: 641px) {
  #product #productInfo .info dl dd {
    margin-top: min(40px, 3.2vw);
  }
}
#product #productInfo .info dl dd p a {
  display: grid;
  grid-template-columns: 5.0666666667vw 1fr 5.0666666667vw;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 4.2666666667vw;
  line-height: 3.4375;
  font-weight: 600;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  border-radius: 12.8vw;
  background: #008AB4;
  position: relative;
  padding: 0 5.0666666667vw;
}
@media screen and (min-width: 641px) {
  #product #productInfo .info dl dd p a {
    padding: 0 min(20px, 1.6vw);
    grid-template-columns: min(24px, 1.92vw) 1fr min(24px, 1.92vw);
    font-size: min(1.44vw, 18px);
    line-height: 3.6666666667;
    font-weight: 600;
    width: min(360px, 28.8vw);
    margin: 0 auto;
    transition: background-color 0.2s linear;
  }
}
@media screen and (min-width: 641px) and (hover: hover) and (pointer: fine) {
  #product #productInfo .info dl dd p a:hover {
    background-color: #1bcaff;
  }
}
#product #productInfo .info dl dd p a:before {
  content: "";
}
#product #productInfo .info dl dd p a:after {
  content: "";
  aspect-ratio: 18.313/16.344;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='18' fill='none'%3E%3Cpath fill='%23fff' d='M6.629 17.172a1.362 1.362 0 1 0 0-2.724 1.362 1.362 0 0 0 0 2.724ZM16.163 17.172a1.362 1.362 0 1 0 0-2.724 1.362 1.362 0 0 0 0 2.724ZM18.58 3.245a1.018 1.018 0 0 0-.79-.374H4.838l-.261-1.48a.681.681 0 0 0-.67-.563H1.18a.681.681 0 0 0 0 1.362h2.153l1.943 11.015a.68.68 0 0 0 .671.562h10.896a.681.681 0 0 0 0-1.362H6.52l-.24-1.362h10.286a1.024 1.024 0 0 0 1.003-.82l1.226-6.13a1.022 1.022 0 0 0-.213-.848Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
#product #productInfo .info > img:not(.icon) {
  width: 24.2666666667vw;
  margin: 2.4vw auto 0;
  display: block;
}
@media screen and (min-width: 641px) {
  #product #productInfo .info > img:not(.icon) {
    width: min(185px, 14.8vw);
    margin: min(65px, 5.2vw) auto 0;
  }
}
#product #productInfo .info .icon {
  width: 15.7333333333vw;
  position: absolute;
  top: 49.8666666667vw;
  right: 20vw;
}
@media screen and (min-width: 641px) {
  #product #productInfo .info .icon {
    width: min(135px, 10.8vw);
    top: min(490px, 39.2vw);
    right: auto;
    left: 50%;
    transform: translateX(min(93px, 7.44vw));
  }
}
#product #productInfo .detail {
  background: url(../img/bg-cream.png) repeat top center/100% auto;
  padding: 16vw 4.2666666667vw;
}
@media screen and (min-width: 641px) {
  #product #productInfo .detail {
    background-size: min(375px, 30vw) auto;
    padding: min(100px, 8vw) 0 min(190px, 15.2vw);
  }
}
#product #productInfo .detail h3 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.9333333333vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-align: center;
}
@media screen and (min-width: 641px) {
  #product #productInfo .detail h3 {
    font-size: min(2.72vw, 34px);
    line-height: 1;
    letter-spacing: 1.7px;
  }
}
#product #productInfo .detail > ul {
  margin-top: 8vw;
  border-radius: 2.6666666667vw;
  background: #fff;
  padding: 4vw;
  display: flex;
  flex-direction: column;
  gap: 2.6666666667vw;
}
@media screen and (min-width: 641px) {
  #product #productInfo .detail > ul {
    margin: min(50px, 4vw) auto 0;
    width: min(810px, 64.8vw);
    gap: min(15px, 1.2vw);
    border-radius: min(10px, 0.8vw);
    padding: min(30px, 2.4vw);
  }
}
#product #productInfo .detail > ul li dl dt {
  font-size: 3.2vw;
  line-height: 1;
  font-weight: 700;
  color: #7b6320;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  padding: 1.3333333333vw;
  border: 0.2666666667vw solid #7b6320;
  background: #fff;
  width: max-content;
}
@media screen and (min-width: 641px) {
  #product #productInfo .detail > ul li dl dt {
    font-size: min(1.12vw, 14px);
    line-height: 1;
    padding: min(5px, 0.4vw);
    border-width: min(1px, 0.08vw);
  }
}
#product #productInfo .detail > ul li dl dd {
  margin-top: 1.3333333333vw;
  font-size: 3.2vw;
  line-height: 1.6;
  letter-spacing: -0.6px;
  color: #7b6320;
}
@media screen and (min-width: 641px) {
  #product #productInfo .detail > ul li dl dd {
    margin-top: min(8px, 0.64vw);
    font-size: min(1.12vw, 14px);
    line-height: 1.7;
    letter-spacing: -0.7px;
  }
}
#product #productInfo .detail > ul li dl dd ul li:before {
  content: "●";
}
#product.helcare:before {
  background-image: url(../img/helcare/quality-ingredient-bg_sp.jpg);
}
@media screen and (min-width: 641px) {
  #product.helcare:before {
    background-image: url(../img/helcare/quality-ingredient-bg.jpg);
  }
}
#product.helcare #kv:before {
  background-image: url(../img/helcare/kv-bg_sp.png);
}
@media screen and (min-width: 641px) {
  #product.helcare #kv:before {
    background-image: url(../img/helcare/kv-bg.png);
  }
}
#product.helcare #kv h2 {
  top: 19.2vw;
  color: #fff;
}
@media screen and (min-width: 641px) {
  #product.helcare #kv h2 {
    top: 11.9vw;
    text-shadow: 0 0 min(8px, 0.64vw) rgba(0, 0, 0, 0.4);
  }
}
#product.helcare #kv p {
  color: #fff;
}
@media screen and (min-width: 641px) {
  #product.helcare #kv p {
    text-shadow: 0 0 min(3px, 0.24vw) rgba(0, 0, 0, 0.4);
  }
}
#product.helcare #slider {
  background-color: #edf8ff;
}
#product.helcare #purchase .wrap {
  padding-top: 20.8vw;
}
@media screen and (min-width: 641px) {
  #product.helcare #purchase .wrap {
    padding-top: min(50px, 4vw);
  }
}
#product.helcare #purchase .wrap p a {
  margin: 13.0666666667vw auto 0;
}
@media screen and (min-width: 641px) {
  #product.helcare #purchase .wrap p a {
    margin-top: min(45px, 3.6vw);
  }
}
#product.helcare #purchase .product {
  width: 48vw;
  transform: translateX(-0.8vw);
}
@media screen and (min-width: 641px) {
  #product.helcare #purchase .product {
    width: min(313px, 25.04vw);
    transform: translateX(min(3px, 0.24vw));
  }
}
#product.helcare #purchase .icon {
  width: 17.3333333333vw;
  top: 36vw;
  right: 9.8666666667vw;
}
@media screen and (min-width: 641px) {
  #product.helcare #purchase .icon {
    width: min(82px, 6.56vw);
    top: min(183px, 14.64vw);
    right: 50%;
    transform: translateX(min(239px, 19.12vw));
  }
}
#product.helcare #purchase .images {
  background-image: url(../img/helcare/images_sp.jpg);
}
@media screen and (min-width: 641px) {
  #product.helcare #purchase .images {
    background-image: url(../img/helcare/images.jpg);
  }
}
#product.helcare #productInfo .info > img:not(.icon) {
  width: 47.4666666667vw;
  margin: 4.8vw auto 0;
  display: block;
}
@media screen and (min-width: 641px) {
  #product.helcare #productInfo .info > img:not(.icon) {
    width: min(260px, 20.8vw);
    margin: min(65px, 5.2vw) auto 0;
    transform: translateX(max(-25px, -2vw));
  }
}
#product.helcare #productInfo .info .icon {
  width: 17.3333333333vw;
  position: absolute;
  top: 44vw;
  right: 9.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.helcare #productInfo .info .icon {
    width: min(70px, 5.6vw);
    top: min(375px, 30vw);
    right: auto;
    left: 50%;
    transform: translateX(min(105px, 8.4vw));
  }
}
#product.toushiblock:before {
  background-image: url(../img/toushiblock/quality-ingredient-bg_sp.jpg);
}
@media screen and (min-width: 641px) {
  #product.toushiblock:before {
    background-image: url(../img/toushiblock/quality-ingredient-bg.jpg);
  }
}
#product.toushiblock #kv:before {
  background-image: url(../img/toushiblock/kv-bg_sp.png);
}
@media screen and (min-width: 641px) {
  #product.toushiblock #kv:before {
    background-image: url(../img/toushiblock/kv-bg.png);
  }
}
#product.toushiblock #kv h2 {
  top: 4.2666666667vw;
}
@media screen and (min-width: 641px) {
  #product.toushiblock #kv h2 {
    top: 10vw;
  }
}
#product.toushiblock #kv h2 .mini {
  font-size: 3.7333333333vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.28px;
  display: block;
  margin-bottom: 1.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.toushiblock #kv h2 .mini {
    font-size: min(1.6vw, 20px);
    line-height: 1;
    margin-bottom: min(10px, 0.8vw);
  }
}
#product.toushiblock #slider {
  background-color: #fff1ec;
}
#product.toushiblock #purchase .wrap {
  padding-top: 9.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.toushiblock #purchase .wrap {
    padding-top: min(83px, 6.64vw);
  }
}
#product.toushiblock #purchase .wrap p a {
  margin: 3.4666666667vw auto 0;
}
@media screen and (min-width: 641px) {
  #product.toushiblock #purchase .wrap p a {
    margin-top: min(35px, 2.8vw);
  }
}
#product.toushiblock #purchase .images {
  background-image: url(../img/toushiblock/images_sp.jpg);
}
@media screen and (min-width: 641px) {
  #product.toushiblock #purchase .images {
    background-image: url(../img/toushiblock/images.jpg);
  }
}
#product.nyousanguard:before {
  background-image: url(../img/nyousanguard/quality-ingredient-bg_sp.jpg);
}
@media screen and (min-width: 641px) {
  #product.nyousanguard:before {
    background-image: url(../img/nyousanguard/quality-ingredient-bg.jpg);
  }
}
#product.nyousanguard #kv:before {
  background-image: url(../img/nyousanguard/kv-bg_sp.png);
}
@media screen and (min-width: 641px) {
  #product.nyousanguard #kv:before {
    background-image: url(../img/nyousanguard/kv-bg.png);
  }
}
#product.nyousanguard #kv h2 {
  top: 12vw;
}
@media screen and (min-width: 641px) {
  #product.nyousanguard #kv h2 {
    top: 12.5vw;
  }
}
#product.nyousanguard #kv h2 .mini {
  font-size: 3.7333333333vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.28px;
  display: block;
  margin-bottom: 1.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.nyousanguard #kv h2 .mini {
    font-size: min(1.6vw, 20px);
    line-height: 1;
    margin-bottom: min(10px, 0.8vw);
  }
}
#product.nyousanguard #slider {
  background-color: #fffce9;
}
#product.nyousanguard #purchase .wrap {
  padding-top: 9.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.nyousanguard #purchase .wrap {
    padding-top: min(83px, 6.64vw);
  }
}
#product.nyousanguard #purchase .wrap p a {
  margin: 3.4666666667vw auto 0;
}
@media screen and (min-width: 641px) {
  #product.nyousanguard #purchase .wrap p a {
    margin-top: min(35px, 2.8vw);
  }
}
#product.nyousanguard #purchase .images {
  background-image: url(../img/nyousanguard/images_sp.jpg);
}
@media screen and (min-width: 641px) {
  #product.nyousanguard #purchase .images {
    background-image: url(../img/nyousanguard/images.jpg);
  }
}
#product.nyousanguard #quality .ingredient .bg figure:after {
  background-image: url(../img/bg-ingredient-bottom-white_sp.png);
}
@media screen and (min-width: 641px) {
  #product.nyousanguard #quality .ingredient .bg figure:after {
    background-image: url(../img/bg-ingredient-bottom-white.png);
  }
}
#product.kekkansaracare:before {
  background-image: url(../img/kekkansaracare/quality-ingredient-bg_sp.jpg);
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare:before {
    background-image: url(../img/kekkansaracare/quality-ingredient-bg.jpg);
  }
}
#product.kekkansaracare #kv:before {
  background-image: url(../img/kekkansaracare/kv-bg_sp.png);
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #kv:before {
    background-image: url(../img/kekkansaracare/kv-bg.png);
  }
}
#product.kekkansaracare #kv h2 {
  top: 4.2666666667vw;
  letter-spacing: normal;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #kv h2 {
    top: 10vw;
  }
}
#product.kekkansaracare #kv h2 .mini {
  font-size: 3.7333333333vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.28px;
  display: block;
  margin-bottom: 1.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #kv h2 .mini {
    font-size: min(1.6vw, 20px);
    line-height: 1;
    margin-bottom: min(10px, 0.8vw);
  }
}
#product.kekkansaracare #kv p {
  width: 92vw;
  text-align: left;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.4vw;
  line-height: 1.5;
  letter-spacing: 0.27px;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #kv p {
    bottom: min(20px, 1.6vw);
    font-size: min(0.8vw, 10px);
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-align: left;
    width: max-content;
    left: 14vw;
    transform: none;
  }
}
#product.kekkansaracare #slider {
  background-color: #f0f9fa;
}
#product.kekkansaracare #purchase .wrap {
  padding-top: 9.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #purchase .wrap {
    padding-top: min(83px, 6.64vw);
  }
}
#product.kekkansaracare #purchase .wrap p a {
  margin: 3.4666666667vw auto 0;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #purchase .wrap p a {
    margin-top: min(35px, 2.8vw);
  }
}
#product.kekkansaracare #purchase .images {
  background-image: url(../img/kekkansaracare/images_sp.jpg);
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #purchase .images {
    background-image: url(../img/kekkansaracare/images.jpg);
  }
}
#product.kekkansaracare #quality .ingredient .bg figure:after {
  background-image: url(../img/bg-ingredient-bottom-beige_sp.png);
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #quality .ingredient .bg figure:after {
    background-image: url(../img/bg-ingredient-bottom-beige.png);
  }
}
#product.kekkansaracare #quality .ingredient .bg figure img {
  border: 0.2666666667vw solid #fff;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #quality .ingredient .bg figure img {
    border-width: min(1px, 0.08vw);
  }
}
#product.kekkansaracare #quality .more {
  background: url(../img/bg-beige.png) repeat center center/100% auto;
  text-align: center;
  padding: 2.6666666667vw 4.6666666667vw 13.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #quality .more {
    background-size: min(375px, 30vw) auto;
    padding: min(70px, 5.6vw) 0 min(100px, 8vw);
  }
}
#product.kekkansaracare #quality .more h4 {
  font-size: 5.3333333333vw;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 1.4px;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #quality .more h4 {
    font-size: min(2.4vw, 30px);
    line-height: 1.7;
  }
}
#product.kekkansaracare #quality .more img {
  margin-top: 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #quality .more img {
    margin-top: min(50px, 4vw);
    width: min(520px, 41.6vw);
  }
}
#product.kekkansaracare #quality .feelings {
  padding-top: 13.3333333333vw;
}
@media screen and (min-width: 641px) {
  #product.kekkansaracare #quality .feelings {
    padding: min(100px, 8vw) 0;
  }
}

#about {
  position: relative;
}
#about:before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../img/about/bg_sp.png);
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: 0 123.4666666667vw;
  position: absolute;
  top: 123.4666666667vw;
  left: 0;
  z-index: 1;
}
@media screen and (min-width: 641px) {
  #about:before {
    background-image: url(../img/about/bg.png);
    background-position: 0 48.515625vw;
    top: 48.515625vw;
  }
}
#about header {
  border-color: transparent;
}
#about #kv {
  top: 27.7333333333vw;
  position: fixed;
  z-index: -1;
}
@media screen and (min-width: 641px) {
  #about #kv {
    margin-top: 0;
    top: 0;
    height: 48.515625vw;
  }
}
#about #kv h1 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  text-align: right;
  font-size: 7.4666666667vw;
  line-height: 1.3571428571;
  font-weight: 600;
  letter-spacing: 1.96px;
  padding: 0 8vw 5.3333333333vw;
  opacity: 0;
  animation: fadeInUp 0.5s ease-out 0.2s forwards;
}
@media screen and (min-width: 641px) {
  #about #kv h1 {
    position: absolute;
    top: 25.5vw;
    left: min(85px, 6.8vw);
    font-size: min(4vw, 50px);
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-align: left;
    padding: 0;
  }
}
#about #kv h1 + img {
  margin-top: 6.6666666667vw;
}
@media screen and (min-width: 641px) {
  #about #kv h1 + img {
    margin: 0;
  }
}
@media screen and (min-width: 641px) {
  #about #kv img {
    height: 48.515625vw;
    width: auto;
  }
}
#about #read {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 123.4666666667vw;
}
@media screen and (min-width: 641px) {
  #about #read {
    margin-top: 48.515625vw;
  }
}
#about #read p {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  margin-top: 66.6666666667vw;
  padding: 13.3333333333vw 8vw 0;
  font-size: 5.3333333333vw;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: 1.4px;
}
@media screen and (min-width: 641px) {
  #about #read p {
    margin: 0 auto;
    width: max-content;
    padding: min(160px, 12.8vw) 0 0;
    font-size: min(3.2vw, 40px);
    line-height: 1.7;
    letter-spacing: 4px;
    transform: translateX(max(-15px, -1.2vw));
  }
}
#about #read .imgwrap,
#about #production .imgwrap {
  position: relative;
}
@media screen and (min-width: 641px) {
  #about #read .imgwrap,
  #about #production .imgwrap {
    width: min(1000px, 80vw);
    margin: min(160px, 12.8vw) auto 0;
    display: block;
  }
}
#about #read .img01,
#about #production .img01 {
  display: block;
  width: 74.1333333333vw;
  margin: 13.3333333333vw 0 0 auto;
  z-index: 2;
  position: relative;
  opacity: 0;
}
@media screen and (min-width: 641px) {
  #about #read .img01,
  #about #production .img01 {
    margin-top: 0;
    width: min(600px, 48vw);
    margin-left: auto;
  }
}
#about #read .img02,
#about #production .img02 {
  display: block;
  width: 74.1333333333vw;
  margin: 8vw 0 0;
  opacity: 0;
}
@media screen and (min-width: 641px) {
  #about #read .img02,
  #about #production .img02 {
    margin-top: max(-50px, -4vw);
    width: min(600px, 48vw);
  }
}
#about #development,
#about #production,
#about #support {
  position: relative;
  z-index: 2;
}
#about #development .inner,
#about #production .inner,
#about #support .inner {
  padding-top: 29.3333333333vw;
}
@media screen and (min-width: 641px) {
  #about #development .inner,
  #about #production .inner,
  #about #support .inner {
    width: min(1000px, 80vw);
    padding-top: min(160px, 12.8vw);
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0;
  }
}
@media screen and (min-width: 641px) {
  #about #development .wrap,
  #about #production .wrap,
  #about #support .wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: min(80px, 6.4vw);
    grid-column: 1/3;
  }
}
#about #development h2,
#about #production h2,
#about #support h2 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  position: relative;
  color: #008ab4;
  font-size: 5.3333333333vw;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 1.4px;
  display: grid;
  grid-template-columns: 15.7333333333vw 1fr;
  align-items: center;
  gap: 3.7333333333vw;
  padding-bottom: 4vw;
}
@media screen and (min-width: 641px) {
  #about #development h2,
  #about #production h2,
  #about #support h2 {
    font-size: min(2.4vw, 30px);
    line-height: 1.5;
    letter-spacing: 2.1px;
    grid-template-columns: min(72px, 5.76vw) 1fr;
    gap: min(19px, 1.52vw);
    padding-bottom: 0;
    grid-column: 1/3;
  }
}
#about #development h2 span,
#about #production h2 span,
#about #support h2 span {
  font-size: 5.3333333333vw;
  line-height: 1;
  font-weight: 500;
  color: #0C1112;
  width: 100%;
  aspect-ratio: 59/53;
  display: grid;
  place-items: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 641px) {
  #about #development h2 span,
  #about #production h2 span,
  #about #support h2 span {
    font-size: min(2.4vw, 30px);
    line-height: 1;
  }
}
#about #development h2 + img,
#about #production h2 + img,
#about #support h2 + img {
  opacity: 0;
  will-change: transform, opacity;
}
#about #development h2 + img.animeOn,
#about #production h2 + img.animeOn,
#about #support h2 + img.animeOn {
  animation: fadeIn 0.5s ease-out forwards;
}
#about #development h3,
#about #production h3,
#about #support h3 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 6.5333333333vw;
  line-height: 1.5918367347;
  font-weight: 700;
  width: 100%;
  display: block;
  margin-top: 6.9333333333vw;
}
@media screen and (min-width: 641px) {
  #about #development h3,
  #about #production h3,
  #about #support h3 {
    margin-top: min(40px, 3.2vw);
    margin-left: min(14px, 1.12vw);
    font-size: min(3.2vw, 40px);
    line-height: 1.7;
    letter-spacing: 1.7px;
    text-align: left !important;
    text-align-last: left !important;
  }
}
#about #development h3 span:not(.o):not(.anime),
#about #production h3 span:not(.o):not(.anime),
#about #support h3 span:not(.o):not(.anime) {
  color: #D6007F;
}
#about #development figure,
#about #production figure,
#about #support figure {
  display: flex;
  flex-direction: column;
  opacity: 0;
}
#about #development figure figcaption dl dt,
#about #production figure figcaption dl dt,
#about #support figure figcaption dl dt {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 5.3333333333vw;
  line-height: 1.5;
  font-weight: 700;
}
@media screen and (min-width: 641px) {
  #about #development figure figcaption dl dt,
  #about #production figure figcaption dl dt,
  #about #support figure figcaption dl dt {
    font-size: min(2.4vw, 30px);
    line-height: 1.5;
    letter-spacing: 1.2px;
  }
}
#about #development figure figcaption dl dd p,
#about #production figure figcaption dl dd p,
#about #support figure figcaption dl dd p {
  font-size: 4vw;
  line-height: 2;
  letter-spacing: 0.6px;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #about #development figure figcaption dl dd p,
  #about #production figure figcaption dl dd p,
  #about #support figure figcaption dl dd p {
    font-size: min(1.6vw, 20px);
    line-height: 2;
    letter-spacing: 1.4px;
  }
}
#about #development figure,
#about #production figure {
  width: 66.1333333333vw;
  gap: 5.8666666667vw;
}
@media screen and (min-width: 641px) {
  #about #development figure,
  #about #production figure {
    width: auto;
    gap: min(35px, 2.8vw);
  }
}
#about #development figure:first-of-type,
#about #production figure:first-of-type {
  margin: 26.6666666667vw 0 0 auto;
}
@media screen and (min-width: 641px) {
  #about #development figure:first-of-type,
  #about #production figure:first-of-type {
    margin: 0;
  }
}
#about #development figure:last-of-type,
#about #production figure:last-of-type {
  margin: 24vw auto 0 0;
}
@media screen and (min-width: 641px) {
  #about #development figure:last-of-type,
  #about #production figure:last-of-type {
    margin-top: min(150px, 12vw);
  }
}
#about #development figure figcaption dl dt,
#about #production figure figcaption dl dt {
  letter-spacing: 0.8px;
}
#about #development figure figcaption dl dd,
#about #production figure figcaption dl dd {
  margin-top: 2.1333333333vw;
}
@media screen and (min-width: 641px) {
  #about #development figure figcaption dl dd,
  #about #production figure figcaption dl dd {
    margin-top: min(15px, 1.2vw);
  }
}
#about #development figure figcaption dl dd span,
#about #production figure figcaption dl dd span {
  margin-top: 1.3333333333vw;
  display: block;
  font-size: 3.2vw;
  line-height: 2;
}
@media screen and (min-width: 641px) {
  #about #development figure figcaption dl dd span,
  #about #production figure figcaption dl dd span {
    margin-top: min(10px, 0.8vw);
    font-size: min(0.96vw, 12px);
    line-height: 2;
    letter-spacing: 0.84px;
  }
}
#about #development {
  padding-left: 8vw;
  padding-right: 8vw;
}
@media screen and (min-width: 641px) {
  #about #development {
    padding: 0;
  }
}
@media screen and (min-width: 641px) {
  #about #development h2 {
    padding-top: min(60px, 4.8vw);
    padding-bottom: 0;
  }
}
#about #development h2 span {
  background-image: url(../img/about/head-bg01.png);
}
@media screen and (min-width: 641px) {
  #about #development h2 + img {
    width: min(413px, 33.04vw);
    grid-column: 2/3;
    grid-row: 2/3;
    justify-self: end;
    transform: translateY(max(-120px, -9.6vw));
  }
}
#about #development h3 {
  text-align: justify;
  text-align-last: justify;
}
@media screen and (min-width: 641px) {
  #about #development h3 {
    grid-column: 1/2;
  }
}
@media screen and (min-width: 641px) {
  #about #production {
    padding-top: min(160px, 12.8vw);
  }
}
#about #production .inner {
  padding-left: 8vw;
  padding-right: 8vw;
}
@media screen and (min-width: 641px) {
  #about #production .inner {
    padding: 0;
  }
}
@media screen and (min-width: 641px) {
  #about #production h2 {
    margin-left: min(481px, 38.48vw);
  }
}
#about #production h2 span {
  background-image: url(../img/about/head-bg02.png);
}
@media screen and (min-width: 641px) {
  #about #production h2 + img {
    width: min(421px, 33.68vw);
    grid-column: 1/2;
    grid-row: 2/3;
    transform: translateY(max(-60px, -4.8vw));
  }
}
@media screen and (min-width: 641px) {
  #about #production h3 {
    grid-column: 2/3;
    justify-self: end;
    margin-left: max(-40px, -3.2vw);
  }
}
@media screen and (min-width: 641px) {
  #about #production .wrap {
    margin-top: min(105px, 8.4vw);
  }
}
#about #production .img01 {
  margin-top: 16vw;
}
@media screen and (min-width: 641px) {
  #about #production .img01 {
    margin-top: min(160px, 12.8vw);
  }
}
#about #production .img02 {
  margin-top: 8vw;
}
@media screen and (min-width: 641px) {
  #about #production .img02 {
    margin-top: max(-50px, -4vw);
  }
}
#about #support {
  padding-left: 8vw;
  padding-right: 8vw;
  padding-bottom: 16vw;
}
@media screen and (min-width: 641px) {
  #about #support {
    padding: 0 0 min(240px, 19.2vw);
  }
}
@media screen and (min-width: 641px) {
  #about #support h2 {
    padding-top: min(40px, 3.2vw);
  }
}
#about #support h2 span {
  background-image: url(../img/about/head-bg03.png);
}
@media screen and (min-width: 641px) {
  #about #support h2 + img {
    width: min(421px, 33.68vw);
    grid-column: 2/3;
    grid-row: 2/3;
    justify-self: end;
    transform: translateY(max(-105px, -8.4vw));
  }
}
@media screen and (min-width: 641px) {
  #about #support h3 {
    grid-column: 1/2;
  }
}
@media screen and (min-width: 641px) {
  #about #support .wrap {
    display: flex;
    margin-top: 0;
  }
}
#about #support figure {
  width: 100%;
  gap: 8vw;
  opacity: 0;
  will-change: transform, opacity;
  margin: 12vw 0 0 auto;
}
@media screen and (min-width: 641px) {
  #about #support figure {
    gap: 0;
    flex: 1;
    margin: 0;
  }
}
#about #support figure.animeOn {
  animation: fadeInUp 0.5s ease-out forwards;
}
@media screen and (min-width: 641px) {
  #about #support figure img {
    width: min(460px, 36.8vw);
    position: absolute;
    top: 0;
    left: 0;
  }
}
#about #support figure figcaption > dl > dt {
  letter-spacing: 0.2px;
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dt {
    letter-spacing: 1.2px;
    width: min(460px, 36.8vw);
    margin-left: auto;
  }
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dd {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
}
#about #support figure figcaption > dl > dd > p {
  margin-top: 2.6666666667vw;
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dd > p {
    margin-top: min(15px, 1.2vw);
    width: min(460px, 36.8vw);
    margin-left: auto;
  }
}
#about #support figure figcaption > dl > dd .dial {
  margin-top: 5.8666666667vw;
  border-radius: 2.6666666667vw;
  border: 0.2666666667vw solid #fff;
  background: url(../img/about/dial-bg.png) repeat-y center center/100% auto;
  padding: 5.3333333333vw;
  text-align: center;
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dd .dial {
    margin-top: min(75px, 6vw);
    padding: min(40px, 3.2vw) 0;
    border-radius: min(10px, 0.8vw);
    display: flex;
    flex-direction: column;
    flex: 1;
  }
}
#about #support figure figcaption > dl > dd .dial dl dt {
  color: #638090;
  font-size: 4vw;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 1.05px;
  display: flex;
  gap: 1.6vw;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dd .dial dl dt {
    font-size: min(1.6vw, 20px);
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 1.4px;
    gap: min(8px, 0.64vw);
  }
}
#about #support figure figcaption > dl > dd .dial dl dt:before {
  content: "";
  width: 3.7333333333vw;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Cpath fill='%23638090' d='M3.316 6.702a11.782 11.782 0 0 0 5.125 5.126l1.711-1.711c.21-.21.521-.28.794-.187a8.872 8.872 0 0 0 2.776.444.78.78 0 0 1 .778.777v2.715a.78.78 0 0 1-.778.778C6.42 14.644.5 8.724.5 1.42a.78.78 0 0 1 .778-.777H4a.78.78 0 0 1 .778.777c0 .973.155 1.906.443 2.777a.78.78 0 0 1-.194.793L3.316 6.702Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dd .dial dl dt:before {
    width: min(20px, 1.6vw);
  }
}
#about #support figure figcaption > dl > dd .dial dl dd {
  margin-top: 3.7333333333vw;
  font-weight: 700;
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dd .dial dl dd {
    margin-top: min(15px, 1.2vw);
  }
}
#about #support figure figcaption > dl > dd .dial dl dd address {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 8vw;
  line-height: 1;
  letter-spacing: 2.1px;
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dd .dial dl dd address {
    font-size: min(3.6vw, 45px);
    line-height: 1;
    letter-spacing: 3.15px;
  }
}
#about #support figure figcaption > dl > dd .dial dl dd p {
  margin-top: 3.7333333333vw;
  font-size: 4vw;
  line-height: 1;
  letter-spacing: 1.05px;
  font-family: YakuHanMP, "Noto Serif JP", serif;
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dd .dial dl dd p {
    margin-top: min(25px, 2vw);
    font-size: min(1.6vw, 20px);
    line-height: 1;
    letter-spacing: 1.4px;
  }
}
#about #support figure figcaption > dl > dd .dial dl dd p span {
  margin-top: 1.8666666667vw;
  font-size: 3.2vw;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.84px;
  display: block;
}
@media screen and (min-width: 641px) {
  #about #support figure figcaption > dl > dd .dial dl dd p span {
    margin-top: min(13px, 1.04vw);
    font-size: min(1.28vw, 16px);
    line-height: 1;
    letter-spacing: 1.12px;
  }
}
#about #allproduct {
  background: none;
}

#voice header {
  border-color: transparent;
}
#voice #kv {
  position: relative;
  margin-top: 17.0666666667vw;
}
@media screen and (min-width: 641px) {
  #voice #kv {
    margin-top: min(76px, 6.08vw);
  }
}
#voice #kv:before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='375' height='187' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M375 0H0v187h375V0Zm0 187C374.194 84.137 290.556 1 187.5 1S.806 84.137 0 187h375Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
@media screen and (min-width: 641px) {
  #voice #kv:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1281' height='165' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M1281 0H1v164.56L0 165h1v-.44C122.418 111.279 363.022 75 640 75c277.74 0 518.91 36.479 640 90h1V0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  }
}
@media screen and (min-width: 641px) {
  #voice #kv picture img {
    margin-top: min(73px, 5.84vw);
  }
}
#voice #kv h1 {
  position: absolute;
  left: 7.2vw;
  top: 69.8666666667vw;
  width: 56.2666666667vw;
}
@media screen and (min-width: 641px) {
  #voice #kv h1 {
    width: min(330px, 26.4vw);
    top: 26.64vw;
    left: min(85px, 6.8vw);
  }
}
#voice #kv p {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  position: absolute;
  font-size: 5.8666666667vw;
  line-height: 1.5;
  letter-spacing: 1.54px;
  text-shadow: 0 0 1.3333333333vw rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  width: 100%;
  top: 17.3333333333vw;
  font-weight: 700;
}
@media screen and (min-width: 641px) {
  #voice #kv p {
    top: 10.32vw;
    text-shadow: 0 0 min(8px, 0.64vw) rgba(0, 0, 0, 0.4);
    font-size: min(3.2vw, 40px);
    line-height: 1.5;
    letter-spacing: 4px;
  }
}
#voice #list {
  padding: 16vw 8vw 16vw;
  background: url(../img/bg-cream.png) repeat top center/100% auto;
}
@media screen and (min-width: 641px) {
  #voice #list {
    background-size: min(375px, 30vw) auto;
    padding: min(100px, 8vw) 0 min(160px, 12.8vw);
    min-height: 100vh;
  }
}
#voice #list > ul {
  display: flex;
  flex-direction: column;
  gap: 9.3333333333vw;
}
@media screen and (min-width: 641px) {
  #voice #list > ul {
    width: min(1000px, 80vw);
    margin: 0 auto;
    gap: min(60px, 4.8vw);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 641px) {
  #voice #list > ul li {
    display: flex;
  }
}
#voice #list > ul li:nth-of-type(2n) button figure > span img {
  margin-left: auto;
}
#voice #list > ul li:nth-of-type(2n) figcaption dl dt {
  left: 4vw;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li:nth-of-type(2n) figcaption dl dt {
    left: min(31px, 2.48vw);
  }
}
#voice #list > ul li button {
  display: block;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button {
    display: flex;
  }
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
  }
}
#voice #list > ul li button figure > span {
  display: block;
  width: 100%;
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
  background: #e5f3f7;
  overflow: hidden;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure > span {
    border-radius: min(30px, 2.4vw) min(30px, 2.4vw) 0 0;
    display: flex;
    height: min(175px, 14vw);
  }
}
#voice #list > ul li button figure > span img {
  width: 26.6666666667vw;
  display: block;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure > span img {
    width: min(175px, 14vw);
  }
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption {
    display: flex;
    flex: 1;
  }
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl {
    display: flex;
    flex: 1;
  }
}
#voice #list > ul li button figure figcaption dl dt {
  position: absolute;
  top: 5.3333333333vw;
  left: 30.6666666667vw;
  display: grid;
  grid-template-columns: 8vw 1fr 1fr 1fr;
  align-items: center;
  gap: 2.6666666667vw 1.8666666667vw;
  font-size: 4.8vw;
  line-height: 1;
  letter-spacing: 0.54px;
  font-family: YakuHanMP, "Noto Serif JP", serif;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dt {
    font-size: min(2.4vw, 30px);
    line-height: 1;
    left: min(206px, 16.48vw);
    top: min(40px, 3.2vw);
    letter-spacing: 1.2px;
    grid-template-columns: min(50px, 4vw) 1fr 1fr 1fr;
    gap: min(15px, 1.2vw) min(10px, 0.8vw);
  }
}
#voice #list > ul li button figure figcaption dl dt:before {
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  background-color: #fff;
  border: 0.2666666667vw solid;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dt:before {
    border-width: min(1px, 0.08vw);
  }
}
#voice #list > ul li button figure figcaption dl dt .name {
  grid-column: 2/5;
}
#voice #list > ul li button figure figcaption dl dt span:not(.num, .name) {
  display: block;
  grid-column: 1/3;
  background-color: #fff;
  font-size: 2.6666666667vw;
  line-height: 1.2;
  letter-spacing: 0.2px;
  padding: 0.8vw 1.0666666667vw;
  border: 0.2666666667vw solid #0C1112;
  border-radius: 1.0666666667vw;
  width: max-content;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dt span:not(.num, .name) {
    font-size: min(1.12vw, 14px);
    line-height: 1.4;
    letter-spacing: 0.42px;
    padding: min(4px, 0.32vw) min(6px, 0.48vw);
    border-width: min(1px, 0.08vw);
    border-radius: min(4px, 0.32vw);
  }
}
#voice #list > ul li button figure figcaption dl dt .num {
  grid-column: 3/5;
  font-family: YakuHanJP, "Noto Sans JP", serif;
  font-size: 2.1333333333vw;
  line-height: 1.2;
  letter-spacing: 0.16px;
  font-weight: 400;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dt .num {
    font-size: min(0.96vw, 12px);
    line-height: 1;
    letter-spacing: 0.36px;
  }
}
#voice #list > ul li button figure figcaption dl dd {
  padding: 5.3333333333vw;
  background-color: #fff;
  border-radius: 0 0 5.3333333333vw 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dd {
    padding: min(40px, 3.2vw);
    border-radius: 0 0 min(30px, 2.4vw) min(30px, 2.4vw);
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}
#voice #list > ul li button figure figcaption dl dd ul {
  display: flex;
  gap: 1.3333333333vw;
  flex-wrap: wrap;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dd ul {
    gap: min(10px, 0.8vw);
  }
}
#voice #list > ul li button figure figcaption dl dd ul li {
  border-radius: 1.0666666667vw;
  background: #eee;
  padding: 1.6vw 1.8666666667vw;
  font-size: 3.2vw;
  line-height: 1;
  letter-spacing: 0.84px;
  font-weight: 600;
  width: max-content;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dd ul li {
    font-size: min(1.12vw, 14px);
    line-height: 1;
    letter-spacing: 0.98px;
    padding: min(5px, 0.4vw) min(7px, 0.56vw);
    border-radius: min(4px, 0.32vw);
  }
}
#voice #list > ul li button figure figcaption dl dd p:not(.more) {
  margin-top: 2.6666666667vw;
  font-size: 2.4vw;
  line-height: 1.5;
  letter-spacing: 0.27px;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dd p:not(.more) {
    margin-top: min(12px, 0.96vw);
    font-size: min(0.8vw, 10px);
    line-height: 1.5;
    letter-spacing: 0.7px;
    margin-bottom: min(30px, 2.4vw);
  }
}
#voice #list > ul li button figure figcaption dl dd h2 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 5.3333333333vw;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.6px;
  display: grid;
  grid-template-columns: 6.1333333333vw 1fr;
  gap: 5.3333333333vw;
  position: relative;
  margin-top: 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dd h2 {
    margin-top: auto;
    font-size: min(2.4vw, 30px);
    line-height: 1.35;
    letter-spacing: 1.5px;
    gap: min(20px, 1.6vw);
    grid-template-columns: min(25px, 2vw) 1fr;
  }
}
#voice #list > ul li button figure figcaption dl dd h2:before {
  content: "";
  width: 100%;
  aspect-ratio: 23/24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='24' fill='none'%3E%3Cpath fill='%23E7E7E7' d='m19.286 6 .55.857c-3.243 2.057-4.946 4.457-4.946 6.343 0 .971.495 1.371 1.593 1.371 1.979 0 3.517 1.6 3.517 3.658A3.767 3.767 0 0 1 16.209 22c-2.583 0-4.726-2.686-4.726-5.829 0-4.457 2.803-7.942 7.803-10.171ZM7.802 6l.55.857C5.11 8.914 3.407 11.314 3.407 13.2c0 .971.494 1.371 1.593 1.371 1.978 0 3.516 1.6 3.516 3.658A3.766 3.766 0 0 1 4.726 22C2.142 22 0 19.314 0 16.171 0 11.714 2.802 8.23 7.802 6Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
#voice #list > ul li button figure figcaption dl dd .more {
  margin-top: 5.3333333333vw;
  border-radius: 2.6666666667vw;
  background: #008AB4;
  font-size: 4.2666666667vw;
  line-height: 2.8125;
  color: #fff;
  font-weight: 600;
  text-align: center;
  display: grid;
  grid-template-columns: 4vw 1fr 4vw;
  align-items: center;
  padding: 0 4.2666666667vw;
  transition: background-color 0.2s linear;
  font-family: YakuHanMP, "Noto Serif JP", serif;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li button figure figcaption dl dd .more {
    margin-top: min(30px, 2.4vw);
    padding: 0 min(20px, 1.6vw);
    border-radius: min(20px, 1.6vw);
    font-size: min(1.44vw, 18px);
    line-height: 3.6666666667;
    grid-template-columns: min(24px, 1.92vw) 1fr min(24px, 1.92vw);
  }
}
#voice #list > ul li button figure figcaption dl dd .more:before {
  content: "";
}
#voice #list > ul li button figure figcaption dl dd .more:after {
  content: "";
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Cpath fill='%23fff' d='M0 3.125A3.125 3.125 0 0 1 3.125 0h8.75A3.125 3.125 0 0 1 15 3.125v8.75A3.125 3.125 0 0 1 11.875 15h-8.75A3.125 3.125 0 0 1 0 11.875v-8.75ZM1.25 5v6.875a1.875 1.875 0 0 0 1.875 1.875h8.75a1.875 1.875 0 0 0 1.875-1.875V5H1.25Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  #voice #list > ul li button figure figcaption dl dd .more:hover {
    background-color: #1bcaff;
  }
}
#voice #list > ul li.comingsoon {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 5.3333333333vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.6px;
  display: grid;
  place-items: center;
  border-radius: 5.3333333333vw;
  background: #eee;
  height: 40vw;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li.comingsoon {
    height: min(200px, 16vw);
    border-radius: min(20px, 1.6vw);
    font-size: min(2.4vw, 30px);
    line-height: 1;
    letter-spacing: 0.9px;
    grid-column: 1/3;
  }
}
#voice #list > ul li.Helcare button figure figcaption dl dt:before {
  background-image: url(../img/product-helcare.png);
  background-size: 5.0666666667vw auto;
  background-repeat: no-repeat;
  background-position: center;
  border-color: #0295FF;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li.Helcare button figure figcaption dl dt:before {
    background-size: min(32px, 2.56vw) auto;
  }
}
#voice #list > ul li.Toushi button figure figcaption dl dt:before {
  background-image: url(../img/product-toushiblock.png);
  background-size: 3.7333333333vw auto;
  background-repeat: no-repeat;
  background-position: center;
  border-color: #F5511D;
}
@media screen and (min-width: 641px) {
  #voice #list > ul li.Toushi button figure figcaption dl dt:before {
    background-size: min(23px, 1.84vw) auto;
  }
}
#voice #detail .modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84vw;
  height: calc(100% - 20.2666666667vw);
  z-index: 199;
  border-radius: 5.3333333333vw;
  background: #fff;
  padding: 8vw 2.6666666667vw 0 5.3333333333vw;
}
@media screen and (min-width: 641px) {
  #voice #detail .modal {
    width: 80vw;
    max-width: min(820px, 65.6vw);
    height: 75vh;
    padding: min(70px, 5.6vw) min(25px, 2vw) 0 min(50px, 4vw);
    border-radius: min(30px, 2.4vw);
  }
}
#voice #detail .modal .wrap {
  height: 100%;
  overflow-y: scroll;
  overscroll-behavior-y: none;
  padding-right: 2.6666666667vw;
  padding-bottom: 8vw;
}
@media screen and (min-width: 641px) {
  #voice #detail .modal .wrap {
    height: calc(75vh - min(70px, 5.6vw));
    padding-right: min(45px, 3.6vw);
    padding-bottom: min(70px, 5.6vw);
  }
}
#voice #detail .modal .wrap h2 {
  display: grid;
  grid-template-columns: 17.8666666667vw 1fr;
  gap: 0 4vw;
  color: #008AB4;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 4.8vw;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.54px;
  align-items: flex-end;
}
@media screen and (min-width: 641px) {
  #voice #detail .modal .wrap h2 {
    font-size: min(2.08vw, 26px);
    line-height: 1;
    letter-spacing: 1.04px;
    gap: 0 min(25px, 2vw);
    grid-template-columns: min(120px, 9.6vw) 1fr;
    background: url(../img/line.svg) repeat-x center bottom/auto min(2px, 0.16vw);
    padding-bottom: min(40px, 3.2vw);
  }
}
#voice #detail .modal .wrap h2 span {
  font-size: 3.7333333333vw;
  line-height: 1.5;
  letter-spacing: 0.42px;
  font-weight: 600;
  align-self: flex-start;
}
@media screen and (min-width: 641px) {
  #voice #detail .modal .wrap h2 span {
    font-size: min(1.6vw, 20px);
    line-height: 1.5;
    letter-spacing: 0.6px;
  }
}
#voice #detail .modal .wrap h2 span span {
  font-size: 2.1333333333vw;
  line-height: 1.5;
  letter-spacing: 0.24px;
  font-weight: 600;
}
@media screen and (min-width: 641px) {
  #voice #detail .modal .wrap h2 span span {
    font-size: min(0.8vw, 10px);
    line-height: 1.5;
    letter-spacing: 0.3px;
  }
}
#voice #detail .modal .wrap h2 img {
  width: 100%;
  border-radius: 50%;
  grid-row: 1/3;
}
#voice #detail .modal .wrap dl {
  margin-top: 6.6666666667vw;
}
@media screen and (min-width: 641px) {
  #voice #detail .modal .wrap dl {
    margin-top: min(40px, 3.2vw);
  }
}
#voice #detail .modal .wrap dl dt {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 5.3333333333vw;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.6px;
}
@media screen and (min-width: 641px) {
  #voice #detail .modal .wrap dl dt {
    font-size: min(2.4vw, 30px);
    line-height: 1.4;
    letter-spacing: 1.5px;
  }
}
#voice #detail .modal .wrap dl dd {
  margin-top: 1.6vw;
  font-size: 3.7333333333vw;
  line-height: 1.8;
  letter-spacing: 0.98px;
  font-weight: 400;
  font-family: YakuHanJP, "Noto Sans JP", serif;
}
@media screen and (min-width: 641px) {
  #voice #detail .modal .wrap dl dd {
    margin-top: min(25px, 2vw);
    font-size: min(1.6vw, 20px);
    line-height: 2;
    letter-spacing: 1px;
  }
}
#voice #detail .modal button {
  font-size: 0;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  position: fixed;
  right: 0;
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none'%3E%3Cpath stroke='%230C1112' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 21 21 1m0 20L1 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 5.3333333333vw auto;
  background-position: center;
  display: block;
}
@media screen and (min-width: 641px) {
  #voice #detail .modal button {
    width: min(64px, 5.12vw);
    height: min(64px, 5.12vw);
    background-size: min(24px, 1.92vw) auto;
  }
}
#voice #detail .modal-bg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.6;
  background: #0c1112;
  z-index: 198;
}

body.modal-open {
  height: 100vh;
  overflow: hidden;
  position: fixed;
}/*# sourceMappingURL=style.css.map */